DataGrid Refresh Navigation Item Visibility

1 Answer 437 Views
DataGrid
Derrick
Top achievements
Rank 1
Derrick asked on 15 Aug 2022, 08:49 PM

I've struggled on and off getting the DataGrid to behave the way I expect. I've gone through this forum and made several changes based on related questions, but I still have some issues.

The biggest one I have now is the visibility of items when navigating around the App.

I whittled down the "HomePage" to just the DataGrid and some buttons. In the App I normally refresh this DataGrid when the page is navigated to. For simplicity's sake, I do it manually in this example. Because the HomePage is on the Navigation stack, I expect the Page and the ViewModel to remain valid and thus the items in the DataGrid to still be there, even if I don't refresh the data source. when I return to the page. See the images below and attached video example.

For additional context, I am using NavigationPages and Dependency Injection (for the Pages and ViewModels) to navigate (not AppShell).

    <Grid RowDefinitions="*,100">

        <telerik:RadDataGrid x:Name="grdRegisters"
                             RowHeight="50"
                             Style="{StaticResource ReadOnlyGridStyle}"
                             ItemsSource="{Binding Registers}"
                             SelectionStyle="{StaticResource SelectedRowBackgroundStyle}"
                             RowBackgroundStyle="{StaticResource RowBackgroundStyle}"
                             AlternateRowBackgroundStyle="{StaticResource AltRowBackgroundStyle}"
                             SelectedItem="{Binding SelectedRegister, Mode=TwoWay}">
            <telerik:RadDataGrid.Columns>
                <telerik:DataGridTemplateColumn HeaderText=""
                                                SizeMode="Fixed"
                                                Width="50">
                    <telerik:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate x:DataType="RegisterModel">
                            <Label FontFamily="FASolid" 
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Text="&#xf005;" 
                                   IsVisible="{Binding IsCurrentRegister, Mode=OneTime}"/>
                        </DataTemplate>
                    </telerik:DataGridTemplateColumn.CellContentTemplate>
                </telerik:DataGridTemplateColumn>

                <telerik:DataGridTemplateColumn HeaderText="Shift Date">
                    <telerik:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate x:DataType="RegisterModel">
                            <Label Style="{StaticResource GridCellLabelStyle}" 
                                   Text="{Binding Date, Converter={StaticResource ToLocalTimeConverter}, StringFormat='{}{0:d}'}"/>
                        </DataTemplate>
                    </telerik:DataGridTemplateColumn.CellContentTemplate>
                </telerik:DataGridTemplateColumn>

                <telerik:DataGridTemplateColumn HeaderText="Shift Name">
                    <telerik:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate x:DataType="RegisterModel">
                            <Label Style="{StaticResource GridCellLabelStyle}" 
                                   Text="{Binding Shift.Name}"/>
                        </DataTemplate>
                    </telerik:DataGridTemplateColumn.CellContentTemplate>
                </telerik:DataGridTemplateColumn>

                <telerik:DataGridTemplateColumn HeaderText="Start Time">
                    <telerik:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate x:DataType="RegisterModel">
                            <Label Style="{StaticResource GridCellLabelStyle}" 
                                   Text="{Binding StartTime, Converter={StaticResource ToLocalTimeConverter}, StringFormat='{}{0:t}'}"/>
                        </DataTemplate>
                    </telerik:DataGridTemplateColumn.CellContentTemplate>
                </telerik:DataGridTemplateColumn>

                <telerik:DataGridTemplateColumn HeaderText="End Time">
                    <telerik:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate x:DataType="RegisterModel">
                            <Label Style="{StaticResource GridCellLabelStyle}" 
                                   Text="{Binding EndTime, Converter={StaticResource ToLocalTimeConverter}, StringFormat='{}{0:t}'}"/>
                        </DataTemplate>
                    </telerik:DataGridTemplateColumn.CellContentTemplate>
                </telerik:DataGridTemplateColumn>


            </telerik:RadDataGrid.Columns>
        </telerik:RadDataGrid>

        <HorizontalStackLayout Grid.Row="1">
            <Button Text="Resume"
                    IsEnabled="{Binding SelectedRegister, Converter={StaticResource IsNotNullConverter}}"
                    Command="{Binding ResumeShiftCommand}"/>

            <Button Text="Refresh"
                    Command="{Binding RefreshCommand}"/>

        </HorizontalStackLayout>
        
    </Grid>


 

On initial Refresh, all items are visible in the DataGrid

I navigate forward and then back (PopToRoot), the DataGrid appears empty, although the vertical scroll appears like there are items.

If I tap Refresh, items become visible, but only above the first fold.

If i resize the window vertically, items will appear and disappear depending on the height of the window. (see attached video)

 

1 Answer, 1 is accepted

Sort by
0
Antoan
Telerik team
answered on 18 Aug 2022, 02:58 PM

Hello Derrick,

I have tested the code in a sample app and managed to reproduce. It looks like the problem comes from using the PopToRootAsync method. I have logged an issue on your behalf which you can follow and be notified about its status from the following link:
https://feedback.telerik.com/maui/1576599-datagrid-winui-items-do-not-invalidate-correctly-when-changing-pages 

Workaround

The only solution I can currently offer is using the Navigation.PushAsync instead of PopToRootAsync, as the issue occurs only with the PopToRootAsync method.

I hope this information helps. Let me know if I can provide any further assistance.

Regards,
Antoan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Derrick
Top achievements
Rank 1
commented on 18 Aug 2022, 03:34 PM

Thank you for the follow up.
Tags
DataGrid
Asked by
Derrick
Top achievements
Rank 1
Answers by
Antoan
Telerik team
Share this question
or