EnVisageOnline/Main/Source/EnVisage/Views/Project/MyProjectsList.cshtml

280 lines
12 KiB
Plaintext

@{
ViewBag.Title = "Projects";
}
@*@Html.RenderStyle("~/Content/stylesheets/kendo/web/kendo-overrides-links.css")
@Html.RenderStyle(Url.Content("~/Content/stylesheets/kendo.default.mobile.min.css"))
@Html.RenderStyle(Url.Content("~/Content/stylesheets/kendo.default.min.css"))
@Html.RenderStyle(Url.Content("~/Content/stylesheets/kendo-overrides-links.css"))*@
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />
<style>
.k-grid .k-state-selected .k-header {
background-color: #ffffff !important;
color: #000000;
}
.k-grid .k-alt.k-state-selected {
background-color: #f1f1f1 !important;
color: #000000;
}
.k-header {
background-color: #ffffff !important;
color: #000000;
}
</style>
<script type="text/javascript">
init.push(function () {
var scenarioUrl = '@Url.Action("Details", "Scenarios")';
var grid = $("#MyProjectsGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: '@Url.Action("MyProjectsList", "Project")',
dataType: "json"
}
},
//group: { field: "ProjectParentId" },
schema: {
model: {
fields: {
Id: { type: 'string', hidden: true },
ProjectName: { type: 'string', editable: false, nullable: false, hidden: true },
ScenarioName: { type: 'string', editable: false, nullable: false, hidden: true },
ProjectParentName: { type: 'string', editable: false, nullable: false, hidden: true },
ProjectParentId: { type: 'string', editable: false, nullable: false, groupHeaderTemplate: "Grouped By Name: #= ProjectParentName #", hidden: true },
Status: { type: 'string', editable: false, nullable: false, hidden: true },
Number: { type: 'string', editable: false, nullable: false, hidden: true },
Priority: { type: 'string', editable: false, nullable: false, hidden: true },
Classification: { type: 'string', editable: false, nullable: false, hidden: true },
Teams: { type: 'string', editable: false, nullable: false, hidden: true },
DeadLine: { type: 'date', editable: false, nullable: false, hidden: true },
Client: { type: 'string', editable: false, nullable: false, hidden: true },
Command: { type: 'string', editable: false, nullable: false, hidden: true }
}
}
}
},
dataBound: function (e) {
//this.expandRow(this.tbody.find("tr.k-master-row").first());
var dataSource = this.dataSource;
this.element.find('tr.k-master-row').each(function () {
var row = $(this);
var data = dataSource.getByUid(row.data('uid'));
// this example will work if ReportId is null or 0 (if the row has no details)
if (data.get('Parts').length <= 0) {
row.find('.k-hierarchy-cell a').css({ opacity: 0.3, cursor: 'default' }).click(function (e) { e.stopImmediatePropagation(); return false; });
}
});
this.expandRow(this.tbody.find("tr.k-master-row"));
},
//filterable: {
// extra: false,
// operators: {
// string: {
// startswith: "Starts with",
// eq: "Is equal to",
// neq: "Is not equal to"
// }
// }
//},
change: function (e) {
var row = this.select();
var grid = $("#MyProjectsGrid").data("kendoGrid");
var dataItem = grid.dataItem($(row));
if (dataItem.Parts.length > 0) {
if (row != null) {
if (row.next(".k-detail-row").is(":visible")) {
e.sender.collapseRow(row);
} else {
e.sender.expandRow(row);
}
}
}
},
//toolbar: kendo.template($("#template").html()),
toolbar: ["excel"],
excel: {
allPages: true
},
editable: {
update: true,
destroy: false
},
pageable: true,
pageable: {
pageSize: 25,
previousNext: false
},
groupable: true,
reorderable: true,
resizable: true,
selectable: "row",
sortable: true,
detailInit: detailInit,
columns: [
{
field: "ProjectName", title: "Name", width: "200px", filterable: {
ui: projectNameFilter
},
template: "<a href=Edit/?Id=#=Id#>#=ProjectName#</a>"
},
{ field: "ScenarioName", title: "Active Scenario", width: "150px", template: "<a href=" + scenarioUrl + "/#=ScenarioId#?backUrl=%2FProject&backName=projects>#=ScenarioName#</a>" },
{ field: "Id", title: "Name", hidden: true },
{ field: "Number", title: "Project Number", width: "110px" },
{ field: "Status", title: "Status", width: "100px" },
{ field: "Classification", title: "Classification", width: "200px" },
{ field: "Priority", title: "Priority", width: "100px" },
{ field: "Teams", title: "Teams", width: "200px" },
{ field: "Client", title: "Client", width: "200px" },
]
});
$(".toolbar .search-btn").click(function () {
var ds = $("#MyProjectsGrid").data("kendoGrid").dataSource;
var filter = {
logic: "or",
filters: []
};
var val=$(".toolbar #Name").val();
if (!val)
val="";
if (val != "") {
filter.filters.push({
field: "ProjectName",
operator: "contains",
value: $(".toolbar #Name").val()
});
filter.filters.push({
field: "Number",
operator: "contains",
value: $(".toolbar #Name").val()
});
filter.filters.push({
field: "Status",
operator: "contains",
value: $(".toolbar #Name").val()
});
filter.filters.push({
field: "Classification",
operator: "contains",
value: $(".toolbar #Name").val()
});
filter.filters.push({
field: "Teams",
operator: "contains",
value: $(".toolbar #Name").val()
});
filter.filters.push({
field: "Client",
operator: "contains",
value: $(".toolbar #Name").val()
});
ds.filter([filter]);
} else {
ds.filter([]);
}
});
$("#export").click(function (e) {
var grid = $("#MyProjectsGrid").data("kendoGrid");
grid.saveAsExcel();
});
function detailInit(e) {
$("<div id=\"nested-grid-" + e.data.Id + "\"/>").appendTo(e.detailCell).kendoGrid({
dataSource: e.data.Parts,
dataBound: function (e) {
$("#MyProjectsGrid").busyIndicator(false);
},
scrollable: false,
sortable: true,
pageable: false,
columns: [
{
field: "ProjectName", title: "Name", width: "200px", headerAttributes: {
style: "display: none"
},
template: "<a href=Edit/?Id=#=Id#>#=ProjectName#</a>"
},
{
field: "ScenarioName", title: "Active Scenario", width: "150px", headerAttributes: {
style: "display: none"
},
template: "<a href=" + scenarioUrl + "/#=ScenarioId#?backUrl=%2FProject&backName=projects>#=ScenarioName#</a>"
},
{
field: "Number", title: "Project Number", width: "110px", headerAttributes: {
style: "display: none"
}
},
{
field: "Status", title: "Status", width: "100px", headerAttributes: {
style: "display: none"
}
},
{
field: "Classification", title: "Classification", width: "200px", headerAttributes: {
style: "display: none"
}
},
{
field: "Priority", title: "Priority", width: "100px", headerAttributes: {
style: "display: none"
}
},
{
field: "Teams", title: "Teams", width: "200px", headerAttributes: {
style: "display: none"
}
},
{
field: "Client", title: "Client", width: "200px", headerAttributes: {
style: "display: none"
}
},
]
});
}
function projectNameFilter(element) {
}
});
</script>
<script id="command-template" type="text/x-kendo-template">
<input class="combobox" style="width:200px" />
</script>
<div class="toolbar row">
<div class="col-sm-2">
Search: <input id="Name" class="text-box" />
</div>
<div class="col-sm-2">
<button class="buttons-1 search-btn">search</button>
</div>
</div>
<div id="MyProjectsGrid" class="table table-striped table-bordered" style="width: auto">
</div>