This is a migrated thread and some comments may be shown as answers.

Hierarchical data representation

12 Answers 170 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Faizal Rub
Top achievements
Rank 1
Faizal Rub asked on 12 Nov 2009, 08:13 PM
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

12 Answers, 1 is accepted

Sort by
0
Vlad
Telerik team
answered on 13 Nov 2009, 06:42 AM
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.
0
naina
Top achievements
Rank 1
answered on 02 Feb 2010, 01:05 AM
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>

0
Vlad
Telerik team
answered on 02 Feb 2010, 07:07 AM
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.
0
naina
Top achievements
Rank 1
answered on 02 Feb 2010, 06:27 PM

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

 

0
Vlad
Telerik team
answered on 05 Feb 2010, 03:22 PM
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.
0
naina
Top achievements
Rank 1
answered on 10 Feb 2010, 09:58 PM

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

 parent grid  source
ObservableCollection<ExceptionCs> ExceptionCollection;

 

 

Child grid source
ObservableCollection
<ExceptionDetail> ExceptionDetailCollection;

 

0
Vlad
Telerik team
answered on 11 Feb 2010, 06:47 AM
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.
0
naina
Top achievements
Rank 1
answered on 11 Feb 2010, 05:50 PM

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;

 

 

}




0
Vlad
Telerik team
answered on 12 Feb 2010, 07:01 AM
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.
0
naina
Top achievements
Rank 1
answered on 12 Feb 2010, 05:40 PM
can you please give me example how to bind item source for child table in code behind.
0
Vlad
Telerik team
answered on 15 Feb 2010, 07:10 AM
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.
0
naina
Top achievements
Rank 1
answered on 19 Mar 2010, 01:30 AM
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;

Tags
GridView
Asked by
Faizal Rub
Top achievements
Rank 1
Answers by
Vlad
Telerik team
naina
Top achievements
Rank 1
Share this question
or