Kendo Grid Detail Template with MVC

@using Kendo.Mvc.UI

<input type="button" id="Create" value="Add New" />
<input type="button" id="Delete" value="Delete" onclick="DeleteSelected();" />

//Initailization

@(Html.Kendo().Grid<iFacilitiesDemo.Models.sp_Result>()
     //@(Html.Kendo().Grid<iFacilitiesDemo.Models.Task>()
    .Name("Grid")
     //.BindTo((IEnumerable<iFacilitiesDemo.Models.sp_Result>)ViewBag.Products)
     //.EnableCustomBinding(true)
    .Columns(columns =>
    {
        columns.Bound(p => p.Status).HeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' />").ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(30);
        columns.Bound(p => p.Job_No).ClientFooterTemplate("Total Count: #=count# and Max #= max#");
        columns.Bound(p => p.Company);
        columns.Bound(p => p.Status);
        columns.Bound(p => p.Manager);
        columns.Bound(p => p.Client);
        columns.Bound(p => p.Start_Date).Format("{0:dd/MM/yyyy}");
        columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
        columns.Command(c =>
        {
            c.Custom("RefreshRecord").Text("Your Detail").Click("onClick");
        }).Width(80);
    })
    .Groupable()
    .Pageable(pager => pager
            .Input(true)
            .Numeric(true)
            .Info(true)
            .PreviousNext(true)
            .Refresh(true)
            .PageSizes(true)
            )
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    .Sortable()
    .Filterable(filterable => filterable
            .Extra(true)
            .Operators(operators => operators
                .ForString(str => str.Clear()
                    .Contains("Contains")
                    .StartsWith("Start With")
                    .IsEqualTo("Is equal to")
             ))
             .Operators(operators => operators
                    .ForDate(str => str.Clear()
                    .IsGreaterThanOrEqualTo("From")
                    .IsLessThanOrEqualTo("To")
             ))
    )
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Filterable()
    .ClientDetailTemplateId("MyTemplate")
    .HtmlAttributes(new { style = "height:430px;" })
     //.Events(events => events.DataBound("dataBound"))
    .DataSource(dataSource => dataSource.Ajax()
         .Aggregates(aggregates =>
         {
             aggregates.Add(p => p.Job_No).Min().Max().Count();
         })
        .Model(
                model =>
                {
                    model.Id(p => p.Job_No);
                }
        )
        .ServerOperation(false)
        //.Read(read => read.Action("GetTaskAll", "Kendo"))
        .Read(read => read.Action("GetTaskAllBySP", "Kendo"))
     )
        //Bound Start    @*.Events(events => events.DataBound( @<text> function(e) { alert('bound')  }</text>*@
        //Bound End
     .Events(events => events.DataBound("gridDataBound"))
))


@*For Custom Command*@
@(Html.Kendo().Window().Name("Details")
    .Title("My Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)


@*For Detail Template start*@
<script id="MyTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip_1")
            //.Name("tabStrip_#=Job_No#")
            .SelectedIndex(0)
            .Animation(false)
            .Events(e => e.Select("tabstrip_select"))
            //.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Orders").Content(@<text>
                    @(Html.Kendo().Grid<iFacilitiesDemo.Models.sp_Result>()
                        .Name("grid_#=Job_No#")

                        .Columns(columns =>
                        {
                            columns.Bound(o => o.Job_No).Title("ID").Width(56);
                            columns.Bound(o => o.Company).Width(110);
                            columns.Bound(o => o.Status);
                            columns.Bound(o => o.Client).Width(190);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Read(read => read.Action("GetTaskAllBySP", "Kendo"))
                            //.Read(read => read.Action("GetTaskAllBySP", "Kendo", new { employeeID = "#=EmployeeID#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
                </text>
                );
                items.Add().Text("aa").Content(
                    "<div class='employee-details'>hihi </div>"
                );
            })
            .ToClientTemplate())
</script>
//Css
<style scoped="scoped">
    .k-detail-cell .k-tabstrip .k-content
    {
        padding: 0.2em;
    }
   @*Td and tr Padding [height]*@
    .k-grid td
    {
        padding: 2px 4px;
    }
 
</style>

@*For Detail Template End*@

@*View Detail Start*@
<script type="text/x-kendo-template" id="ViewTemplate">
    <div id="details-container">
        <h2>#= Job_No # and #= Company #</h2>
        <em>#= Manager #</em>
        <dl>
            <dt>Status: #= Status #</dt>
            <dt>Client: #= Client #</dt>
        </dl>
    </div>
</script>

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#ViewTemplate").html());

    //PreviewClick
    function showDetails(e) {
        //        $("div.k-widget.k-window").css("-webkit-transform", "scale(1)");

        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));

        wnd.center().open();
    }
</script>
@*View Detail End*@

<script>
    //Grid Data Bound Start
    function gridDataBound(e) {

        //$("div.k-widget.k-window").css("-webkit-transform", "scale(2)");
        //        var dds = $("#Details").parent('div');

        //        alert(dds.innerHTML)
        //        dds.css({
        //            '-moz-transform': 'scale(2)',
        //            '-webkit-transform': 'scale(2)'
        //        });
        var grdApplyColor = $('#Grid').data("kendoGrid");
        row = grdApplyColor.tbody.find(">tr:not(.k-grouping-row)");

        //6th row is Status on its value we want to apply color
        rowActive = row.find("td:nth-child(5)");
        $.each(rowActive, function (i, rowValue) {
            //debugger;
            //alert(rowValue.innerHTML);
            //check Status = Invoiced 'then' #ECF6CE
            if (rowValue.innerHTML == 'Invoiced') {
                objRow = grdApplyColor.tbody.find('tr:nth-child(' + (i + 1) + ')');
                objRow.css("background-color", "#ECF6CE"); ;
            }
            else if (rowValue.innerHTML == 'false') {
                objRow = grdApplyColor.tbody.find('tr:nth-child(' + (i + 1) + ')');
                objRow.css("background-color", "#848484");
            }
        });
    }
    //Grid Data Bound End
    //Grid Header Chkbox chk all chkbox
    function ToggleChkBox(flag) {
        $('.chkbxq').each(function () {
            $(this).attr('checked', flag);
        });
    }
    //On Delete button click
    function DeleteSelected() {
        //        if (confirm('Are you sure you want to Delete')) {
        //            return false;
        //        }
        var idArray = "";
        $('.chkbxq').each(function () {
            if (this.checked == true) {
                idArray = idArray + "," + this.id;
            }
        });
        alert('Data to delete: ' + idArray);

        //grid.dataSource.read();
        //grid.query({ page: 1, pageSize: 10, sort: { field: "POID", dir: "asc"} });
    }
    //To change tab strip in Grid
    function tabstrip_select(e) {
        //alert('tabstrip_select');
        var x = e.item;
        var selectedIndex = $(e.item).index();
    }

    //check box toggle state (problem 2 time toggle so did it third time for control click)
    function grdChkBoxClick(obj) {
        if (obj.checked == true) {
            obj.checked = false;
        }
        else if (obj.checked == false) {
            obj.checked = true;
        }
    }
    //Cell click Checkbox select
    $('#Grid').on("click", "td", function (e) {
        var selectedTd = $(e.target).closest("td");
        var cellText = $(e.target).closest("td").find('input:checkbox').context;
        cellText = cellText.textContent || cellText.outerText;
        if (cellText != "ViewDetails") {
            var grdChkBox = selectedTd.parents('tr').find("td:first").next("td").find('input:checkbox');
            grdChkBox.prop('checked', !grdChkBox.prop('checked'));
        }
    });
    function onClick(e) {
        grid = $("#Grid").data("kendoGrid");
        dataItem = grid.dataItem($(e.srcElement).closest("tr"));
        var jobNos = dataItem.Job_No;
        $.post("/Kendo/getViewDetailJobNo", { 'inJobNo': jobNos }, function (ViewDetaildatas) {
            if (ViewDetaildatas != null) {
                var winData = '<h2>' + ViewDetaildatas[0].OrderNo + ' and ' + ViewDetaildatas[0].ECSJobNo + '</h2>' +
                             '<em>' + ViewDetaildatas[0].Manager + '</em>' +
                             '<dl>' +
                                   '<dt>DescOfFault:' + ViewDetaildatas[0].DescOfFault + '</dt>' +
                                    '<dt>Type:' + ViewDetaildatas[0].Type + '</dt>' +
                               '</dl>';
                var wnd = $("#Details").data("kendoWindow");

                wnd.content(winData);
                wnd.center().open();
            }
        });
    }
</script>