Auto-Adjust Master details view

[Corentin Wadin]

Hello, 

I am working on a WPF application, I have a ItemControl which is implemented in a MasterViewDetail but when I add items to my list I have to scroll to get the right height.

Is there a solution to this issue. I have made a video available in the archive to show you.

<syncfusion:SfDataGrid.DetailsViewDefinition>
    <syncfusion:TemplateViewDefinition  RowTemplate="{StaticResource Template_Selecteur}" HeightMode="Auto"/>
</syncfusion:SfDataGrid.DetailsViewDefinition>




<ControlTemplate x:Key="Template_Piece">
<ItemsControl Grid.Row="1" ItemsSource="{Binding Data.Liste_Commentaire}">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Margin" Value="2"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsDeleted}" Value="True">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid KeyboardNavigation.IsTabStop="False">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="500"/>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition Width="200"/>
                </Grid.ColumnDefinitions>
                <TextBox Grid.Column="0"  Text="{Binding Text}" AcceptsReturn="True"  IsEnabled="{Binding Enabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" TextWrapping="Wrap" ></TextBox>
                <CheckBox Grid.Column="2" IsChecked="{Binding IsCheckedC}"  IsEnabled="{Binding Enabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <CheckBox.LayoutTransform>
                        <ScaleTransform ScaleX="2" ScaleY="2" />
                    </CheckBox.LayoutTransform>
                </CheckBox>
                <CheckBox Grid.Column="4" IsChecked="{Binding IsCheckedD}"  IsEnabled="{Binding EnabledNonVarianteEtatEnvoye, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <CheckBox.LayoutTransform>
                        <ScaleTransform ScaleX="2" ScaleY="2" />
                    </CheckBox.LayoutTransform>
                </CheckBox>
                <bouton:IconButton Grid.Column="6" Style="{StaticResource Style_With_Icon}" Background="#C1292E" Icon="{StaticResource Delete_Icon}" IconSize="20" Width="30" Height="30"
                                   Click="Delete_Click" VerticalAlignment="Center" HorizontalAlignment="Left"
                                   IsEnabled="{Binding Enabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
</ControlTemplate>

Attachment: video_efab2f0f.rar

[Corentin Wadin]

This's the video

Attachment: video_927aac27.rar

[Sweatha Bharathi]

Hi Corentin Wadin ,

We are currently analyzing your reported scenario. We need time to validate the scenario, we will provide an update on or before January 25, 2024.

[Corentin Wadin]

Thanks for the reply, I send you a easier example with no context from my project and a new video. The DetailsView height doesn't adjust. Same problem on other project. 

My Syncfusion version : 21.1.35

    <UserControl.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="Template_Selecteur">
                <TextBox AcceptsReturn="True" Style="{StaticResource TextBoxStyle1}" />
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <syncfusion:SfDataGrid AutoGenerateColumns="False"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               ItemsSource="{Binding Liste_Erreurs, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}">
            <syncfusion:SfDataGrid.Columns>
                <syncfusion:GridTextColumn HeaderText="Id" MappingName="Code" />
                <syncfusion:GridTextColumn HeaderText="Name" MappingName="Libelle" />
            </syncfusion:SfDataGrid.Columns>
            <syncfusion:SfDataGrid.DetailsViewDefinition>
                <syncfusion:TemplateViewDefinition  RowTemplate="{StaticResource Template_Selecteur}" HeightMode="Auto"/>
            </syncfusion:SfDataGrid.DetailsViewDefinition>
        </syncfusion:SfDataGrid>
    </Grid>

Attachment: Syncfusion_SfDataGrid_85e5ab3a.rar

[Sweatha Bharathi]

Hi Corentin Wadin ,

We have analyzed your query. The templatesize can be calculated during initial loading. In order to adjust the height based on the text entered in the textbox, we have achieved this by using the  TextChanged event. In this event, we have called the Datagrid invalidate method, which helps calculate the template size. We have achieved this with the purpose of doing textbox editing. In your case, you can use the below code snippet based on your requirement. We have provided a sample for your reference. Kindly review the sample and let us know if you have any further concerns.

Code Snippet :

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)

 {          

     dataGrid.GetVisualContainer().InvalidateMeasure();

}

 

Attachment: MasterDetailsView_Demo_4_8_6343e5e6.zip

[Corentin Wadin]

Thank for the line but I miss something in my example my template is more like this. The Grid and the Grid.Row break your update. I sent you antoher video with both example

<DataTemplate x:Key="Template_Selecteur">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
            <TextBlock Text="a" Grid.Row="0" />
            <TextBox Grid.Row="1" AcceptsReturn="True" Height="Auto" Width="270" TextChanged="TextBox_TextChanged"/>
    </Grid>
</DataTemplate>

Attachment: 20240125_151405_ae7e93f0.rar


EDIT : Same problem with stackpanel

            <DataTemplate x:Key="Template_Selecteur">
                <Grid>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="a" />
                        <TextBox AcceptsReturn="True" Height="Auto" Width="270" TextChanged="TextBox_TextChanged"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>

[Sweatha Bharathi]

Hi Corentin Wadin ,

We have analyzed your query. We have calculated the template size based on the DesiredSize property from the framework. For further analysis, we can check in case the RowDefinition Height will be set to star instead of Auto ,it should work fine as expected. If you are facing any problems using row definition height as star, kindly let us know.

[Corentin Wadin]

Thanks, it work perfectly.

Can you tell me how can I've a smooth scroll in my SfDataGrid or I've to create another topic for this question. 

In my video, you can see there is are big difference between scroll on the Row and the DetailsViewDefinition.

Attachment: 20240126_150659_a1bc94ca.rar

[Vijayarasan Sivanandham]

Corentin Wadin,

We have created a new thread for the query, and the link is below.

Scrolling in SfDataGrid is not smooth when scrolling on the row and the DetailsViewDefinition. ~ Split from 186362 | WPF Forums | Syncfusion