Kendo Grid Details On Row Expand

Question

Whenever I expand a detail row in a Kendo grid I would like to get remote data to populate the detail template. Here is my current process:

• Create the kendo grid and populate with data
• Register the detailInit event during grid initializtion
• When user clicks the row to expand, detailInit gets called
• In detailInit, create a kendo DataSource with my remote data
• How do i change the detailRow with my new data? Is this possible?

fyi...The detail row is NOT a kendoGrid. It is a layout of tags like this #= MyDataField#

  function detailInit(e) {
        var detailRow = e.detailRow;

        //Go get the details for the selected row
        var ds = new kendo.data.DataSource(
        {
            transport: {
                read: {
                    data: "d.Data",
                    dataFilter: function (data) {

                        var msg = eval('(' + data + ')');
                        if (msg.hasOwnProperty('d'))
                            return msg.d;
                        else
                            return msg;
                    },
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    url: "SearchComponents.aspx/GetComponent"


                },
                parameterMap: function (options) {
                    return kendo.stringify({ lpComponentId: e.data.componentid });
                }
            }
        });

        ds.fetch(function () {
            var data = this.data();
        });

        //How do i update the detail row with my dataSource?

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

    }

Answer 1

A data source doesn't have an intrinsic way of displaying it, so you'll need to decide what you want to display and in which format (e.g. a single data item in your data source, or a table row for each data item, or ...). In general, you can simply replace the contents of e.detailCell:

$("#grid").kendoGrid({
  columns: [
    { field: "name" }
  ],
  dataSource: [
    {
      name: "Beverages",
      products: [
        { name: "Tea" },
        { name: "Coffee" }
      ]
    },
    {
      name: "Food",
      products: [
        { name: "Ham" },
        { name: "Bread" }
      ]
    }
  ],
  detailInit: function(e) {
      // get data
      datasource.fetch(function () {
          var data = this.data();

          // compose your content and write it to the detail cell
          e.detailCell.html("this is my content: " + data.length);
      });
  }
});

You can also use a detailTemplate for the non-dynamic parts of your detail content, or templates for each data item.