EnableDataVirtualization property of SfDataGrid is not working properly

Even when i set EnableDataVirtualization = "False" , the SfDatagrid is not loading all items in one time. On scrolling the data grid tries to reuse the existing rows, because of which it assigns wrong values in cell.

I used template column which contains a combo box. If number of rows in the grid is within the screen, then no issue. But if number of rows are more, then while scrolling the selected combo box value gets cleared.

I have the below code in xamarin common project and tested using UWP.

eg:

   <syncfusion:SfDataGrid x:Name="gridTimesheet"

                               EnableDataVirtualization="False"

                               AutoGenerateColumns ="False"

                               AllowEditing="True"

                               ItemsSource="{Binding Items}">

                    <syncfusion:SfDataGrid.Columns>


            <syncfusion:GridTemplateColumn x:Name="colActivityCategory" LoadUIView="True" HeaderText="Activity Category" MappingName="ActivityCategory" MinimumWidth="200" HeaderFontAttribute="Bold">

                            <syncfusion:GridTemplateColumn.HeaderTemplate>

                                <DataTemplate>

                                    <Label Text="Activity Category" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" ></Label>


                                </DataTemplate>

                            </syncfusion:GridTemplateColumn.HeaderTemplate>

                            <syncfusion:GridTemplateColumn.CellTemplate>

                                <DataTemplate>

                                <Picker WidthRequest="20" ItemsSource="{Binding ActivityCategories}" SelectedItem="{Binding ActivityCategory}" BackgroundColor="#f7f7f7" >

                                </Picker>

                            </DataTemplate>

                            </syncfusion:GridTemplateColumn.CellTemplate>

                        </syncfusion:GridTemplateColumn>

        </syncfusion:SfDataGrid.Columns>

                </syncfusion:SfDataGrid>


3 Replies

LN Lakshmi Natarajan Syncfusion Team September 6, 2021 12:28 PM UTC

Hi Kishor, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “EnableDataVirtualization property of SfDataGrid is not working properly” from our side. We'd like to let you know that the EnableDataVirtualization property is used to indicate whether or not to create RecordEntry for all of the objects in SourceCollection while it's loading. The default value of the EnableDataVirutalization is False. Furthermore, by default, the DataGrid reuses the rows when scrolling, whereas EnableDataVirtualization is used to reuse the data rather than the rows. 
 
Please refer to our documentation regarding the same, 
 
#Regarding while scrolling the selected combo box value gets cleared. 
Also, we would like to let you know that you can use the EditTemplate to overcome the reported scenario. 
 
Please refer to the following code snippets for more reference, 
<syncfusion:SfDataGrid x:Name="gridTimesheet" ColumnSizer="Star" 
            EnableDataVirtualization="False" 
            AutoGenerateColumns ="False" 
        HeaderRowHeight="52" 
        SelectionMode="Single" 
        AllowEditing="True" 
        NavigationMode="Cell" 
            ItemsSource="{Binding OrdersInfo}"> 
 
    <syncfusion:SfDataGrid.Columns> 
        <syncfusion:GridTemplateColumn HeaderText="Stock Change" MinimumWidth="50" 
                        MappingName="ActivityCategory"> 
            <syncfusion:GridTemplateColumn.CellTemplate> 
               <DataTemplate> 
                    <Grid> 
                        <Label x:Name="changeValue" 
                Text="{Binding ActivityCategory}" TextColor="Black" 
                XAlign="Center" YAlign="Center"> 
                        </Label> 
                    </Grid> 
                </DataTemplate> 
            </syncfusion:GridTemplateColumn.CellTemplate> 
            <syncfusion:GridTemplateColumn.EditTemplate> 
                <DataTemplate> 
                    <Grid> 
                        <Picker SelectedItem="{Binding ActivityCategory}" ItemsSource="{Binding ActivityCategories}"> 
                        </Picker> 
                    </Grid> 
                </DataTemplate> 
            </syncfusion:GridTemplateColumn.EditTemplate> 
        </syncfusion:GridTemplateColumn> 
    </syncfusion:SfDataGrid.Columns> 
 
</syncfusion:SfDataGrid> 
 
We have attached the tested sample in the following link, 
 
Please let us know if you need further assistance. 
 
Regards, 
Lakshmi Natarajan 



KI kishor replied to Lakshmi Natarajan September 7, 2021 02:08 AM UTC

Thanks for the reply. the issue is on scrolling in the datagrid, it reuses the existing row object and updates it's value only.

This is causing issue, that since it's reusing the same row, the look of the same control is being re-used.

i need to update some UI properties based on the model properties, lets assume i need change background color based on my boolean value from my binding model.

In this case, since it's reusing the rows, the color is not propely applied while scrolling.


How can i set sfdatagrid not to reuse existing rows on scrolling. and always create fresh rows during scrolling or addition of new item into the binding collection?



LN Lakshmi Natarajan Syncfusion Team September 7, 2021 10:28 AM UTC

Hi Kishor, 
 
Thank you for the update. 
 
We have checked the reported queries from our side. 
 
#Regarding How can i set sfdatagrid not to reuse existing rows on scrolling. and always create fresh rows during scrolling or addition of new item into the binding collection? 
 
We would like to inform you that the SfDataGrid is completely developed with UI Virtualization(Item recycling) concept to improve the scrolling performance and we cannot skip reusing for DataGrid. 
 
#Regarding the issue is on scrolling in the datagrid, it reuses the existing row object and updates it's value only 
 
We would like to inform you that you can achieve your requirement using data binding. You can use Converters to update the UI based on the model value. We have prepared a sample to achieve your requirement and attached in the following link, 
 
 
Converter: Returns the background color based on the model value. 
public class BoolToColorConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        return (bool)value ? Color.Red : Color.Green; 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 
 
 
XAML: Bind the model Boolean property with the converter. 
<syncfusion:GridTemplateColumn HeaderText="Stock Change" MinimumWidth="50" 
            MappingName="ActivityCategory"> 
 
    <syncfusion:GridTemplateColumn.CellTemplate> 
        <DataTemplate> 
            <Grid BackgroundColor="{Binding IsClosed, Converter={StaticResource BoolToColorConverter}}"> 
                <Label x:Name="changeValue" 
    Text="{Binding ActivityCategory}" TextColor="White" 
    XAlign="Center" YAlign="Center"> 
                </Label> 
            </Grid> 
        </DataTemplate> 
    </syncfusion:GridTemplateColumn.CellTemplate> 
    <syncfusion:GridTemplateColumn.EditTemplate> 
        <DataTemplate> 
            <Grid> 
                <Picker SelectedItem="{Binding ActivityCategory}" ItemsSource="{Binding ActivityCategories}"> 
                </Picker> 
            </Grid> 
        </DataTemplate> 
    </syncfusion:GridTemplateColumn.EditTemplate> 
</syncfusion:GridTemplateColumn> 
 
 
Please refer to our user guidance document regarding data binding, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
  
 


Loader.
Up arrow icon