We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid: loading on demand cell value on a virtualized grid - blazor server side

In a project I'm developing obtaining data for a just a cell of the grid is a very slow process.

The approach I'm using to optimize performance is:

1) Enable grid virtualization to load only a small subset of all the data
2) Wire the RowDataBoundHandler and initialize viewmodel on demand when the row become visible the first time firing back a PropertyChanged event for the calculated cell

This method seem to work, but sometimes I end up with a empty grid like the one in the attachment file.

Any advice on how to fix this or the grid is just not ready for this kind of optimization?



Attachment: SyncfusionGrid_139428cc.zip

7 Replies

VN Vignesh Natarajan Syncfusion Team January 28, 2020 03:21 PM UTC

Hi Andrea,  
 
Greetings from Syncfusion support.  
 
Query: “In a project I'm developing obtaining data for a just a cell of the grid is a very slow process 
 
While binding large number of records and column, DOM update will take some time. In this case VirtualScrolling will be suggested one to improve the performance. But we need some more details from you regarding your query which will be helpful for us to validate the reported issue further.  
 
So kindly share the following details.    
 
  1. Share your Grid code example.
  2. Are you facing any script error / exception in console. If yes, share the screenshot of script error with stack trace.
  3. Kindly share the details about your RowDataBound event handler and action you were trying to performing in that event.  
  4. Kindly share more details about your requirement  
  5. Share your datasource type and its count.
 
Regards, 
Vignesh Natarajan. 



AD Andrea Del Signore January 29, 2020 09:11 AM UTC

Hi Vignesh,

unfortunately is not easy for me to provide you with a functional copy of project, anyway I try to my best to explain the problem.

This is the razor file that contains the grid:

<div class="main-container client-area">
    <div style="height: 54px">
      
    </div>

    <div class="client-area" style="flex: 1 1; overflow-y: auto;">

        <EjsGrid ID="gridProducts" DataSource="@Results" EnableVirtualization="true" Width="100%" Height="100%" RowHeight="96">
            <GridEvents RowDataBound="RowDataBoundHandler" TValue="ProductViewModel" OnActionComplete="ActionCompleteHandler" OnActionBegin="ActionBeginHandler"></GridEvents>
            <GridColumns>
                <GridColumn Field="Cod" HeaderText="Codice" Width="50" IsPrimaryKey="true">
                    <Template>
                        @{
                            var product = (context as ProductViewModel);

                            <div style="height: 64px; width: 64px;">
                                <img class="img-thumbnail" src="@($"{product?.ImageUrl}")" alt="@Path.GetFileName(product?.ImageUrl)" />
                            </div>
                        }
                    </Template>
                </GridColumn>

                <GridColumn Field="Des" HeaderText="Descrizione" Width="150">
                    <Template>
                        @{
                            var product = (context as ProductViewModel);

                            <div>
                                <p class="lead">@product.Des</p>
                                <br />
                                <p>
                                    <small class="text-muted">Codice: @product.Cod</small>
                                    &nbsp;<a rel='nofollow' href="javascript: void(0)" @onclick="() => GoToCart(product)" style="text-decoration: none;"><span class="badge-cart">@(product.QtyInCart > 0 ? "Già nel carrello" : "")</span></a>
                                    &nbsp;<a rel='nofollow' href="javascript: void(0)" @onclick="() => ShowDocs(product)" style="text-decoration: none;"><span class="badge-orders">@(product.IsInOrder ? "Già in ordine" : "")</span></a>
                                </p>
                            </div>
                        }
                    </Template>
                </GridColumn>

                <GridColumn Field="Price" HeaderText="Prezzo" Type="ColumnType.Number" TextAlign="TextAlign.Right" Width="130">
                    <Template>
                        @{
                            var product = (context as ProductViewModel);

                            <div>
                                <p>
                                    @string.Format("€ {0:#,###,##0.00}", product.Price)
                                </p>
                                <br />
                                <EjsButton IconCss="e-icons e-add" @onclick="async (args) => await AddToCart(product)">Aggiungi</EjsButton>
                            </div>
                        }
                    </Template>
                </GridColumn>
            </GridColumns>
        </EjsGrid>
    </div>

    <div style="height: 54px; text-align: center;">
      
    </div>
</div>

As you can see the grid is virtualized and I'm using some column templates to customize the appearance of the grid.

The slow data for this visualization to get is the price, so the view model is initialized just once on the RowDataBoundHandler:

        public async void RowDataBoundHandler(RowDataBoundEventArgs<ProductViewModel> args)
        {
            var product = this.results.FirstOrDefault(item => string.Compare(item.Product.Cod, args.Data.Cod, true) == 0);

            if (product != null && !product.Initialized)
            {
                await product.ItemBounded(http);
            }
        }

This is the relevan code in the product view model:

        public async Task ItemBounded(HttpClient http)
        {
            var info = await http.GetJsonAsync<ProductInfo>($"{AppBase.ApiBaseUri}/product/info?cod={Cod}");

            this.price = (info?.Price).GetValueOrDefault();
            Initialized = true;

            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Price"));
        }


Hope this is enough to understand the problem.

Regards,
Andrea

P.S.
The code quality is not so good, just because I'm developing a prototype to evaluate Blazor + Syncfusion in a server side app


VN Vignesh Natarajan Syncfusion Team January 30, 2020 07:11 AM UTC

Hi Andrea,  
 
Thanks for sharing the details.  
 
We are able to reproduce the reported issue (empty rows are rendered in Grid) at our end while preparing a sample as per your suggestion. This is because there is some time delay in template rendering for Virtualized Grid. Hence while scrolling templates gets destroyed or not rendered properly. Since it is a known request, we have considered it as a feature and logged a improvement task ”Improve the performance of Virtual Scrolling in Blazor Grid”.  
 
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We have planned to implement this feature in our next release 2020 Volume 1 which is expected to be rolled out in month of March 2020.  
 
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.   
 
 
Till then we suggest you to achieve your requirement using Paging feature of EjsGrid. Refer the below documentation for your reference 
 

Kindly get back to us if you have further queries.   

Regards, 
Vignesh Natarajan. 



AD Andrea Del Signore January 30, 2020 08:14 AM UTC

Hi Vignesh,

thanks for the prompt response, I suspected a timing issue too, because I tried a different approach to solve the issue using a custom DataAdaptor but even if it mitigates the bug I had the same results.

As using the Paging feature of EjsGrid I can't by design, but for now the app is just a prototype and we can live with the bug.

I hope to see the problem solved in the next release.

Thanks,
Andrea


VN Vignesh Natarajan Syncfusion Team January 31, 2020 03:28 AM UTC

Hi Andrea, 
 
Thanks for the update.  
 
The reported feature will be implemented and included in our 2020 Volume 1 release as promised. 
 
We will get back to you once our 2020 Volume 1 gets successfully rolls out. 
 
Regards, 
Vignesh Natarajan. 



AD Andrea Del Signore February 12, 2020 01:50 PM UTC

Hi,

this is just a feedback FYI the bug is still present in 17.4.49 version ;)

Regards,
Andrea


VN Vignesh Natarajan Syncfusion Team February 13, 2020 05:00 AM UTC

Hi Andrea,  
 
Query: “this is just a feedback FYI the bug is still present in 17.4.49 version ;) 
 
The reported feature "Improve the performance of Virtual Scrolling in Blazor Grid” will be included in our 2020 Volume 1 release which is expected to be rolled out in the month end of March 2020.  
 
Till then we appreciate your patience. 
 
Regards, 
Vignesh Natarajan. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon