Grid Templates do not render properly when data is populated asynchronously

[Daniel Urbanski]

When populating a grid with an asynchronous method, adding a Template to a Grid will cause the grid to have connectivity issues and not render correctly if there are too many elements on the screen or if the model object has too many properties. I have created the following simple example to demonstrate.

This code shows an "Attempting to reconnect to the server..." for a few seconds and then displays the gird with the Order ID field missing.

• Removing the template appears to allow the page to work correctly for a larger number of records (not sure if there's a limit on this)
• Reducing the number of onscreen rows to 55 in this example allows the page to be rendered as expected.
• Reducing the number of onscreen rows to 55 but adding an additional property to the Order object causes the above mentioned irregular behavior
• Forcing the list to be populated synchronously appears to allow the page to work correctly for a larger number of records (not sure if there's a limit on this)

```

@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid ModelType="@Model" DataSource="@Orders">
    <GridColumns>
        <GridColumn HeaderText="Order ID">
            <Template>
                @{
                    var order = (context as Order);
                    <span>@order.OrderID</span>
                }
            </Template>
        </GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" 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>
</EjsGrid>

@code{
    public List<Order> Orders { get; set; }

    Order Model = new Order();


    protected async override Task OnInitializedAsync()
    {
        await Task.Delay(1000);
       
        Orders = Enumerable.Range(1, 56).Select(x => new Order()
        //Orders = Enumerable.Range(1, 55).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
        //public double? AnotherValue { get; set; }
    }
}

```

[Vignesh Natarajan]

Hi Daniel,  

Greetings from Syncfusion support.  

Query: “adding a Template to a Grid will cause the grid to have connectivity issues and not render correctly if there are too many elements on the screen or if the model object has too many properties” 

To replicate the issue at our end, we have prepared a both Client and Server side sample prepared using .NET CORE 3.1 Preview 1 and your provided code example in 17.3.0.21-beta version of Syncfusion package. We are not able to reproduce the reported issue at our end. Kindly download the samples from below.  

Server: https://www.syncfusion.com/downloads/support/forum/148749/ze/AsyncGrid-1105592355  

Client: https://www.syncfusion.com/downloads/support/forum/148749/ze/AsyncGrid-Client-835074755  

Note: we have also ensured the reported issue by increasing the number of records to 100.  

After referring the sample, if you are still facing the issue, kindly get back to us with following details. 

1. Share your project type (client or server).
2. Share your Syncfusion Nuget package version.
3. If possible reproduce the reported issue in provided sample.
4. Or share issue reproducible sample.

Regards,
Vignesh Natarajan.

[Daniel Urbanski]

Hi, I have upgraded to .NET CORE 3.1 and using SyncFusion 17.3.0.29-beta I am still encountering this error. You can recreate it in the example that was provided by Vignesh by changing the number of records to 1000. With the template commented out, there does not appear to be a limit on the number of records so only grids wih a template seem to be hitting this memory limit.

On the project that I am working on, I have larger objects as my model and can only display 25 records on the screen without causing the connection issues.

[Daniel Urbanski]

I have created an example that more closely mirrors my situation.

Steps to recreate:

- Run application

- Change page size to be greater than 25

Note: this only happens when there is a Template being using by the grid. Remove the template and the page size doesn't matter.

Attachment: AsyncGridUpdate_b2a4abde.zip

[Renjith Singh Rajendran]

Hi Daniel, 

Thanks for contacting Syncfusion support. 

We suggest you to set the “Width” property for the Template column. As there are many columns in Grid and no width is set for Template column, the template column is hidden due to the default responsive behavior of Grid. So we suggest you to set the Width for the template column to display the template column. We have also modified the sample from your update, please download the working sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AsyncGrid827348034 

 

And also we found some code used unnecessarily and placed wrongly in Grid. You have used both DataSource property of EjsGrid  and UrlAdaptor of EjsDataManager simultaneously to same Grid. Both of them (DataSource and EjsDataManager) are used to bound DataSource to Grid. So you need to set any one to a single Grid(Either use DataSource or EjsDataManager to bind data to Grid), both of them must not be defined simultaneously for a single Grid.  

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/ 

 

And also you have defined the GridPageSettings inside the GridColumns tag. This is inappropriate way of defining the PageSettings for a Grid.  

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/paging/ 

 

Please refer the below highlighted code changes made in your attached sample. 

 

<EjsGrid ModelType="@Model" AllowPaging="true" TValue="Email">   @*Used EjsDataManager to bind data to Grid, so removed the DataSource property*@                                   

        <EjsDataManager Url="/api/email/getEmails" Adaptor="Syncfusion.EJ2.Blazor.Adaptors.UrlAdaptor"></EjsDataManager> 

        <GridPageSettings PageSize="25" PageSizes="this.pageSizes" /> 

        <GridColumns> 

            <GridColumn HeaderText="AttachmentGroup" Width="150"> 

                <Template> 

                    @if (context is Email email && email.AttachmentGroup != null) 

                    { 

                        <EjsButton CssClass="e-primary">View</EjsButton> 

                    } 

                </Template> 

            </GridColumn> 

            <GridColumn Field=@nameof(Email.MessageId) Width="150"></GridColumn> 

            <GridColumn Field=@nameof(Email.Author) Width="150"></GridColumn> 

            ... 

       </GridColumns> 

    </EjsGrid> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Daniel Urbanski]

I appreciate you pointing those oversights in my sample code, but none of them affect the behavior that I'm seeing.

Even in the modified sample code that you just posted, changing the page size to 500 causes the page to complain about connection issue and causes the template to not render. Can you verify that you are able to reproduce the issue in the code you just provided me?

If this is a known bug, can you provide me with a ticket and timeline for when it might be addressed.

Thank you.

[Renjith Singh Rajendran]

Hi Daniel, 

Thanks for contacting Syncfusion support. 

 

Query 1 : I appreciate you pointing those oversights in my sample code, but none of them affect the behavior that I'm seeing. 

We suggest you to ensure to follow these Syncfusion coding standards. At normal Grid rendering not following of these standards may not affect the Grid. But if doing complex operations like data operations etc. then not following of these standards will affect the Grid’s performance. So we suggest you to ensure to follow the Syncfusion Grid’s coding standards. 

Query 2 : Even in the modified sample code that you just posted, changing the page size to 500 causes the page to complain about connection issue and causes the template to not render. 

This error may occur when there is no enough space to allocate the data sent from server to JS Interop. In Blazor application, they (Microsoft) have limited the message size (32KB) which will be sent from server to JSInterop to increase the performance. While using many templates in a page, will require more size to allocate them. Hence the reported issue may have occurred. So we suggest you to resolve the issue by increase the message size using the below method. We have modified the sample form our previous update based on this scenario. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AsyncGrid1435575267 

Include the below code into your project startup.cs file. 

 

   public void ConfigureServices(IServiceCollection services) 

        { 

            ... 

            services.AddSignalR(e => 

            { 

                e.MaximumReceiveMessageSize = 102400000; 

            }); 

        } 

   

Note : After our Volume 4, 2019 release, there is no need of using the above provided suggestion(code). 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.