Hierarchical GridView column alignment

[Ram]

Hi,

I am trying to create a hierarchical grid with both parent and child have the extra same number of columns. I would like to align the columns of the child grid with the parent grid when expanded. Is there a way to customize?

Thanks

[Dimitrina]

Hello,

You can try binding the column's Width of the GridView defined in HierarchyChildTemplate to the Width of the corresponding columns in the parent GridView.
Basically you can expose properties in your ViewModel to hold the Width of each column. Then use those properties to set values for the hierarchical column's Width. Please note that the bound property should be of type GridViewLength.

Hopefully, this helps.

Regards,
Dimitrina
Telerik

 

 

[Ram]

Could you provide a working sample? I could not get it work.

1) The column widths of both parent and child need to align
2) Resizing a parent column should also resize the child column
3) By selecting a parent checkbox should "select all" in the child gridview
4) Remove the background border color from the child gridview when a parent is expanded

View Model code -

public GridViewLength Field1Width
{
get
{
return 200;
}
}

public GridViewLength Field2Width
{
get
{
return 300;
}
}

XAML code -



                <telerik:RadGridView ItemsSource="{Binding NestedDataCollection}"
AutoGenerateColumns="False"
IsReadOnly="True"

                                     SelectionMode="Multiple"

                                     RowIndicatorVisibility="Collapsed" ShowGroupPanel="False">

 

                    <telerik:RadGridView.Columns>

                        <telerik:GridViewSelectColumn />

                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Field1}" Header="Field1" Width="{Binding Field1Width}" />

                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Field2}" Header="Field2" Width="{Binding Field2Width}" />

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

                    </telerik:RadGridView.Columns>

 

                    <telerik:RadGridView.ChildTableDefinitions>

                        <telerik:GridViewTableDefinition />

                    </telerik:RadGridView.ChildTableDefinitions>

 

                    <telerik:RadGridView.HierarchyChildTemplate>

                        <DataTemplate>

                            <telerik:RadGridView ItemsSource="{Binding Details}" AutoGenerateColumns="False"
IsReadOnly="True"

                                               
 SelectionMode="Multiple"
ShowColumnHeaders="False"
Margin="18
0 0 0"

                                               
 RowIndicatorVisibility="Collapsed" ShowGroupPanel="False">

                                <telerik:RadGridView.Columns>

                                    <telerik:GridViewSelectColumn />

                                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Field1}" Header="Field1" Width="{Binding Field1Width}" />

                                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Field2}" Header="Field2" Width="{Binding Field2Width}"  />

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

                                </telerik:RadGridView.Columns>

                            </telerik:RadGridView>

                        </DataTemplate>

                    </telerik:RadGridView.HierarchyChildTemplate>

 

                </telerik:RadGridView>

[Dimitrina]

Hi,

I prepared a sample project based on your requirements 1., 2. and 4. You can find it attached.
Generally, I would recommend you considering the Row Details option to define hierarchy data. Please note I am using RowDetails instead of hierarchy in the sample, however, the approach with hierarchy would be the same. 
As to point 3., we do not have such a particular example. I will investigate the case further and reply in the other ticket you opened on the same topic. 

Regards,
Dimitrina
Telerik

 

 

[Wayne]

I know this post is old, but is there a way to do this with out adding a property? I have over 50 columns that I would like to sync the widths and adding 50 properties is a lot of clutter in the VM.

[Stefan]

Hi Wayne,

I am afraid that the approach demonstrated by my colleague is the only solution we can offer for this requirement. Note, that you can reuse a given property for several columns, so that there is no need to define as much properties, as the count of the columns.

All the best,
Stefan X1
Telerik by Progress