Kendo UI Grid Ajax Binding with DetailsTemplate

4 posts, 0 answers
  1. Zeynel
    Zeynel avatar
    2 posts
    Member since:
    Dec 2015

    Posted 18 Jan Link to this post

     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.
  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 20 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Zeynel
    Zeynel avatar
    2 posts
    Member since:
    Dec 2015

    Posted 25 Jan in reply to Radoslav Link to this post

    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

  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 27 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready