Kendo UI Grid Ajax Binding with DetailsTemplate

[Zeynel]

 I try to make a grid hierarchy. I have two grids. One of them is inside of the other. Parent grid reads the data via ajax read method. Returning json result has a field of a list. I want to use this list for populating the inner grid. But i get an error of Cannot use only server templates in Ajax or WebService binding mode. Please specify a client template as well.

@(Html.Kendo().Grid<Customers>().Name("grid")
    .Scrollable()
.Pageable().Columns(columns =>{         columns.Bound(o => o.CompanyName);         columns.Bound(o => o.ContactName);}).DetailTemplate(@<div>@(Html.Kendo().Grid<Phones>(item.Phones).Name("g" + item.ID).Scrollable().Pageable().Columns(columns =>{                         columns.Bound(o => o.Number);}))</div >).DataSource(datasource => datasource
        .Ajax().Read(read => read.Action("GetCustomers", "Home", new { x = "asd"}))))

I dont want the inner grid read via ajax. I want it to use the list field of returning json.

[Radoslav]

Hello Zeynel,

To achieve the desired functionality you can try to not assigning datasource to the detail grid:

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<WebApplication1.Models.ProductViewModel>()
            .Name("grid_#=ID#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.ID).Width(110);
                columns.Bound(o => o.ProductName).Width(110);
            })
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>

Handle the detailExpand event of the parent grid and assign data to the child grid got from the expanded row data item:

function detailExpand(e) {
        var dataItem = e.sender.dataItem(e.masterRow);
        // get the data from the dataitem and pass it to the data source of the child grid.
       e.detailRow.find(".k-grid").data("kendoGrid").dataSource.data(dataItem.ListField);
}

Additionally I am sending you a simple example which demonstrates this approach. Please check it out and let me know if it helps you.

Looking forward for your reply.

Regards,
Radoslav
Telerik

[Zeynel]

The functionalities of template grid are lost. It does not display formatted datetime.

 Additionally i have more than 500 records. When i use this aproach it display all the records in the same page. In other words pageable functionality of grid is also disappeared

[Radoslav]

Hello Zeynel,

Based on the provided information is hard to say why you experience the described problems. Can you post the grids declarations and a bit of the sample data which you use? Thus we will be able to gather more details about your scenario and provide you with more to-the-point answer.
At meantime you can check the following help articles which elaborate on the date formatting:
http://docs.telerik.com/kendo-ui/framework/globalization/dateformatting
You can use this approach in the column template and format the date object.

Looking forward for your reply.

Regards,
Radoslav
Telerik