[Solved] Select rows in Child from Parent table in RadGrid

[Debbie]

I have a rad grid with a parent (master) and child (detail table).  Both tables have a row selector (checkbox). What I need to be able to do is if the Parent row is selected, I need to update via JavaScript the child rows for that parent as selected (and have the selector checkbox be disabled). And if they de-select the parent row this will un-check the child rows and enable the row selection (checkbox) in the child table.

Any help is appreciated.

Thanks!
-- Debbie


Here's a sample of the grid I have....

<telerik:RadGrid runat="server" ID="gridSample"                 Width="100%" AllowMultiRowSelection="true" >
                <ClientSettings EnableRowHoverStyle="False">
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                </ClientSettings>
                <MasterTableView TableLayout="Fixed" DataKeyNames="AccountId" Name="Recipients"                    GridLines="Horizontal" Frame="Box" HierarchyLoadMode="Client" AutoGenerateColumns="false">
                    <NoRecordsTemplate>
                        No Unsubmitted items for this customer.
                    </NoRecordsTemplate>
                    <DetailTables>
                        <telerik:GridTableView runat="server" ShowFooter="false" AllowSorting="false" Name="OrderItems"
                            BorderWidth="1" GridLines="Horizontal" AutoGenerateColumns="false" Width="100%"
                            DataKeyNames="Id">

                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="AccountId" MasterKeyField="AccountId" />
                            </ParentTableRelation>
                            <ExpandCollapseColumn HeaderStyle-Width="20px" />
                            <Columns>
                                <telerik:GridClientSelectColumn HeaderStyle-Width="30/>
                                <telerik:GridBoundColumn HeaderText="Product Name" DataField="ProductName" HeaderStyle-Width="300" />
                            </Columns>
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                        <telerik:GridClientSelectColumn />
                        <telerik:GridTemplateColumn UniqueName="colAccountName" HeaderText="Name">
                            <ItemTemplate>
                                <asp:HyperLink runat="server" id="linkAccount" />
                            </ItemTemplate>
                            <HeaderStyle Width="150px" HorizontalAlign="Left" />
                        </telerik:GridTemplateColumn>

                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

[Princy]

Hello Debbie,

Try out the following code to select/unselect the child rows when the parent row is selected/unselected :
aspx:

<telerik:RadGrid ID="RadGrid1" AllowMultiRowSelection="true"   DataSourceID="SqlDataSource1" runat="server" OnItemDataBound="RadGrid1_ItemDataBound">
        <MasterTableView HierarchyLoadMode="Client" Name="Master" DataSourceID="SqlDataSource1 >
        <DetailTables>
        <telerik:GridTableView Name="Detail" DataSourceID="SqlDataSource1" runat="server">

Note that you have to set AllowMultiRowSelection to true and HierarchyLoadMode to Client for the grid

c#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem && e.Item.OwnerTableView.Name == "Master")
        {
            GridDataItem item = (GridDataItem)e.Item;
            CheckBox check = (CheckBox)item["SelectColumn"].Controls[0];
            check.Attributes.Add("onclick", "CheckChanged(this,'" + item.ItemIndex + "');");
        }
    }

js:

function CheckChanged(checkbox,rowindex)
    {
         var grid = $find("<%=RadGrid1.ClientID %>");
         var MasterTable = grid.get_masterTableView();
         var Row = MasterTable.get_dataItems()[rowindex];
         if(Row._expanded == false){Row.set_expanded("true");  }
         var childRows = Row.get_nestedViews()[0].get_dataItems();
         for (var i = 0; i < childRows.length; i++)
           {
            if(checkbox.checked==true)
            {
                 var row = childRows[i];
                 row.set_selected("true");
            }
            else
            {
                 var row = childRows[i];
                 row.set_selected("false");
            }

           }
   }

Thanks
Princy.

[Debbie]

Princy,

I appreciate your responding to my inquiry.  I'm having problems with the sample javascript.  I do have AllowMultiRowSelection to true and HierarchyLoadMode to Client for the grid.

I've updated the C# ItemDataBound even to add the onclick attribute to the checkbox to call the Javascript function.

This line causes an error:

var

 

childRows = Row.get_nestedViews()[0].get_dataItems();
Error:
object doesn't support this property of method

What else am I missing?

Thanks.

- Debbie

 

[Princy]

Hello Debbie,

I suppose you are using an older version of the Radgrid for Asp.Net Ajax control.  I could replicate the same error when i used an older version but then I upgrade to a later version (2009.02.0701.20) So if you are using an older version then you may have to upgrade to the later versions inorder to use this property. This Kb article should guide you in case you want to upgrade to a later version.


Thanks
Princy.

[Shaindy]

How would I do this if I am using a nestedviewtemplate instead of detailstables?

[Raji]

Hi,

I was able get this work with 2 levels. This is my senerio. I have a grid and couple of detailtables(nested). When I select the top checkbox, all the rows in the details tables belonging to the parent row selected should be checked.

Any help will be appreciated.

Thanks,
Raji

[Eyup]

Hi Raji,

Generally, you can traverse the grid items on a given event or using your custom method either on the client or on the server:
http://www.telerik.com/help/aspnet-ajax/grid-traversing-detail-tables-items-in-grid.html

I hope this helps. If you have different requirements or further instructions, please elaborate on your specific scenario.

All the best,
Eyup
the Telerik team