Hierarchical GridView column alignment

6 posts, 0 answers
  1. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 16 Dec 2014 Link to this post

    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
  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 17 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 17 Dec 2014 Link to this post

    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>

  5. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 18 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Wayne
    Wayne avatar
    3 posts
    Member since:
    Jan 2012

    Posted 17 Aug Link to this post

    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.

  7. Stefan X1
    Admin
    Stefan X1 avatar
    514 posts

    Posted 22 Aug Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready