Hierarchical data representation

[Faizal Rub]

I am evaluating telerik silverlight controls for one of my clients and got following question.

Specific requirement here is to represent multi-level hierarchical data in a grid.  When user expands a specific row, child records should be retrieved on demand. The child records can have additional levels of nested hierarchy. The row level expand icon should be only enabled when there is any child rows.

Is it possible to fulfill the above requirement using the telerik silverlight gridview?  If yes, would you be able to provide some sample code on this?  Do you recommend using other controls like treeview list to achieve the same results?

You help is very much appreciated.  
Thanks

[Vlad]

Hello,

Indeed we support multilevel hierarchy, load child data on demand and you can define also which row will be expandable. To know more about these you can check following links:

Custom Hierarchy: http://demos.telerik.com/silverlight/#GridView/Hierarchy/CustomHierarchy
Multilevel hierarchy on demand with RIA services: http://blogs.telerik.com/vladimirenchev/posts/09-10-16/how_to_silverlight_grid_hierarchy_load_on_demand_using_mvvm_and_ria_services.aspx

Regards,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[naina]

I am using the latest version of Radgrid view  I have
Specific requirement here is to represent multi-level hierarchical data in a grid.  When user expands a specific row, child records should be retrieved on demand. The child records can have additional levels of nested hierarchy. The child records is connected to parent record based on ExceptionID. I am using WCF for databound.
I have attached the sample code the parent grid is populating OK but the detail grid is coming blank.
 would you be able to provide some sample code on this? 

<grid:RadGridView Grid.Row="1" Margin="0,0,0,1" x:Name="RadGridView1"  RowLoaded="RadGridView1_RowLoaded" RowIndicatorVisibility="Collapsed" IsReadOnly="True"
                    AutoGenerateColumns="False"  controls:StyleManager.Theme="Office_Blue" CanUserFreezeColumns="False"
                      Width="950">
                    <grid:RadGridView.Columns>
                        <grid:GridViewToggleRowDetailsColumn CellStyle="{StaticResource StretchedCellStyle}" />
                        <grid:GridViewDataColumn Header="ExceptionID" DataMemberBinding="{Binding ExceptionID}" />
                        <grid:GridViewDataColumn Header="Date Created" DataMemberBinding="{Binding CreatedDate}" />
                        <grid:GridViewDataColumn Header="Machine Name" DataMemberBinding="{Binding MachineName}" />
                    </grid:RadGridView.Columns>
                    <grid:RadGridView.RowDetailsTemplate>
                        <DataTemplate>
                            <StackPanel Background="#FF525252">
                                <StackPanel.Resources>
                                    <LinearGradientBrush  x:Key="OfficeBlackBackGround" EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF343639" Offset="1"/>
                                        <GradientStop Color="#FF373737" Offset="0"/>
                                        <GradientStop Color="#FF3A3B3D" Offset="0.15"/>
                                    </LinearGradientBrush>
                                    <LinearGradientBrush x:Key="OfficeBlackFrame" EndPoint="0.491356224416577,0.974451988955925" StartPoint="0.777113682471078,-0.027352265088688">
                                        <GradientStop Color="#FF7D7D7D" Offset="0.032501"/>
                                        <GradientStop Color="#FF4D4D4D" Offset="0.036112000000000033"/>
                                        <GradientStop Color="#FF656565" Offset="0.065002"/>
                                        <GradientStop Color="#FF454545" Offset="0.068613000000000035"/>
                                        <GradientStop Color="#FF353535" Offset="0.72841"/>
                                        <GradientStop Color="#FF050505" Offset="0.987361"/>
                                        <GradientStop Color="#FF9F9F9F" Offset="0.54500001668930054"/>
                                        <GradientStop Color="#FF454545" Offset="0.381"/>
                                        <GradientStop Color="#FF1C1C1C" Offset="0.66"/>
                                    </LinearGradientBrush>
                                    <LinearGradientBrush x:Key="GridViewBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF474747" Offset="1"/>
                                        <GradientStop Color="#FF242424" Offset="0"/>
                                        <GradientStop Color="#FF3F3F3F" Offset="0.15"/>
                                        <GradientStop Color="#FF121212" Offset="0.152"/>
                                    </LinearGradientBrush>

                                </StackPanel.Resources>
                                <Grid Margin="0,0,0,0" Background="#FF525252" >
                                    <grid:RadGridView   Height="300" RowIndicatorVisibility="Collapsed" AutoGenerateColumns="False" 
                                                            
                CanUserFreezeColumns="False"
                ShowGroupPanel="False"
                Margin="0"
                Width="870"
                Background="#FF525252">

                                        <grid:RadGridView.Resources>
                                            <Style x:Key="GridViewToggleButtonColumnStyle" TargetType="gridView:GridViewCell">
                                                <Setter Property="Padding" Value="0,0,0,0" />
                                            </Style>
                                        </grid:RadGridView.Resources>
                                        <grid:RadGridView.Columns>
                                            <grid:GridViewDataColumn Header="ExceptionID" DataMemberBinding="{Binding ExceptionID}" />
                                            <grid:GridViewDataColumn Header="UnitPrice" DataMemberBinding="{Binding MachineName}"  />
                                            <grid:GridViewDataColumn Header="Quantity" DataMemberBinding="{Binding Type}" />
                                            <grid:GridViewDataColumn Header="Discount" DataMemberBinding="{Binding TargetSite}"/>
                                            <grid:GridViewDataColumn Header="Source" DataMemberBinding="{Binding Source}" />
                                            <grid:GridViewDataColumn Header="Message" DataMemberBinding="{Binding Message}" />
                                            <grid:GridViewDataColumn Header="ExceptionText" DataMemberBinding="{Binding ExceptionText}" />
                                            <grid:GridViewDataColumn Header="CreatedDate" DataMemberBinding="{Binding CreatedDate}" />
                                        </grid:RadGridView.Columns>
                                    </grid:RadGridView>
                                </Grid>

                            </StackPanel>

                        </DataTemplate>
                    </grid:RadGridView.RowDetailsTemplate>

                </grid:RadGridView>

[Vlad]

Hi,

It is not clear how the child grid is bound in your case?

Kind regards,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[naina]

When user will click on expand button it should show all the exception for that exceptionID. Below is the how grid should look like.

 

	2b0bba3d-ff29-4e6f-8766-530d22667b61	11/18/2009
	ExceptionID Created Date  Message MachineName Type Source 2b0bba3d-ff29-4e6f-8766-530d22667b61 11/18/2009 4:31:14 PM RecoveryFaxProcess - process failed MHCALBK2DBTV01 ApplicationBusinessException eFaxLoggerSrv 2b0bba3d-ff29-4e6f-8766-530d22667b61 11/18/2009 4:31:14 PM The request failed with HTTP status 401: Unauthorized. MHCALBK2DBTV01 System.Net.WebException System.Web.Services
	407c354a-56ca-4bf3-ac90-688d06af23e6	11/18/2009
	51a0c6a0-a379-4f0f-aca0-28ae542cd19b	11/18/2009
	5aca738e-7509-4386-8a05-d02c8bf098ad	11/18/2009
	5c0c8d66-2b09-4e70-af78-270897a5b748	11/18/2009

 

[Vlad]

Hello,

I'm still not sure how and when child grid ItemsSource is assigned - can you clarify?

Kind regards,
Vlad
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[naina]

Can we bind parent and child both grid with different data sources.

 parent grid  source
ObservableCollection<ExceptionCs> ExceptionCollection;

 

 

Child grid source
ObservableCollection<ExceptionDetail> ExceptionDetailCollection;

 

[Vlad]

Hi naina,

Indeed you can bind parent and child with different data sources - just add an empty child table definition and use HierarchyChildTemplate to define your own child table bound to desired source.

Regards,
Vlad
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[naina]

I have tried this example, child table is not biniding. please see below

 

 

<telerik:RadGridView x:Name="RadGridView1" CanUserFreezeColumns="False" IsReadOnly="True" AutoGenerateColumns="False">

 

 

 

<telerik:RadGridView.ChildTableDefinitions>

 

 

 

<telerik:GridViewTableDefinition />

 

 

 

</telerik:RadGridView.ChildTableDefinitions>

 

 

 

<telerik:RadGridView.Columns>

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding ExceptionID}" Header="ExceptionID" />

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding MachineName}" Header="Machine Name" />

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding CreatedDate}" Header="CreatedDate" />

 

 

 

 

</telerik:RadGridView.Columns>

 

 

 

<telerik:RadGridView.HierarchyChildTemplate>

 

 

 

<DataTemplate>

 

 

 

<telerik:RadGridView x:Name="RadGridView2" CanUserFreezeColumns="False" AutoGenerateColumns="False" ShowGroupPanel="False" IsReadOnly="True">

 

 

 

<telerik:RadGridView.Columns>

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding ExceptionID}" Header="ExceptionID" />

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding TargetSite}" Header="TargetSite" />

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding ExceptionText}" Header="ExceptionText" />

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding Message}" Header="Message" />

 

 

 

</telerik:RadGridView.Columns>

 

 

 

</telerik:RadGridView>

 

 

 

</DataTemplate>

 

 

 

</telerik:RadGridView.HierarchyChildTemplate>

 

 

 

</telerik:RadGridView>

 

Code behind file

ObservableCollection

 

<ExceptionCs> ExceptionCollection;

 

 

ObservableCollection<ExceptionDetail> ExceptionDetailCollection;

 

 

public TestTemplate()

 

{

InitializeComponent();

BindGrid(

"eFaxLoggerSrv");

 

}

 

void BindGrid(string Source)

 

{

 

AdminManagerClient rd = new AdminManagerClient();

 

rd.GetExceptionCompleted +=

new EventHandler<GetExceptionCompletedEventArgs>(rd_GetExceptionCompleted);

 

rd.GetExceptionAsync(Source);

rd.GetExceptionLogDetailCompleted +=

new EventHandler<GetExceptionLogDetailCompletedEventArgs>(rd_GetExceptionLogDetailCompleted);

 

rd.GetExceptionLogDetailAsync();

}

 

public void rd_GetExceptionCompleted(object sender, GetExceptionCompletedEventArgs e)

 

{

ExceptionCollection = e.Result;

RadGridView1.ItemsSource = ExceptionCollection;

 

}

 

public void rd_GetExceptionLogDetailCompleted(object sender, GetExceptionLogDetailCompletedEventArgs e)

 

{

ExceptionDetailCollection = e.Result;

this will be source for Child table...
//RadGridView1.ItemsSource = ExceptionDetailCollection;

 

 

}

[Vlad]

Hello,

ItemsSource property for your child table is never assigned.

Regards,
Vlad
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[naina]

can you please give me example how to bind item source for child table in code behind.

[Vlad]

Hi naina,

You can easily achieve this using pure MVVM similar to my demo here:
http://blogs.telerik.com/vladimirenchev/posts/09-10-16/how_to_silverlight_grid_hierarchy_load_on_demand_using_mvvm_and_ria_services.aspx

Greetings,
Vlad
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[naina]

I am  creating the hierarchy grid on demand. The issue when I am looping thru the child grid  on button click event not getting all the values selected using checkbox.

Another issue is when the header checkbox is selected all the inner checkbox in child grid should get selected automatically or vice- versa.

please help...

 

 

<grid:RadGridView x:Name="TemplateGrid" AutoGenerateColumns="False" controls:StyleManager.Theme="Office_Blue"

 

 

ScrollViewer.HorizontalScrollBarVisibility="Auto" RowLoaded="TemplateGrid_RowLoaded"

 

 

Margin="10,0,0,0" >

 

 

 

<grid:RadGridView.Columns>

 

 

 

<grid:GridViewDataColumn Header="Select" DataMemberBinding="{Binding PayToProviderID}" UniqueName="TopSelect" >

 

 

 

<grid:GridViewDataColumn.CellTemplate>

 

 

 

<DataTemplate>

 

 

 

<CheckBox x:Name="ChkSelect" HorizontalAlignment="Left" VerticalAlignment="Center"

 

 

DataContext ="{Binding PayToProviderID}" Click="ChkSelect_Click" IsEnabled="False" ></CheckBox>

 

 

 

</DataTemplate>

 

 

 

</grid:GridViewDataColumn.CellTemplate>

 

 

 

</grid:GridViewDataColumn>

 

 

 

<grid:GridViewDataColumn Header ="PayToProviderID" DataMemberBinding="{Binding PayToProviderID}" IsReadOnly="True" />

 

 

 

<grid:GridViewDataColumn Header="Provider Name" DataMemberBinding="{Binding ProviderName}" IsReadOnly="True" />

 

 

 

<grid:GridViewDataColumn Header="Provider Address" DataMemberBinding="{Binding ProviderAddress}" IsReadOnly="True"/>

 

 

 

<grid:GridViewDataColumn Header="Template Name" DataMemberBinding="{Binding TemplateName}" IsReadOnly="True" />

 

 

 

<grid:GridViewDataColumn Header="Status" DataMemberBinding="{Binding Status}" IsReadOnly="True" />

 

 

 

</grid:RadGridView.Columns>

 

 

 

<grid:RadGridView.HierarchyChildTemplate>

 

 

 

<DataTemplate>

 

 

 

<grid:RadGridView x:Name="TemplateDetailGrid" DataContext="{x:Null}" ShowGroupPanel="False"

 

 

Loaded="TemplateDetailGrid_Loaded" RowLoaded="TemplateDetailGrid_RowLoaded" AutoGenerateColumns="False" ScrollViewer.HorizontalScrollBarVisibility="Auto" >

 

 

 

<grid:RadGridView.Columns>

 

 

 

<grid:GridViewDataColumn DataMemberBinding="{Binding LetterClaimID}" Header="Delete">

 

 

 

<grid:GridViewDataColumn.CellTemplate>

 

 

 

<DataTemplate>

 

 

 

<Image Source="../../Images/Delete.png" Height="25" DataContext="{Binding LetterClaimID}" Width="25"

 

 

MouseLeftButtonDown="Image_MouseLeftButtonDown" HorizontalAlignment="Left" ></Image>

 

 

 

</DataTemplate>

 

 

 

</grid:GridViewDataColumn.CellTemplate>

 

 

 

</grid:GridViewDataColumn>

 

 

 

<grid:GridViewDataColumn DataMemberBinding="{Binding PayToProviderID}" Header="Select" UniqueName="SelectChk">

 

 

 

 

<grid:GridViewDataColumn.CellTemplate>

 

 

 

<DataTemplate>

 

 

 

<CheckBox x:Name="ChkInnerselect" DataContext="{Binding PayToProviderID}" Click="ChkInnerselect_Click" />

 

 

 

</DataTemplate>

 

 

 

</grid:GridViewDataColumn.CellTemplate>

 

 

 

</grid:GridViewDataColumn>

 

 

 

<grid:GridViewDataColumn Header="ClaimId" DataMemberBinding="{Binding ClaimId}" IsReadOnly="True" />

 

 

 

<grid:GridViewDataColumn Header="PatientFullName" DataMemberBinding="{Binding PatientFullName}" IsReadOnly="True" />

 

 

 

<grid:GridViewDataColumn Header="ClaimStartDate" DataMemberBinding="{Binding ClaimStartDate}" IsReadOnly="True" />

 

 

 

<grid:GridViewDataColumn Header="ClaimEndDate" DataMemberBinding="{Binding ClaimEndDate}" IsReadOnly="True"/>

 

 

 

<grid:GridViewDataColumn Header="BilledAmount" DataMemberBinding="{Binding BilledAmount}" IsReadOnly="True"/>

 

 

 

<grid:GridViewDataColumn Header="PaidAmount" DataMemberBinding="{Binding PaidAmount}" IsReadOnly="True" />

 

 

 

<grid:GridViewDataColumn Header="OverPaymentReason" DataMemberBinding="{Binding OverPaymentReason}" IsReadOnly="True" />

 

 

 

</grid:RadGridView.Columns>

 

 

 

</grid:RadGridView>

 

 

 

</DataTemplate>

 

 

 

</grid:RadGridView.HierarchyChildTemplate>

 

 

 

</grid:RadGridView>

 

 

private void TemplateDetailGrid_Loaded(object sender, RoutedEventArgs e)

 

{

TemplateDetailGrid = (

RadGridView)sender;

 

 

LetterTemplate Letter = (LetterTemplate)TemplateDetailGrid.ParentRow.DataContext;

 

Letter.StateId = 2;

Letter.ClaimId = txtClaimID.Text ==

"" ? null : txtClaimID.Text.ToString();

 

Letter.ClaimSpecialistName = txtUserName.Text ==

"" ? null : txtUserName.Text.ToString();

 

BeginOrdersRequest(Letter);

 

}

 

 

 

private void BeginOrdersRequest(LetterTemplate Letter)

 

{

 

AdminManagerClient LetterAdmin = new AdminManagerClient();

 

LetterAdmin.GetLetterClaimDetailInfoCompleted +=

new EventHandler<GetLetterClaimDetailInfoCompletedEventArgs>(LetterAdmin_GetLetterClaimDetailInfoCompleted);

 

LetterAdmin.GetLetterClaimDetailInfoAsync(Letter);

}

 

public void LetterAdmin_GetLetterClaimDetailInfoCompleted(object sender, GetLetterClaimDetailInfoCompletedEventArgs e)

 

{

DeatilCollection = e.Result;