@{
    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>