[Solved] Traversing nested tables on the client

[Andreja Zitnik]

Hi,

I have a RadGrid with a Master table (imagine that ;) ) and two levels of nested tables, so there are three levels in all. Each of the three tables has a GridTemplateColumn with asp:checkBox and some other stuff. When user checks the checkbox in Master table I would like to check the checkboxes of all its children (both levels).

I think the best way to go about it would be to get the GridDataItem in which the clicked checkbox resides, and then use get_nestedViews to get access to children etc. The only problem is I don't know how to get the GridDataItem in the first place.

Thank you for your help,
Andreja

[Princy]

Hello Andreja,

The Following code snippet will be useful for you in achieving this.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource3" OnItemCreated="RadGrid1_ItemCreated1">
    <MasterTableView Name="Master" runat="server" DataKeyNames="OrderID" DataSourceID="SqlDataSource3"
        HierarchyLoadMode="Client">
        <Columns>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <DetailTables>
            <telerik:GridTableView runat="server" DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID"
                HierarchyLoadMode="Client">
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="EmployeeID" MasterKeyField="EmployeeID" />
                </ParentTableRelation>
                <Columns>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBox2" runat="server" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
                <DetailTables>
                    <telerik:GridTableView runat="server" DataSourceID="SqlDataSource2" DataKeyNames="EmployeeID">
                        <ParentTableRelation>
                            <telerik:GridRelationFields MasterKeyField="EmployeeID" DetailKeyField="EmployeeID" />
                        </ParentTableRelation>
                        <Columns>
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <asp:CheckBox ID="CheckBox3" runat="server" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>
            </telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_ItemCreated1(object sender, GridItemEventArgs e)
   {
    if (e.Item is GridDataItem && e.Item.OwnerTableView.Name == "Master")
    {
     GridDataItem item = (GridDataItem)e.Item;
     CheckBox chk = (CheckBox)item.FindControl("CheckBox1");
     chk.Attributes.Add("onclick", "ClientClick(this,'" + item.ItemIndex + "');");
    }
  }

Java Script:

<script type="text/javascript">
     function ClientClick(obj, index)
     {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[index];
        var detailView1 = row.get_nestedViews()[0];
        for (var i = 0; i < detailView1.get_dataItems().length; i++)
         {
            var checkBox2 = detailView1.get_dataItems()[i].findElement("CheckBox2");
            checkBox2.checked = obj.checked;
            for (var j = 0; j < detailView1.get_dataItems()[i].get_nestedViews()[0].get_dataItems().length; j++)
           {
                var checkBox3 = detailView1.get_dataItems()[i].get_nestedViews()[0].get_dataItems()[j].findElement("CheckBox3");
                checkBox3.checked = obj.checked;
            }
        }
    }
</script>

Thanks,
Princy.

[Andreja Zitnik]

Thank you Princy, this works great if I click a checkbox in a master table.
I didn't explain this in my question, but user should also be able to click checkbox on the second level and have all third-level checkboxes check accordingly. Do you know a way to do that as well? I tried passing in row's ClientID and changed JavaScript to use that to find correct row instead of index, but it doesn't seem to work.

Kind regards,
Andreja

[Princy]

Hello Andreja,

You need to pass the master tableview index and detailtablew item index in order to access corresponding innertableview from client side. A sample code is shown below.


ASPX:

<DetailTables>
   <telerik:GridTableView  name="GridTableView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID" HierarchyLoadMode="Client">
. . . . . . . . . . . .
</DetailTables>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
      if (e.Item is GridDataItem && e.Item.OwnerTableView.Name == "GridTableView1")
       {
           GridDataItem item = (GridDataItem)e.Item;
           GridTableView tableView = (GridTableView)item.NamingContainer;
           int masterIndex = (tableView.ParentItem as GridDataItem).ItemIndex;
           CheckBox chk = (CheckBox)item.FindControl("CheckBox2");
           chk.Attributes.Add("onclick", "ClientClick2(this,'" + item.ItemIndex + "','"+masterIndex+"');");
        }
  }

Java Script:

<script type="text/javascript">
      function ClientClick2(obj, index,masterIndex) {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[masterIndex];
        var detailView1_row = row.get_nestedViews()[0].get_dataItems()[index];
        for (var j = 0; j < detailView1_row.get_nestedViews()[0].get_dataItems().length; j++) {
            var checkBox3 = detailView1_row.get_nestedViews()[0].get_dataItems()[j].findElement("CheckBox3");
            checkBox3.checked = obj.checked;
        }
      }
</script>

Hope this helps,
Princy.

[Andreja Zitnik]

Thank you, it works like a charm :)

Kind regards,
Andreja

[Wbc]

In RadGrid, I want to access NestedViewTemplate Items. With in the NestedViewTemplate i have RadPageView, Inside the RadPageView i have Rad DatePicker, I want to Clear RadDatePicker in ClientSide [Java Script].Help me.
Thank in Advance.

[Angel Petrov]

Hello,

In order to achieve this you would have to call a JavaScript method(or intercept a client-side event) and using findControl obtain a reference to the picker and clear the value:

function SomeJavaScriptMethod(sender,args)
        {
            var picker = $telerik.findControl(document.body, "YourPickerID");
            picker.clear();
        }

All the best,
Angel Petrov
the Telerik team

[Wbc]

Thank you, It works fine for me.