Loading detail template from same data source as grid

2 posts, 0 answers
  1. Daniel
    Daniel avatar
    3 posts
    Member since:
    Nov 2017

    Posted 05 Dec 2017 Link to this post

    Hello,

     

    I'm having problems getting the details template template to populate from the same kendo data source as the grid.  I'm loading the data source for the grid like this:

    gridDatasource = new kendo.data.DataSource{

        transport:

        {

          read: function(options)

          {

            $.ajax({

              url: "../services/foo.asmx/GetData",

              datatype: "json",

              success: function(result){ options.success(result) }

            });

          }

        }

    }

     

    The grid populates fine but the detail template will not load.  This is how I'm trying to call the detailInit(e)

    function detailInit(e) {

        getRenewalOpsDetails(e.data);
        var detailRow = e.detailRow;

        detailRow.find(".tabstrip").kendoTabStrip
        ({
            animation: { open: { effects: "fadeIn" } }
        });

        detailRow.find("#grdAccountDetails").kendoGrid
        ({
            dataSource: kdsRenewalOpsDetails,
            scrollable: false,
            columns:
            [
                { field: "RefNo", title: "Account Ref No" },
                { field: "NamedInsured", title: "Named Insured" },
                { field: "Address", title: "Address" },
                { field: "RenewalOpsComments", title: "Comments" }
            ]
        });

    }

    function getRenewalOpsDetails(data)
    {    
        kdsRenewalOpsDetails = new kendo.data.DataSource
        ({
            dataSource:
            {
                data: data,
                schema:
                {
                    model:
                    {
                        field:
                        {
                            Address: { type: "string" },
                            NamedInsured: { type: "string" },
                            RefNo: { type: "string" },
                            RenewalOpsComments: { type: "string", editable: true },
                            RenewalOpsCommentsTextID: { type: "number" },
                            StateCode: { type: "string" }
                        }
                    }
                }
            }
        });
    }

     

    When debugging inside of chrome I can see that there is data inside of e.data, but the details grid will not populate.  Any help would be greatly appreciated, thanks!

  2. Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 07 Dec 2017 Link to this post

    Hello, Daniel,

    Thank you for the provided code.

    After inspecting it I can suggest checking the format of the data which passed to the child dataSource. In some cases even if a data is passed, if it is not in the expected former the Grill will not pass it.

    Also, we recommend using classes for the child items, as otherwise multiple elements with the same ID will be created which is not recommended:

    http://demos.telerik.com/kendo-ui/grid/detailtemplate

    If the issue still occurs please provide a fully runnable example and I will gladly investigate it.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top