This is a migrated thread and some comments may be shown as answers.

Hierarchical Grids Without Lazy Loading

3 Answers 280 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Attila
Top achievements
Rank 1
Attila asked on 11 Mar 2013, 08:38 PM

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"
        }]
}}

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 13 Mar 2013, 03:29 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Russell
Top achievements
Rank 1
answered on 19 Mar 2013, 05:49 PM
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")
)   

0
Petur Subev
Telerik team
answered on 20 Mar 2013, 10:48 AM
Hello Attila,

Check the attached project. I hope it helps.

Kind regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Attila
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Russell
Top achievements
Rank 1
Share this question
or