How to implement DetailView in Kendo

Hi Atanas,

Thanks for the reply. I have Kendo Grid in which I want to display 2nd grid for each row of 1st grid. But when loading the 2nd grid, I got error:

"An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but was not handled in user code

The model item passed into the dictionary is null, but this dictionary requires a non-null model item of type 'System.Int32'."

It looks like the Id not being passed correctly from 1st to 2nd grid. Here is the code:

1st Kendo Grid

        <%= Html.Kendo().Grid<MaintenanceAthletesSportsInfoViewModel>()
            .Name("Sports")
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(a => a.ResourceSportId))
                    .ServerOperation(false)
                    .Events(e => e.RequestEnd("onAthletesSportRequestEnd"))
                    .Create(create => create.Action("InsertAthletesSport", "Maintenance", new { resourceId = ViewData["resourceId"] }))
                    .Read(read => read.Action("AthletesSportsInfoAjax", "Maintenance", new { resourceId = ViewData["resourceId"] }))
                    .Update(update => update.Action("UpdateAthletesSport", "Maintenance").Data("onUpdateAthletesSport"))
                    .Destroy(destroy => destroy.Action("DeleteAthletesSport", "Maintenance").Data("onUpdateAthletesSport"))
                )
            .ToolBar(t =>
                {
                     t.Create();
                })
            .Editable(e => e.Mode(Kendo.Mvc.UI.GridEditMode.InLine).Enabled(true))
            .Events(e => e.Save("onInsertSportsInfo")
                            .Edit("onEditSportsInfo")
                )
            .Pageable(pager => pager.Input(true)
                                    .Refresh(true)
                                    .PageSizes(new[] { 10, 20, 30 })
                )
             .Sortable()
            .Filterable()
            .ClientDetailTemplateId("BenchmarksTemplate")
            .Columns(columns =>
            {
                columns.Bound(s => s.SportName)
                    .Width(130);
                columns.Bound(s => s.DisciplineName)
                    .Width(140);
                columns.Bound(s => s.EventName)
                    .Width(130);
                columns.Bound(s => s.YearId)
                    .Width(100);
                columns.Bound(s => s.ResourceClassName)
                    .Width(100);
                columns.Bound(s => s.SportTrackingRef)
                    .Width(80);
                columns.Bound(s => s.Benchmark)
                    .HeaderHtmlAttributes(new { title = OTP.Ring.Models.ViewModel.MaintenanceAthletesLocalization.Title_Benchmark })
                    .HtmlAttributes(new { style = "text-align:center" })
                    .ClientTemplate("# if (Benchmark == false) { #" + "<div class='sprite sprite-Delete16'></div>" + "# } #")
                    .Width(80);
                columns.Command(commands =>
                {

                       commands.Edit();
                        commands.Destroy();
                })
                .Width(175)
            })

2nd Kendo Grid (ResourceSportId is the field of MaintenanceAthletesSportsInfoViewModel in 1st grid and passed to 2nd grid as reference. It could be the problem that cause the error.)

    <script id="BenchmarksTemplate" type="text/kendo-tmpl">
        function onAthletesBenchMarkRequestEnd(e) {
            if (e.type == "create" || e.type == "update" || e.type == "destroy") {
                $("#Sports_#=ResourceSportId#").data("kendoGrid").dataSource.read();
            }
        }
        function onUpdateAthletesBenchmark(e) {
            return { benchmarkResourceId: e.BenchmarkResourceId, resourceSportId: e.ResourceSportId }
        }

       <% Html.Kendo().Grid<MaintenanceAthletesBenchmarkSportsViewModel>()
            .Name("Sports_#=ResourceSportId#")
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(a => a.BenchmarkResourceId))
                    .ServerOperation(false)
                    .Events(e => e.RequestEnd("onAthletesBenchMarkRequestEnd"))
                    .Create(create => create.Action("InsertAthletesBenchmark", "Maintenance", new { resourceSportId = "#=ResourceSportId#" }))
                    .Read(read => read.Action("AthletesBenchmarkSportsAjax", "Maintenance", new { resourceSportId = "#=ResourceSportId#" }))
                    .Update(update => update.Action("UpdateAthletesBenchmark", "Maintenance").Data("onUpdateAthletesBenchmark"))
                    .Destroy(destroy => destroy.Action("DeleteAthletesBenchmark", "Maintenance").Data("onUpdateAthletesBenchmark"))
                )
            .ToolBar(toolbar =>
                {
                    toolbar.Create();
                })
            .Pageable()
            .Sortable()
            .Filterable()
            .Columns(columns =>
            {
                columns.Bound(b => b.BenchmarkTypeName)
                    .Width(180);
                columns.Bound(b => b.BenchmarkTierName)
                    .Width(180);
                columns.Bound(b => b.NSOValue)
                    .Width(180);
                columns.Bound(b => b.OTPValue)
                    .Width(180);
                columns.Command(commands =>
                {
                        commands.Edit();
                        commands.Destroy();
                 })
                .Width(95);
            })
            .ToClientTemplate();         
      %>
    </script>