Virtualization on the grid dynamically

[chris johansson]

Hello, is there a way to enable/disable Virtualization on the grid dynamically?

Say if I have treeview, where depending on what node I click on I display the data in the grid.  I have different tree levels and some are just read only data and the grid will not be editable.  But one node will be editable.  Since Virtualization currently doesn't support batch edit mode.  Is there a way where I can just disable it dynamically for that specific node I select by just setting it to false?

I tried using this EnableVirtualization=@enableVirtualization  

and setting it to true/false depending on which node I select.  Therefore it will be faster to load the read only data and then when I select the node that will be able to edit the data in the grid, Turn it off so they can add/update/delete.

I got this error below.. just wondering if there is a work around for now so I can speed things up thanks.  Also is there virtualization in the treeview yet?

[2020-12-07T18:30:32.470Z] Error: System.NullReferenceException: Object reference not set to an instance of an object.

   at Syncfusion.Blazor.Grids.Internal.RowModelGenerator`1.GeneratorRows(IEnumerable`1 data, Int32 startIndex)

   at Syncfusion.Blazor.Grids.Internal.GridVirtualContent`1.OnParametersSet()

   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()

   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

[Vignesh Natarajan]

Hi Chris,  

 

Thanks for contacting Syncfusion support. 

 

Query1: “I tried using this EnableVirtualization=@enableVirtualization  and setting it to true/false depending on which node I select.  I got this error below..”  

 

We have analyzed your query and we are able to reproduce the reported behavior when trying to switch the Virtualization in Grid. We suggest you to overcome the reported issue by destroy and re render Grid with a boolean property when switching the virtualization. Kindly render the Grid inside a boolean variable, while switching kindly disable boolean variable to destroy the Grid. After switching the EnableVirtualization property, enable the Boolean property (ShowGrid) to render the Grid with modified virtual settings.  

 

Refer the below code example.  

 

<SfButton OnClick="Switch" Content="Switch Virtualization"></SfButton> 

@if (ShowGrid) 

{ 

    <SfGrid DataSource="@GridData" AllowFiltering="true" Height="400" AllowPaging="!enableVirt" EnableVirtualization="@enableVirt"> 

    </SfGrid> 

} 

 

@code{ 

    public List<Order> GridData { get; set; } 

    public bool ShowGrid { get; set; } = true; 

    public bool enableVirt { get; set; } 

    public async Task Switch() 

    { 

        ShowGrid = false;        // to destroy the Grid  

        await Task.Delay(100); 

        enableVirt = !enableVirt; 

        ShowGrid = true;        // to render the Grid, 

    } 

 

 

We have switched the Grid between Virtualization and Paging feature to improve the performance of Grid since records might be high.  

 

For your reference, we have prepared a sample using above solution which can be downloaded from below 

 

Sample: https://www.syncfusion.com/downloads/support/forum/160404/ze/DataGrid-1410776098  

 

Kindly get back to us if you have further queries.  

 

Query2: “Also is there virtualization in the treeview yet?” 

 

We have considered this requirement (virtual scrolling support in TreeView component) as a feature at our end. This feature will be available in any one of our volume releases.   

  

You can track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below feedback link. Please log in to the feedback portal tool using Direct trac credentials.   

   

https://www.syncfusion.com/feedback/8434/support-for-virtual-scrolling-in-treeview   

  

Please, let us know if you have any concerns.  

 

Regards, 

Vignesh Natarajan 

[chris johansson]

I see..I was using a treeview and node select function and it didn't trigger the if statement after changing the ShowGrid property so I had to use StateHasChanged() to get that to work properly for some reason

  public async void nodeSelect(NodeSelectEventArgs args)

    {

     ShowGrid = false;

            StateHasChanged();

            ShowGrid = true;

}

[chris johansson]

It feels like a "hacky" solution though.. the way you re render.. by hiding and unhiding.

[Vignesh Natarajan]

Hi Chris,  

 

Thanks for the update. We understand that you have achieve your requirement by modifying the provided solution.   

 

Query: “It feels like a "hacky" solution though.. the way you re render.. by hiding and unhiding.” 

 

We have validated the reported query (switch between Virtualization and Non virtualized Grid) at our end. We would to like to inform that we will process and render the contents of virtualized grid and non-virtualized grid differently. So it require the Grid to destroyed and rendered again with different requirement. So we request you to use the solution provided in previous update to achieve your requirement.  

 

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[chris johansson]

Thanks, because it doesn't feel fluid when your clicking around and a flickering of hiding/unhiding rather then just keeping the control there but re-rendering it.

[Vignesh Natarajan]

Hi Chris,   

Thanks for the update.  

Query: “because it doesn't feel fluid when your clicking around and a flickering of hiding/unhiding rather then just keeping the control there but re-rendering it.” 

We have considered the reported query as a bug and logged the defect report “Exception occur when dynamically changing the EnableVirtualization property of Grid” for the same. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our weekly release which is expected to be rolled out by mid of January, 2021. We will update you once the release is rolled out.   

      

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.      

  

https://www.syncfusion.com/feedback/20495/  

Till then we appreciate your patience.   

Regards, 

Vignesh Natarajan  

[chris johansson]

Does this work now switching between Virtualization and Non Virtualization on the grid??? reason i'm doing this is because some nodes may have batch mode and Virtualization doesn't support it i think yet?

Before I had to do this in order to make it work when flipping between virtual = true and non virtual false... by redisplaying the grid.. is this still the case?

           ShowGrid = false;

            StateHasChanged();

            ShowGrid = true;

            StateHasChanged();

[Vignesh Natarajan]

Hi Chris,  

 

Query: “I had to do this in order to make it work when flipping between virtual = true and non virtual false... by redisplaying the grid.. is this still the case?” 

 

No, you can switch to Non virtualized Grid to Virtualized without re-displaying the Grid component. But some configurations needs to be updated while switching between them. Please find the below code example to switch between virtualized and non virtualized Grid 

 

<SfButton OnClick="Switch" Content="Switch Virtualization"></SfButton> 

<SfGrid @ref="Grid" DataSource="@GridData" Height="400" AllowPaging="!enableVirt" EnableVirtualization="@enableVirt"> 

    @if (enableVirt) 

    { 

        <GridPageSettings PageSize="50"></GridPageSettings> 

    } 

    else 

    { 

        <GridPageSettings PageSize="12" PageCount="8" CurrentPage="1"></GridPageSettings> 

    } 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee ID" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> GridData { get; set; }     

    public bool enableVirt { get; set; } = true; 

    public async Task Switch() 

    { 

        enableVirt = !enableVirt; 

        await Task.Yield(); 

        Grid.Refresh();         

    } 

 

  

Kindly download the modified sample from below which we have prepared using our latest version Nuget package.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/160404/ze/DataGrid_updated-856042610  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[chris johansson]

Thanks but it didn't quite work properly for me for what i'm doing. i explained with video in the private incident forums if you could check there thanks

[Vignesh Natarajan]

Hi Chris,  

Thanks for the update.  

We will validate and update you further details in that incident. Kindly follow that newly created incident for further follow ups related to that query.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan