RadGrid Client Side Binding and Hierarchy

[Josh]

Hi,

I need to perform radgrid client side binding with hierarchy.  Right now I am using NestedViewTemplate but I am having problem implementing a custom expand collapse button.

What I need is to have 2 sub grids on the same level, basically a 2 level hierarchical grid, but with their individual expand/collapse buttons (therefore a total of 3 expand collapse buttons including the parent).

--> parent

--> child a

--> child b

where --> denotes the expand/collapse image.

Please advice.

Cheers,

Josh

[Shinu]

Hi Josh,

Go through the following  demo link to get demo link to get details about the Hierarchical Grid with several tables at the same level.
Several tables at a level

You can add expand/collapse column at the desired position as shown below.

 <DetailTables>
                       <telerik:GridTableView runat="server"  Name="Detail2" DataSourceID="SqlDataSource1" >
                     <Columns>

                    <telerik:GridExpandColumn></telerik:GridExpandColumn>
  <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"
                        UniqueName="FirstName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"
                        UniqueName="LastName">
                    </telerik:GridBoundColumn>

                     </Columns>

                   </telerik:GridTableView>
                      </DetailTables>

Thanks
Shinu

[Josh]

<ParentTableRelation>
 <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
</ParentTableRelation>

Is not working for me, that is why I am using the NestedViewTemplate instead of the Hierarchy(Details Table).  And how do I bind it on the client side using Details table?

When I define the GridRelationFields, there will be an Invalid operant "=" error when I load the page, which is why I used NestedViewTemplate instead.

Please advice.

[Josh]

I would like to add that the expand / collapse of the child will simply hide and show the sub grids (child table) as I have 2 sub grids....the parent expand and collapse button will show 2 "plus"s when initially expanded.  Probably having a first + beside a name childA and another beside childB

Collapsed:

+ parenta

+ parentb

Expanded:

- parenta

+ childa

+ childb

- parentb

+ childaa

+ childbb

Children expanded:

- parenta

- childa

| childaColA   | childaColB   | childaColC |

childaRowA

childaRowB

- childb

| childbColA   | childbColB |

childbRowA

Something like that

Cheers

[Nikolay Rusev]

Hello Josh,

You can find a project attached to this forum post which illustrates the functionality in question. Furthermore, review the following links from the online documentation:
Several tables at a level
Detail template

Best regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Josh]

I cannot achieve what I want after days of trying via client side binding.  Somehow I cannot use paging and grid is rendered on page load to a default of 10 rows each.  With every row, I have a RADDATEPICKER control which also slows things down by a lot. 100 records = 4mb = 7seconds to load on localhost.  I havent really looked at the attached file, but I do not really want to change much as I have written functionalities for it.

Right now, without wanting to change most of my code, I am still using the NestedViewTemplate method as so:

<MasterTableView DataKeyNames="visa_category_origin_id" HierarchyLoadMode="Client">

                        <NestedViewTemplate>

<img id="expandCollapse" onclick="javascript...">

<telerik:RadGrid id=......>

<img id="expandCollapse" onclick="javascript...">

<telerik:RadGrid id=B..>

</NestedViewTemplate>

</MasterTableView>

My question is, how do I bind the radgrid in the nestedviewtemplate from the server side?  As I am moving everything to the server side.  

This hierarchy is killing me, please advice, need it asap.  I have wasted too much time trying to bind via client side, moving everything now to server side.

Cheers,

Josh

[Josh]

I have just looked at the attached file,

basically I do not really understand these inside the subgrids

<asp:SqlDataSource ID="DetailsDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

                                    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"

                                    runat="server" >

                                    <SelectParameters>

                                       <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />

                                    </SelectParameters>

                                </asp:SqlDataSource>

                                <asp:DetailsView ID="DetailsView1" AllowPaging="true" GridLines="None" Width="100%" DataSourceID="DetailsDataSource"

                                    runat="server">

                                </asp:DetailsView>

I need to do something similar, but on the client side, as I do not have a datasource, just a table.

Cheers,

Josh

[Vlad]

Hello Josh,

Please check these links for more info:
http://blogs.telerik.com/VladimirEnchev/Posts/08-09-09/How_To_Telerik_RadGrid_Master_Detail_client-side_data-binding_using_LINQ_to_SQL_and_WebService.aspx
http://www.telerik.com/community/forums/thread/b311D-bgkggt.aspx

Greetings,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.