Hierarchical Grids Without Lazy Loading

[Attila]


I would like to load hierarchical data and all examples that I have seen use a "lazy loading" approach. However, the amount of data that I'm loading isn't that big, so I'd like to load everything at once. Is it possible to load all of this data at once, with the detail data already being expanded? Do I need to use the detailInit function, or is there another way to achieve this?

In my specific example, I am loading events (top level) and each event has one of more items. (See the sample JSON below.) 

Events:

[{

    EventId: 1,

    Items:

        [{

    Vendor: "Company X",

    ItemName: "Chips"

        },

    {

    Vendor: " Company X ",

    ItemName: "Salsa"

        }]

    },

    {

    EventId: 2,

    Items:

   [

    {

    Vendor: " Company X ",

    ItemName: "Chips"

        },

    {

    Vendor: " Company X",

    ItemName: "Salsa"

        }]

}}

[Petur Subev]

Hello Attila,

Yes it is possible to load the child Grid with data without declaring additional dataSource objects which uses remote transport.
You can pass the collection of items from the master record as data to the dataSource of the detail Grid.

However there is one very important limitation - you can only display information you cannot make the Grids editable using this approach.

Basically to implement such behavior you will have to cover several points:

1. set the detail grid with autoBind option set to false
2. set server operations like sorting/filtering etc to false (they are by default)
3. use the detailInit event of the master grid

<script type="text/javascript">
    function initChildGrid(e) {
        var detailGrid = e.detailCell.find('>.k-grid').data().kendoGrid;
        var dataItem = e.data;
        detailGrid.dataSource.data(dataItem.Projects); //where projects is the collection from the master Grid which holds the records for the child grid
    }
</script>

I hope this helps, give a try and let me know your findings or if you struggle at some point.


I hope you got the idea.

Kind regards,
Petur Subev
the Telerik team

[Russell]

Can you post a sample that does this?  I am getting an error "Cannot set AutoBind if widget is populated during initialization" in my detail table.

<script type="text/javascript">
    function initChildGrid(e) {
        var detailGrid = e.detailCell.find('>.k-grid').data().kendoGrid;
        var dataItem = e.data;
        detailGrid.dataSource.data(dataItem.LineItems); //where projects is the collection from the master Grid which holds the records for the child grid
    }
</script>

<script id="lineItemsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ILineItem>()
    .AutoBind(false)
    .Name("Group")
    .Columns(columns => columns.Bound(i => i.Description))
    )
</script>

@(Html.Kendo().Grid(Model.Groups) // Bind the grid to the Model property of the view
      .Name("Grid")
      .Events(e => e.DetailInit("initChildGrid"))
      .Columns(columns =>
              {
                  columns.Bound(p => p.DebtType).Template(o =>
                                                              {
                                                                  var t = o.DebtType;
                                                                  if (o.TaxType != null)
                                                                      t = t + " - " + o.TaxType;
                                                                  return t;
                                                              });
                  columns.Bound(p => p.Amount).Format("{0:C0}").HtmlAttributes(attributes: new Dictionary<string, object>
                                                                                               {
                                                                                                   {"style", "text-align:right"}
                                                                                               });
                  columns.Bound(p => p.NetDebtAmount).Template(o => (o.NetDebtAmount ?? 0).ToString("C0")).HtmlAttributes(attributes: new Dictionary<string, object>
                                                                                                                                          {
                                                                                                                                              {"style", "text-align:right"}
                                                                                                                                          });
              })
     .ClientDetailTemplateId("lineItemsTemplate")
)

[Petur Subev]

Hello Attila,

Check the attached project. I hope it helps.

Kind regards,
Petur Subev
the Telerik team