Binding 2 grids on selected column of parent

2 posts, 0 answers
  1. Weston
    Weston avatar
    1 posts
    Member since:
    Feb 2014

    Posted 05 Jul 2018 Link to this post

    I need to be able to filter my secondary grid down based on results selected in a cell in my parent grid. I am doing a summary grid that has numbers for past due, on time, etc. I want to be able to drive my second grid data based off of the cell I select in my parent grid.

    I am not finding any type of server side event for cell selection that I can use to drive the data changes. Is there an easy way to accomplish what I am needing to do?

  2.
  3. Tsvetomir
    Admin
    Tsvetomir avatar
    626 posts

    Posted 09 Jul 2018 Link to this post

    Hi Weston,

    In order to build a relation between two RadGrid controls based on selected cell in the parent grid you might opt for firstly setting the cell selection mode to single cell from the Client Settings and to set the EnablePostBackOnRowClick property to true as following:
    <ClientSettings EnablePostBackOnRowClick="true">
        <Selecting CellSelectionMode="SingleCell" />
    </ClientSettings>

    Secondly, the event OnSelectedCellChanged has to be added to the RadGrid control. In the code-behind the RadGrid control has a SelectedCells collection which holds the selected cells of type GridTableCell. This will allow you to obtain the value from the currently selected cell. Thus, depending on your specific scenario you have two options - you may access the cell value directly and the second one is to use the GetDataKeyValue method to extract the unique datakey ID of the corresponding row. These values can later be used to build the relation to the second RadGrid. Note that in order to use the second option, the property DataKeyNames in the MasterTableView tag has to be set accordingly:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows#accessing-raw-field-data-and-key-values

    Here is an actual sample:
    protected void RadGrid1_SelectedCellChanged(object sender, EventArgs e)
    {
        GridTableCell cell = RadGrid1.SelectedCells[0];
        string value = cell.Text;
        string dataKeyValue = (cell.NamingContainer as GridDataItem).GetDataKeyValue("OrderID").ToString();
    }

    <MasterTableView DataKeyNames="OrderID" . . . ></MasterTableView>

    Once you have the information from the selected cell you can use a parameter to achieve the scenario demonstrated in the Master/Detail Grids demo - establishing the relation between the two grids.

    Alternatively, you might choose to follow the example set in the sample project attached to my response which uses programmatic binding.

    Regards,
    Tsvetomir
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top