How to implement DetailView in Kendo

[york]

Hi,

I have a ASP.Net MVC 2 project with Telerik MVC Extension. In it there is Grid that has DetailView to display another grid after clicking a plus sign. It works fine. But when converting the project to Kendo, I am surprise to find that there  is such feature in Kendo. DetailView  is an important feature. So I'd like to know how to implement DetailView in Kendo. Thanks.

York

[Atanas Georgiev]

Hello York,

Please check the following resources.

http://demos.telerik.com/aspnet-mvc/grid/detailtemplate

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/client-detail-template

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/server-detail-template

Regards,
Atanas Georgiev
Telerik

[york]

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>

[Daniel]

Hello,

Usually, this exception is thrown when passing an unexpected value to a strongly typed editor or display template. If the exception is thrown during the initial rendering then please provide the code for the grids models and for any custom editor templates that you are using.

Also, I am not sure if I understand why is the onUpdateAthletesBenchmark function used for but with the code that you provided it will basically pass the same fields that should already be included in the request. If you wish to pass fields from the parent grid model then you should use the same approach as with the read and create requests.

Regards,
Daniel
Telerik

[york]

onUpdateAthletesBenchmark is simply to send data in 2nd grid to action in controller as often used in Kendo Grid.

This exception is thrown during the initial rendering of 2nd grid. Its model is

MaintenanceAthletesBenchmarkSportsViewModel

    {
        [ReadOnly(true)]
        public int BenchmarkResourceId { get; set; }

        [ReadOnly(true)]
        public string ResourceId { get; set; }

        [ReadOnly(true)]
        public int ResourceSportId { get; set; }

        public int BenchmarkTypeId { get; set; }

        public string BenchmarkTypeName { get; set; }

        public int BenchmarkTierId { get; set; }

        public string BenchmarkTierName { get; set; }

        public string YearId { get; set; }

        public int? OTPValue { get; set; }

        public int? NSOValue { get; set; }

        public bool HasComments { get; set; }

        [LocalizedDisplayName(typeof(MaintenanceAthletesLocalization), "Title_Active")]
        public bool Active { get; set; }
    }

2nd grid is opened for each row of 1st grid and so its name depends on ResourceSportId in 1st grid as "Sports_#=ResourceSportId#" (This may be the problem I guess).

[york]

Also the exception happens before controller action is called, and at the time when 2nd grid is rendered.

[Daniel]

Hello again,

In that case could you provide the editor templates that you are using. If the exception is thrown during the rendering then the template expression used for the request cannot be the reason for the problem. The most likely reason for the exception is an editor for Integer properties that expects not Nullable Integer model. TheOTPValue and NSOValue properties are Nullable so their default value will be null and the exception will be thrown in this case.

Regards,
Daniel
Telerik

[york]

The editor template is in <script id="BenchmarksTemplate" type="text/kendo-tmpl">. It is referenced in .ClientDetailTemplateId("BenchmarksTemplate").

[york]

I tried to upload a zip file. But it failed to be uploaded, both time connection were lost in uploading. What is the problem?

[york]

Hi Daniel,

I tried to upload a project to show the problem. But for several time it failed to upload. I don't know why.

Do you have an email so I can send the files to you?

Thanks.

[Daniel]

Hi,

What is the type of the file that you are trying to attach? The allowed file extensions are zip, rar, ace, jpg, gif, css, png. Another possible reason for the upload to fail is the size of the file. The allowed limit in the forums is 2MB. We do not have public emails that can be used send large files. I can convert the thread to support in which case the allowed size will be 20MB. Another option is to create an ftp account for you which can be used for large files.
Anyway, I do not believe that a sample project will be needed. The error is pretty specific and occurs when the model passed to a view is not from the same type as the declared type. Since the exception is thrown from the grid during the initial rendering, the only possible reason is that an editor template used for a grid columns expects a different type than the type of the default property value. Therefore could you attach the EditorTemplates folder from your project.
I am also attaching a runnable sample that uses the code that you provided. Please check it and let me know if I am missing something else.


Regards,
Daniel
Telerik

[york]

Hi Daniel,

I attach a sample to show the problem. You can run it and find out where the problem is. Because the size limit, I remove the package in the project. The package include, Kendo MVC (2015.1.429.440.Trial), MVC 4 and many others. The simplest way to recreate the solution is to create new Telerik MVC project (name: MVC_Controls_Kendo) and select .Net 4 and ASPX (not razor), and add the source files attached.

More specifically, in SportsInfo.aspx, when .ClientDetailTemplateId("BenchmarksTemplate") is removed, the 1st grid named "Sports" can be displayed correctly. But if it is added, then "Sports" can not be loaded correctly, which means something is wrong when linking the 2nd grid named "Sports_#=ResourceSportId#" in <script id="BenchmarksTemplate" type="text/kendo-tmpl">.

The project has everything it is needed. If you have any question, please let me know. Thanks.

[york]

After running the project I attached, you click on "Dispaly Sports Info". Then it will display a grid that has no data. If you click on refresh button on the lower right corner, it will display something like

{"Data":[{"ResourceId":15001,"ResourceSportId":132088,"SportsId":"S_O_CWF_C","SportName":"Weightlifting","DisciplineId":"S_O_CWF_F_WMN","DisciplineName":"Women","EventId":"S_O_CWF_F_WMN_69kg","EventName":"69kg","YearId":"2013/2014","ResourceClassId":"H","ResourceClassName":"High","EventCoachId":14511,"EventCoachName":"Yovan Fillion - 14511","SportTrackingRef":null,"Benchmark":false,"HasComments":false,"CoachLastName":"Fillion","CoachFirstName":"Yovan"},

This means often that there are something wrong with the grid setup.

[Daniel]

Hi,

The problem in the sample project occurs because of an error thrown because of the commented JS code:

    <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 }
//        }

The "#" character is used for the template expression so it should be escaped if it not used for a valid expression:

$("\\#Sports_#=ResourceSportId#").data("kendoGrid").dataSource.read();

Note however that this approach to add the functions will not work correctly. The code will not be evaluated because it is not included in a script tag and even if a script tag is added, the function from each detail will override the one from the previous detail. I would suggest to move the functions to a script tag outside of the template and use the dataSource instance that is available from the context for the requestEnd handler e.g.

<script>
    function onUpdateAthletesBenchmark(e) {
        return { benchmarkResourceId: e.BenchmarkResourceId, resourceSportId: e.ResourceSportId }
    }

    function onAthletesBenchMarkRequestEnd(e) {
        if (e.type == "create" || e.type == "update" || e.type == "destroy") {
            this.read();
        }
    }
</script>

<script id="BenchmarksTemplate" type="text/kendo-tmpl">
    ...

Regards,
Daniel
Telerik

[york]

Hi Daniel,

Now ClientDetailTemplateId("BenchmarksTemplate") works very well in MVC_Controls_Kendo. Thanks for your help.

But after same changes in original project, it still crashes at <script id="BenchmarksTemplate" type="text/kendo-tmpl"> with message:

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

I attach the original page (AthletesSportsInfo.ascx) that is basically the same as SportsInfo.aspx. Please take a look at it and find out where it could be wrong.

Thanks a lot.

[Daniel]

Hi,

Unfortunately the page does not indicate what could be causing the exception. As described in my previous replies, the most likely reason for the exception is an editor template that expects Integer but is provided null. Therefore could you provide the editor templates that are you used in the original project. Also, could you check if setting default values for the Nullable Integer properties resolves the problem:

.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
        {
            model.Id(a => a.BenchmarkResourceId);
            model.Field(a => a.NSOValue).DefaultValue(0);
            model.Field(a => a.OTPValue).DefaultValue(0);
        })

Regards,
Daniel
Telerik

[york]

The editor template is

           .Editable(e => e.Mode(Kendo.Mvc.UI.GridEditMode.InLine).Enabled(true))
After adding above line in <script id="BenchmarksTemplate" type="text/kendo-tmpl">, it still crashes with message:

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

[york]

I also find that if only comment out ".ClientDetailTemplateId("BenchmarksTemplate")", it still crashes with message:
"The model item passed into the dictionary is null, but this dictionary requires a non-null model item of type 'System.Int32'."

Only if we comment out entire section of <script id="BenchmarksTemplate" type="text/kendo-tmpl">, it will display the 1st grid correctly, but without arrow in each grid row.

Any thought on this?

[Daniel]

Hello,

I was referring to the editor templates from the Views\Shared\EditorTemplates folder. Could you provide them? 
Commenting the ClientDetailTemplateId method will not help because the detail will still be rendered.
Also, did you try setting default values for the Nullable fields as suggested in my previous reply?

Regards,
Daniel
Telerik

[york]

There are 12 files in Views\Shared\EditorTemplates folder. From Currency.ascx, to Url.ascx. Which one do you want?

I have set default values for the Nullable fields as suggested in your message, but it makes no difference.

[Daniel]

Hi,

I thought that the problem was with the integer editor but setting the default value should have fixed it. Could you attach all of them?

Regards,
Daniel
Telerik

[york]

Here is the files. Thanks.

[Daniel]

Hi,

The error could be thrown by the Integer editor as it seems to expect not nullable int value. Could you check if changing the type to nullable makes a difference:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<int?>" %>

If the problem persists then could you provide a runnable sample that demonstrates the issue?

Regards,
Daniel
Telerik

[york]

I change the type to nullable as you suggest but it makes no difference.

I think the problem is due to the fact that <script id="BenchmarksTemplate" type="text/kendo-tmpl"> is in .ascx file rather than .aspx file. So I'd like to know if you know any problem of <script id="BenchmarksTemplate" type="text/kendo-tmpl"> in .ascx file.

I try to give you a sample project with .ascx file next week. Thanks.

[york]

Hi Daniel,

I think I find the problem. The problem seems that in MVC4, partial view (.ascx) referenced by ClientDetailTemplateId (BenchmarksTemplate in this case)  must be in View/Shared folder but in original project it is in other folder. My question is that is there a way for partial view (.ascx) referenced by ClientDetailTemplateId to be placed in other folder?

Another question:

In the previous project "MVC_Controls_Kendo" submitted, when adding new Benchmark Resource in 2nd tier grid, the "resourceSportId" can't be passed correctly to "InsertBenchmark".  It is defined as

                    .Create(create => create.Action("InsertBenchmark", "Home", new { resourceSportId = "#=ResourceSportId#" }))

But in InsertBenchmark, "resourceSportId" is 0. What is the problem?

Also what is the event handler when 2nd tier grid is opened (click the small triangle)?

Thanks.

 

[york]

Hi Daniel,

Another problem is that after create/update/delete the 2nd tier grid (BenchmarksTemplate), it is suppose to refresh the 2nd tier grid through jquery function:

        function onBenchMarkRequestEnd(e) {
            if (e.type == "create" || e.type == "update" || e.type == "destroy") {
                $("#Sports_#=ResourceSportId#").data("kendoGrid").dataSource.read();
            }
        }

But it fails to refresh because I think $("#Sports_#=ResourceSportId#") can't locate the correct grid for #=ResourceSportId# can not be decided. How to solve this problem?

Thanks.

[Vladimir Iliev]

Hi York,

Basically the editor templates should be nested either inside the "~/Views/Shared/EditorTemplates" folder or inside "~/Views/%VIEWNAME%/EditorsTemplate" folder in order to be found. More information is available in this help article. 

Also could you please provide the updated project that you are using in order to investigate the exact reasons for the child Grids are not being found and not sending the parent ID field correctly?

Regards,
Vladimir Iliev
Telerik

[york]

Hi Vladimir,

In "~/Views/%VIEWNAME%/EditorsTemplate" , how and where to specify %VIEWNAME%? 

Thanks

[york]

 Hi Vladimir,

I attach a sample project (MVC_Controls_Kendo) ​for you to see the problem. Because the size limit, I remove the package in the
project. The package include, Kendo MVC (2015.1.429.440.Trial), MVC 4
and many others. The simplest way to recreate the solution is to create
new Telerik MVC project (name: MVC_Controls_Kendo) and select .Net 4 and
ASPX (not razor), and add the source files attached.

When running, click on "Display Sports Info" to go to in SportsInfo.aspx page to see the grids. There are 2 problems right now.

1. ​When adding new Benchmark Resource in 2nd tier grid, the "resourceSportId" can't be passed correctly to "InsertBenchmark".  It is defined as
                    .Create(create => create.Action("InsertBenchmark", "Home", new { resourceSportId = "#=ResourceSportId#" }))

But in InsertBenchmark, "resourceSportId" is 0.

2. Another problem is that after create/update/delete the 2nd tier grid (BenchmarksTemplate), it is suppose to refresh the 2nd tier grid through jquery function:
        function onBenchMarkRequestEnd(e) {
            if (e.type == "create" || e.type == "update" || e.type == "destroy") {
                $("#Sports_#=ResourceSportId#").data("kendoGrid").dataSource.read();
            }
        }
But it fails to refresh because I think $("#Sports_#=ResourceSportId#") can't locate the correct grid for #=ResourceSportId# can not be decided.

How to solve these problems?

Also I want to know what is the event handler when 2nd tier grid is opened (click the small triangle)? If I know it, I can solve the 1st problem by passing "ResourceSportId" in the event handler.

Thanks.

[Vladimir Iliev]

Hi,

Please check the answers of your questions below:

1) The reason for current behavior is that the model of the nested Grid contains field with the same name which overrides the passed value. Possible solution is to rename the additional parameter to be unique:

.Create(create => create.Action("InsertBenchmark", "Home", new { parentResourceSportId = "#=ResourceSportId#" }))

public ActionResult InsertBenchmark(DataSourceRequest request, string parentResourceSportId)

2) In current scenario you should use proxy function to pass the child Grid name to the event handler:

.Events(e => e.RequestEnd("function(e){onBenchMarkRequestEnd(e, 'Sports_#=ResourceSportId#')}"))

function onBenchMarkRequestEnd(e, gridName) {
    if (e.type == "create" || e.type == "update" || e.type == "destroy") {
        $("#" + gridName).data("kendoGrid").dataSource.read();
    }
}

Regards,
Vladimir Iliev
Telerik

[york]

Hi Vladimir,

I have one more question about multiple layers of grid. Where to put 3rd layer grid? In the same <script id="" type="text/kendo-tmpl"> as 2nd layer grid or separate block of <script id="" type="text/kendo-tmpl">?

Thanks.

[Vladimir Iliev]

Hi York,

Better approach would be using separate "script" tag as this way escaping "#" symbols will be easier. 

Regards,
Vladimir Iliev
Telerik