Grid with expandable detail grid

[Ingerid]

Hi!

I want to create a kendo grid with expandable detail grids, ie each master row will have an expand button which will create a detail row containing a new kendo grid with aligned columns. For this I use ClientDetailTemplateId. However, my problem is that the detail grids are always empty!

The view model used for each master row:

public int CountryId { get; set; }

public string CountryName { get; set; }

public IEnumerable<StateViewModel> StateList { get; set; }

 

StateList should be used to initiate the detail grids. My template looks like this

<script id="template_StateList" type="text/kendo-tmpl">
    <p style="margin:1rem">The country has #=data.StateList.length# states.</p>
    @(Html.Kendo().Grid<StateViewModel>()
            .Name("grid_#=CountryId#")
            .Columns(columns =>
            {
                columns.Bound(c => c.StateId).Width(265).Title("Id");
                columns.Bound(c => c.StateName).Width(85).Title("Name");
            })
            .DataSource("#= StateList #")
            .Sortable()
            .ToClientTemplate())
</script>

I have found others with a similar problem that have solved this by using read.Action(), but I would really prefer it if I could pass the data through my view model instead. Thanks for your time!

[Tsvetomir]

Hi Ingerid,

I have investigated the provided code snippets and I have noticed that you are willing to seed the data source based on a property from the parent model as follows:

            .DataSource("#= StateList #")

However, the DataSource option accepts configuration options and not a stringified collection. That is why the grids remain empty. 

The recommended approach is to set up a separate data source for the inner grids that will request the relevant data from the server. This would be especially handy if you would like to enable all CRUD operations.

As an alternative, you could go ahead and subscribe to the DetailInit event of the parent grid. Within the handler, access the parent row's data item and seed the inner child's data source with the following method:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/data

However, using this approach will lead to complications if later on, you would like to enable editing.

 

Kind regards,
Tsvetomir
Progress Telerik