Griditems depending on selection in other grid

[Gregor]

Hi!

I have two grids (A,B).
When I select an item in grid A, details should be displayed in grid B.

Grid A contains product groups like "furniture". There are around 300 groups display in grid A.
Grid B contains the actual products associted with this group (e.g chair, table, ...). There are 10-50 product in each group.
Im using the change event on grid A to get the selected row and will then reload the datasource for grid B.
Basically it works but I see all propertys of product in grid B. I've specified the columns I'd like to display. (please see attached screenshot).
1. What I'm doing wrong?
2. What is the appropriate way to do this? Note: I can't use "client detail templates" in grid A.

Here is my code:
Grid A:

@(Html.Kendo().Grid<LFG.Model.Domain.ArticleGroup>(Model.ArticleGroups)
                    .Name("groupsGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.ID);
                        columns.Bound(o => o.GroupKey);
                        columns.Bound(o => o.Description);
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Selectable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(LFG.Web.Constants.GridPageSize)
                        .Events(events => events.Error("grid_error_handler"))
                        .Model(model =>
                        {
                            model.Id(p => p.ID);
                        })
                        .ServerOperation(false)
                    )
                    .Events(e => e.Change("onRowSelect"))
                )

Grid B:

@(Html.Kendo().Grid<LFG.Model.Domain.Article>()
                    .Name("articlesGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.ID);
                        columns.Bound(o => o.Description);
                        columns.Bound(o => o.ProductLine);
                        columns.Bound(o => o.Age);
                        columns.Bound(o => o.Approval);
                        columns.Bound(o => o.Stockpile);
                        columns.Bound(o => o.Ordered);
                        columns.Bound(o => o.Certificate);
                        columns.Bound(o => o.ArtNr);
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Selectable()
                    .DataSource(dataSource => dataSource
                        .Server()
                        .PageSize(LFG.Web.Constants.GridPageSize)
                        .Model(model =>
                        {
                            model.Id(p => p.ID);
                        })
                    )
                )

Event:

function onRowSelect(e) {
        var row = this.select();
        var id = row[0].childNodes[0].textContent;
        console.log("RowSelect - ID: " + id);
        var grid = $("#articlesGrid");
        if (grid) {
            grid.kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/Shared/GetArticlesByGroup?id=" + id
                    }
                }
            });
            grid.data("kendoGrid").dataSource.read();
        }
    }

KR
Smart Software

[Gregor]

I could fix it now by myself.

I added a read action directly to grid B and get the current selected row from grid A by a JS helper (getProductGroup). Furthermore grid A invokes the read action of grid B during change event (onGroupSelect).
However, can someone from Telerik reply wheter or not there is a better (more concise, build in, ...)  solution and what was wrong with my original solution where is bound the new data to the grind in javascript. Thanks in advance!

.DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(LFG.Web.Constants.GridPageSize)
                        .Events(events => events.Error("grid_error_handler"))
                        .Model(model =>
                        {
                            model.Id(p => p.ID);
                        })
                        .Read(r => r.Action("_ArticlesByGroup_Read", "Shared").Data("getProductGroup"))
                        .ServerOperation(false))
                    .AutoBind(false)

var id = 0;
    function onGroupSelect(e) {
        var row = this.select();
        id = row[0].childNodes[0].textContent;
        console.log("GroupSelect - ID: " + id);
        var grid = $("#articlesGrid");
        if (grid) {
            grid.data("kendoGrid").dataSource.read();
        }
    }
    function getProductGroup() {
        return { id: id }
    }

[Vladimir Iliev]

Hi Christoph,

Basically your current approach is correct, however I would suggest slight change to the "Change" event handler of the parent Grid and "Data" function of the child Grid which will remove the need of using global variable:

• Child Grid DataSource configuration: 

  .AutoBind(false)
  .DataSource(source => source.Ajax()
      .Model(model =>
              {
                  model.Id(o => o.OrderID);
                  model.Field(o => o.OrderID).Editable(false);
              })
      .Read(read => read.Action("Read_Orders", "Orders").Data("sendAdditionalData"))
      .Update(update => update.Action("Update_Order", "Orders"))
      .Create(create => create.Action("Create_Order", "Orders").Data("sendAdditionalData"))
      .Destroy(destroy => destroy.Action("Destroy_Order", "Orders")))

• Change event handler: 

  function onChange(e) {
      var childGrid = $("#Orders").data("kendoGrid");
      childGrid.dataSource.read();
  }

• Data function of the child Grid: 

  function sendAdditionalData(e) {
      var parentGrid = $("#Employees").data("kendoGrid");
      var slectedModel = parentGrid.dataItem(parentGrid.select());
      return {
          id: slectedModel.id
      }
  }

Regards,
Vladimir Iliev
Telerik