@(Html.Kendo().Grid<LewisTestProject.Models.Customer>()
  .Name("grid")
  .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model => {
          model.Id(p => p.CustomerID);
          model.Field(p => p.CustomerID).Editable(false);
      })
      .PageSize(18)
      .Read(read => read.Action("Customers_Read", "Customer"))
      .Create(create => create.Action("Customers_Create", "Customer"))
      .Update(update => update.Action("Customers_Update", "Customer"))
      .Destroy(destroy => destroy.Action("Customers_Destroy", "Customer"))

   )
  .Columns(columns =>
  {
      columns.Bound(order => order.CustomerID);
      columns.Bound(order => order.CompanyName);
      columns.Bound(order => order.ContactName);
      columns.Bound(order => order.ContactTitle);
      columns.Bound(order => order.Address);
      columns.Bound(order => order.City);
      columns.Bound(order => order.Region);
      columns.Bound(order => order.PostalCode);
      columns.Bound(order => order.Country);
      columns.Bound(order => order.Phone);
      columns.Bound(order => order.Fax);
      columns.Command(command =>
      {
          command.Edit();
          command.Destroy();
      }
      ).Title("Actions");
  })
  .ToolBar(toolbar => {
      toolbar.Create();
      toolbar.Search();
  })
  .Pageable()
  .Sortable()
  .ClientDetailTemplateId("template")
  .Events(events => events.DataBound("dataBound"))
  .Editable(e => e.Mode(GridEditMode.InLine))
 )

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
    .Name("tabStrip_#=CustomerID#")
    .SelectedIndex(0)
    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
    .Items(items =>
    {
        items.Add().Text("Orders").Content(@<text>
            @(Html.Kendo().Grid<LewisTestProject.Models.OrderViewModel>()
                .Name("grid_#=CustomerID#") // template expression, to be evaluated in the master context
                .Columns(columns =>
                {
                    columns.Bound(o => o.CustomerID);
                    columns.Bound(o => o.OrderID).Title("ID").Width(100);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("OrdersDetail_Read", "Customers", new { customerID = "#=CustomerID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
                )
        </text>
        );
        //items.Add().Text("Contact Information").Content(
        //    "<div class='employee-details'>" +
        //        "<ul>" +
        //            "<li><label>Country:</label>#= Country #</li>" +
        //            "<li><label>City:</label>#= City #</li>" +
        //            "<li><label>Address:</label>#= Address #</li>" +
        //            "<li><label>Home Phone:</label>#= Phone #</li>" +
        //        "</ul>" +
        //    "</div>"
        //);
    })
    .ToClientTemplate()
    )
</script>

columns.Bound(p => p.PublicFunds).Editable("EditFieldsForNewRec").ClientTemplate("#=CheckIsPublicFund(data)#").Title("Public Funds").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});
columns.Bound(p => p.CohortFtpRateFloor).Editable("EditFieldsForNewRec").Title("Cohort Ftp Rate Floor").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});
columns.Bound(p => p.HasDepositRateFloor).ClientTemplate("#=CheckIsDepositRateFloor(data)#").Editable("EditFieldsForNewRec").Title("Has Deposit Rate Floor").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});

function CheckIsPublicFund(data) {
    return data.PublicFunds ? "Yes" : "No"
}

function CheckIsDepositRateFloor(data) {
    return data.HasDepositRateFloor ? "Yes" : "No"
}

                    @(Html.Kendo().Filter<...>()
                        .Name("fltMatrix")
                        .Events(e => e.Change("fltMatrix_Change"))
                        .DataSource("dataSource1")
                        .ExpressionPreview()
                        .Fields(f =>
                        {
...
                        }))
                    @Html.HiddenFor(model => model.FILTER)

    function fltMatrix_Change(e) {
        e.sender.applyFilter();
        $("#FILTER").val(JSON.stringify(e.expression));
    }

    function getInitialExpression() {
        if ($("#FILTER").val()) {
            return JSON.parse($("#FILTER").val());
        }
    }

    $(document).ready(function () {
        if (getInitialExpression()) {
            var filter = $("#fltMatrix").data("kendoFilter");
            console.log(filter);
            var options = filter.getOptions();
            options.expression = getInitialExpression();
            filter.setOptions(options);
            filter.applyFilter();
        }
    });

@(Html.Kendo().Grid<ESGR.Icms.Core.Domain.QuickViewCasesDto>()
                 .Name("grid")
                 .Sortable()
             .Pageable(pager =>
             {
                 pager.Input(true);
                 pager.Info(true);
                 pager.Numeric(false);
                 pager.PreviousNext(true);
                 pager.PageSizes(new int[] { 25, 50, 100 });
             })
             .Columns(columns =>
             {
                 columns.Bound(column => column.FirstName).Title("First Name").Media("(min-width: 768px)");
                 columns.Bound(column => column.LastName).Title("Last Name").Media("(min-width: 768px)");
                 columns.Bound(column => column.DateOpened).Title("Date Opened").Width(200).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseNumber).Title("Case Number").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseStatus).Title("Status").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseState).Title("State").Width(80).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseRegion).Title("Region").Width(100).Media("(min-width: 768px)");
                 columns.Bound(column => column.AssignedTo).Title("Assigned To").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.EnteredBy).Title("Entered By").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.LastUpdate).Title("Last Update").Width(130).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseIdentifier).Title("Case Identifier").Width(80).Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.Employer).Title("Employer").Width(80).Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.OmbudsmanFirstName).Title("OmbudsmanFirstName").Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.OmbudsmanLastName).Title("OmbudsmanLastName").Media("(min-width: 768px)").Hidden();
                 columns.Group(group => group.Title("Action Required").Width(150).Columns(info =>
                 {
                     info.Bound(x => x.TwoDayRequired).Title("2 Day").Width(50);
                     info.Bound(x => x.SevenDayRequired).Title("7 Day").Width(50);
                     info.Bound(x => x.FourteenDayRequired).Title("14 Day").Width(56);
                 }).Media("(min-width: 768px)")
                 );
                 columns.Bound(column => column.CaseID).Width(40).ClientTemplate("<a class='k-button manage' aria-label='ManageCase' href='" +
                 @Url.Content("~/ManageCase") + "?caseId=#= CaseID #'" + ">ManageCase</a>").Sortable(false)
                     .Title("Manage Case").Width(100).Media("(min-width: 768px)");
                 columns.Template("#=resColTemplate(data)#").Title("Records").Media("(max-width: 768px)");
                 columns.Command(command => command.Custom("MoreInfo").Click("showDetails")).Title("More Info").Width(90).Media("(min-width: 768px)");
             }).DataSource(ds => ds.Ajax()
              .Read(r => r.Url(@Url.Content("~/QuickViewCases?handler=Read")).Data("forgeryToken").Data("StatusSelection"))
                 .Model(m => m.Id(id => id.CaseID))
                 .PageSize(25))
                 .Pageable()
             )

 @*ViewDetail Modal view*@
 @(Html.Kendo().Window()
     .Name("Details")
     .Title("Case More Information")
     .Visible(false)
     .Modal(true)
     .Resizable()
     .Draggable(true)
     .Width(500)
 )

<script type="text/x-kendo-template" id="template">
    <div>
        <div class='viewdetails'>
            <ul class="form-group p-3 mt-2">
                <li><span class="b">Date Opened:&nbsp;</span>#= DateOpenedString #</li>
                <li><span class="b">Ombudsman:&nbsp;</span>#= OmbudsmanFirstName # #= OmbudsmanLastName # </li>
                <li><span class="b">Employer:&nbsp;</span>#= Employer #</li>
                <li><span class="b">Primary Point of Contact First Name:&nbsp;</span>#= PriPocFirst #</li>
                <li><span class="b">Primary Point of Contact Last Name:&nbsp;</span>#= PriPocLast #</li>
                <li><span class="b">Email:&nbsp;</span>#= Email #</li>
                <li><span class="b">State:&nbsp;</span>#= CaseState #</li>
                <li><span class="b">Summary:&nbsp;</span>#= Summary #</li>
            </ul>
        </div>
    </div>

</script>

<script>
 var detailsTemplate;
        
 $(document).ready(function() {
     detailsTemplate = kendo.template($("#template").html());
 });

//Open ViewDetail Window
function showDetails(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var wnd = $("#Details").data("kendoWindow");
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
};

</script>

Events(events => events.Paste("onPaste"))

function onPaste(e) {

}