RowDetailsTemplate alternative in SfDataGrid

[Peter Verbo]

Hi,

is it possible to create something which will be working same way as RowDetailsTemplate is default wpf dataGrid control? Whenever user select row it will display another row under that with DataTemplate. Below is part of our current implementation for RowDetailsTemplate default DataGrid. Here is link to picture how it looks when second row is selected: https://imgur.com/a/I25gsyw

<DataGrid.RowDetailsTemplate>

                     <DataTemplate>

                     <Grid>

                     <Grid.RowDefinitions>

                     <RowDefinition/>

                     <RowDefinition/>

                     </Grid.RowDefinitions>

                     <Border Grid.RowSpan="2" Background="White" Opacity="0.4"/>

                     <Border Grid.Row="0" Grid.RowSpan="2" BorderThickness="0,0,1,0" BorderBrush="Black"/>

                     <TextBlock Grid.Row="0" Text="Comment:" Margin="5,2,5,2" FontSize="18" Foreground="Black"/>

                     <TextBlock Grid.Row="1"

                     Text="{Binding Comment}"

                     Visibility="{Binding Comment, Converter={StaticResource NullOrEmptyToVisibilityConverter}}"

                     Margin="5,2,5,2" Foreground="Black" FontSize="22"

                     TextWrapping="WrapWithOverflow"/>

                     </Grid>

                     </DataTemplate>

</DataGrid.RowDetailsTemplate>

Thank you for any advice :)

[Deivaselvan Y]

Hi Peter,

Thank you for contacting Syncfusion support.

Yes, SfDataGrid has support to display additional information of the parent row by Template using TemplateViewDefinition. Refer the below documentation for more details.

https://help.syncfusion.com/wpf/sfdatagrid/record-template-view

Also, refer the below link for the sample to demonstrate this feature
https://github.com/syncfusion/wpf-demos/tree/master/SfGrid.WPF/Samples/DetailsViewTemplateDemo/CS

Please let us know if you have any other questions.

Regards,
Deivaselvan 

[Peter Verbo]

Thanks Deivaselvan for your reply, it was very helpful but what I need is to automatically display row details only when row is selected. And we don't want any row header too. Is it possible to do? In MVVM

[Deivaselvan Y]

Hi Peter,

We have analyzed your query and you can achieve your requirement “To show and hide the DetailsViewTemplate on selection” by override the GridSelectionController.

Code snippets.  

public class MySelectionController : GridSelectionController  

{  

    public MySelectionController(SfDataGrid dataGrid)  

        : base(dataGrid)  

    {  

    }  

    protected override void ProcessSelectedIndexChanged(SelectionPropertyChangedHandlerArgs handle)  

    {  

        base.ProcessSelectedIndexChanged(handle);  

  

        int newIndex = (int)handle.NewValue;  

        int oldIndex = (int)handle.OldValue;  

  

        if (newIndex >= 0)  

        {  

            Dispatcher.CurrentDispatcher.BeginInvoke(new Action(() =>  

            {  

                this.DataGrid.ExpandDetailsViewAt(newIndex);  

            }), DispatcherPriority.ApplicationIdle);  

        }  

  

        if (oldIndex >= 0)  

        {  

            this.DataGrid.CollapseDetailsViewAt(oldIndex);  

        }  

    }  

}  

Please find the sample from the below location. Try running this sample and let us know if this helps you. 
DetailsViewTemplateDemo692113753.zip 

Regards,
Deivaselvan 

[Peter Verbo]

Thank you very much! With this example I was able to style my row details according my needs :) Thanks again! And also I used ExpanderColumnWidth="0" to hide expanders of rows.

But I have another issue connected with displaying of row details. GetAutoRowHeight most probably does not work correctly. All I need is that original row will adapt for its content no matter if row details is displayed. I didn't find some xaml setting so I'm using below algorithm which (as I said) now seems to be not working:

        private void MySfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)

        {

            this.GridColumnSizer.AutoFitMode = AutoFitMode.SmartFit;

            this.GridColumnSizer.FontSize = this.FontSize;

            this.GridColumnSizer.GetAutoRowHeight(e.RowIndex, this.gridRowResizingOptions, out double autoHeight);

            if (autoHeight > 30)

            {

                e.Height = autoHeight;

                e.Handled = true;

            }

        }

[Sathiyathanam Jeyakumar]

Hi Peter, 

 

You can set height of the row that contains row details view template by using the TemplateViewDefinition.HeightMode property. 

Please refer the below link to get more details to customize the height of the row details template. 

 

https://help.syncfusion.com/wpf/sfdatagrid/record-template-view#height-customization 

 

Regards, 

Sathiyathanam 

[Peter Verbo]

Hi Sathiyathanam,

I'm using this xaml code:

<syncfusion:TemplateViewDefinition HeightMode="Auto"

                                                             RowTemplate="{StaticResource DetailsViewTemplate}"/>

And it is not working. If you check this image: https://imgur.com/EvNd1BF, you can see that height of rows with long Text is not automatically adapted. If I'm not using rowDetails then rows height is adapted. But I need both :) RowDetails and also row height to be adapted to long text. For setting row height I'm using code in my previous post.

I'll be very thankfull for any advice.

[Deivaselvan Y]

Hi Peter,

We regret for the inconvenience.

The QueryRowHeight event is not supported when the DataGrid has DetailsViewDataGrid. And we already mentioned this limitation in our UG documentation.

UG Link: https://help.syncfusion.com/wpf/sfdatagrid/row-height-customization#limitations

We have already logged this requirement as a feature request in our database. And the feature implementation process is going on. So, we will let you know once this feature has been implemented in any of our upcoming releases.

At the moment, you can only have a possibility to increase all the rows height by using the RowHeight property of SfDataGrid. Please refer the below code snippets.

 

<syncfusion:SfDataGrid Name="dataGrid" 

                    AutoGenerateColumns="False"                                     

                    ItemsSource="{Binding OrderList}" 

                    ColumnSizer="Star"  

                    AllowDeleting="True" 

                    AllowFiltering="True" 

                    AllowSorting="True" 

                    AllowGrouping="True" 

                    ShowGroupDropArea="True" 

                    RowHeight="40"> 

<syncfusion:SfDataGrid.DetailsViewDefinition> 

    <syncfusion:TemplateViewDefinition HeightMode="Auto" RowTemplate="{StaticResource DetailsViewTemplate}" NavigationMode="ExcludeTemplateRow"/> 

</syncfusion:SfDataGrid.DetailsViewDefinition> 

<syncfusion:SfDataGrid.Columns> 

    <syncfusion:GridTextColumn HeaderText="Order ID" MappingName="OrderID" /> 

    <syncfusion:GridTextColumn HeaderText="Customer ID" MappingName="CustomerID"/> 

    <syncfusion:GridComboBoxColumn ItemsSource="{Binding Path=ComboBoxItemsSource, Source={StaticResource viewmodel}}"  

                                    MappingName="ProductName" /> 

    <syncfusion:GridNumericColumn HeaderText="Quantity" 

                                    MappingName="Quantity" 

                                    SetCellBoundValue="True" 

                                    NumberDecimalDigits="0"/> 

    <syncfusion:GridCurrencyColumn HeaderText="Freight" MappingName="Freight" DisplayBinding="{Binding Path=Freight}"/> 

    <syncfusion:GridCheckBoxColumn MappingName="IsClosed" /> 

</syncfusion:SfDataGrid.Columns> 

</syncfusion:SfDataGrid> 

Regards,
Deivaselvan 

[Peter Verbo]

Thanks Deivaselvan! I hope it will be soon :) Thank you very much for all information and help.

[Deivaselvan Y]

Hi Peter,

We will update you once AutoRowHeight feature for DetailsViewDataGrid has been included in any of our upcoming release. Please let us know if you require any further assistance.

Regards,
Deivaselvan