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

Griditems depending on selection in other grid

2 Answers 34 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gregor
Top achievements
Rank 1
Gregor asked on 05 Dec 2013, 08:34 AM
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

2 Answers, 1 is accepted

Sort by
0
Gregor
Top achievements
Rank 1
answered on 06 Dec 2013, 06:25 AM
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 }
    }
0
Accepted
Vladimir Iliev
Telerik team
answered on 06 Dec 2013, 01:55 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Gregor
Top achievements
Rank 1
Answers by
Gregor
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or