RowHeight and Heigh as percentage bug

[Hanu Feenstra]

Good day.

I am using the Grid for Grouping. 

There seems to be a bug when "Heigh" is set as a % value and RowHeight is set as a px value.

RowHeight="30" Height="100%" breaks

RowHeight="30" Height="700px" does not break

But, on the remarks for the RowHeight parameter, it states:

The row height can be specified in pixels or as a percentage of the Grid's overall height. For example, to set the row height to 50 pixels, you can set RowHeight property to 50. To set the row height to 10% of the Grid's overall height, you can set RowHeight property to "10%".

This implies that RowHeight can be set as a % value, but the row height parameter only accepts a double parameter, meaning "10%" can not actually be provided as a parameter to RowHeight. 

I suspect that when Height is set as a %, RowHeight should be set as a % too, but this is not currently possible.

This is the exception when Height is set as a %:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

      Unhandled exception rendering component: Specified argument was out of the range of valid values. (Parameter 'index')

System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values. (Parameter 'index')

   at System.Linq.Queryable.ElementAt[Row`1](IQueryable`1 source, Int32 index)

   at Syncfusion.Blazor.Grids.Internal.Grouping`1[[Loadpad.Web.Shared.Dtos.SchedulableLoads, Loadpad.Web, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].LazyExpand(Object data, Int32 index, Row`1 Row, Dictionary`2 expandedRowIndexes)

   at Syncfusion.Blazor.Grids.Internal.Grouping`1.<LazyExpandCollapse>d__36[[Loadpad.Web.Shared.Dtos.SchedulableLoads, Loadpad.Web, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

   at Syncfusion.Blazor.Grids.Internal.Grouping`1.<ExpandCollapse>d__33[[Loadpad.Web.Shared.Dtos.SchedulableLoads, Loadpad.Web, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

   at Syncfusion.Blazor.Grids.Internal.ExpandCell`1.<<BuildRenderTree>b__0_0>d[[Loadpad.Web.Shared.Dtos.SchedulableLoads, Loadpad.Web, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[Prathap Senthil]

Hanu Feenstra,

Query: when "Heigh" is set as a % value and RowHeight is set as a px value. RowHeight="30" Height="100%" breaks”

We are unable to reproduce the reported issue when attempting to replicate it in version 26.2.9. For your reference, we have attached a screenshot and a simple sample. So, to proceed with the reporting problem, we require some additional clarification from you. Please share the details below to proceed further at our end.

• Share the entire Grid code snippet.
• Are you experiencing issues with initial grid grouping or with expanding and collapsing groups?
• Are you using the lazy loading grouping feature in your Grid?
• Share with us the NuGet version you have used.
• Kindly share your attempt to replicate the issue using the attached simple sample.

The above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Sample: https://blazorplayground.syncfusion.com/embed/LZLptPBMpHPTqdkB?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Additionally, in the latest version, we have a known issue where a 'Null Reference Exception' is thrown while performing grouping. We have fixed this issue internally on our end. In the meantime, we have provided a custom patch to address the issue. Please make use of the custom patch provided. We assure you that the fix will be included in our upcoming patch release, scheduled for August 27th, 2024.

Note: Ensure to clear bin, obj and Nuget cache before proceeding.

Disclaimer: The above patch is generated on the 26.2.10 NuGet package version and it is provided only for the above-mentioned issue “Null Reference Exception throws while performing Grouping” It does not include the fixes of other custom patches provided for other issues.      

Custom Nuget: https://drive.google.com/file/d/1c49IuJlt-S9UotJ7zlAW_ABR-5JWiRT7/view?usp=drive_link

Steps to include the NuGet patch.

1. Download the above custom NuGet package.
2. Remove the existing NuGet package (Syncfusion.Blazor)
3. Clear the NuGet cache using Tools -> NuGet Package Manager –> Package Manager Settings -> Clear NuGet cache.
4. Open NuGet Package Manager. Refer the patch NuGet (Syncfusion.Blazor) from its local downloaded folder.
5. Build the project and clear the browser cache . 

Regards,
Prathap Senthil

[Hanu Feenstra]

I am currently using package version 26.1.35, I will upgrade to a later version and test again.

When height is set as %:
- Works with no grouping selected, it renders as expected

- Works when initial grouping is selected and all groups are collapsed 

- Works when selecting a grouping with all groups collapsed

- Breaks on expanding a group (the list of children does not get rendered) 

In the meantime, here is the full grid code (with a workaround fix for height, calculated dynamically)

With the code below, loading in grouped mode, expanding and clearing the grouping works as expected.

<div class="px-4 w-[30%]">
    <SfGrid 
        @ref="gridRef" 
        ID="available-loads" 
        TValue="AvailableLoads" 
        RowHeight="30" 
        Height="@($"{heightPx}px")" 
        AllowRowDragAndDrop="true" 
        AllowGrouping="true" 
        EnableInfiniteScrolling="true"
    >
        <GridEvents TValue="AvailableLoads" RowDropping="OnDrop" RowDragStarting="OnDragStart"/>
        @if (selectedCarrierId != Guid.Empty)
        {
            <SfDataManager @ref="@dmRef" CrossDomain="true" Url="@LoadsUrl" Adaptor="@Adaptors.UrlAdaptor"/>
        }
        <GridRowDropSettings TargetID="drop-area"/>
        <GridPageSettings PageSize="20"/>
        <GridGroupSettings 
            Columns="@(["PurchaseOrder"])" 
            ShowToggleButton="true" 
            DisablePageWiseAggregates="true" 
            EnableLazyLoading="true" 
            ShowGroupedColumn="true" 
            ShowDropArea="true"
        >
            <CaptionTemplate>
                @{
                    var purchaseOrder = (context as CaptionTemplateContext);
                    
                    <div class="flex items-center w-full h-8">
                        <div>@purchaseOrder.Key</div>
                    </div>
                }
            </CaptionTemplate>
        </GridGroupSettings>
        <GridColumns>
            <GridColumn Field="@nameof(AvailableLoads.Id)" IsPrimaryKey="true" Visible="false"/>
            <GridColumn Field="@nameof(AvailableLoads.PurchaseOrder)" HeaderText="Purchase Order">
                <Template>
                    @{
                        var load = context as AvailableLoads;
                        <div class="flex flex-col py-1 pr-2">
                            <div class="text-sm underline">
                                @load.Reference - @load.Collection.ToString("dd MMM yyyy") - @load.Delivery.ToString("dd MMM yyyy")
                            </div>
                            <div class="flex justify-between">
                                <div class="text-sm underline">Collect:</div>
                                <div class="text-sm">@load.CollectionAddress</div>
                            </div>
                            <div class="flex justify-between">
                                <div class="text-sm underline">Deliver:</div>
                                <div class="text-sm">@load.DeliveryAddress</div>
                            </div>
                        </div>
                    }
                </Template>
            </GridColumn>
        </GridColumns>
    </SfGrid>
</div>

 

[Naveen Palanivel]

Thanks for the patience issue, 

We have confirmed this an issue and logged the defect report “In the grid, using a percentage height with infinite scrolling and lazy loading throws exceptions when expanding a group” for the same and this fix will be included in our upcoming patch release which is expected to be rolled out on or before 17^th September  2024 .

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.    
  

In the grid, using a percentage height with infinite scrolling and lazy loading throws exceptions when expandi in Blazor | Feedback Portal (syncfusion.com)

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”

We will get back to you once the release is rolled out. Until then we appreciate your patience

[Naveen Palanivel]

Hi Hanu

We sincerely apologize for any inconvenience and delay you may have experienced.

We were unable to include this fix in yesterday's volume 3 2024  release. However, we want to assure you that the fix will be included in our upcoming patch release, scheduled for on or before September 24th, 2024. Thank you for your understanding. Until then, we appreciate your patience.

Regards,
Naveen

[Hanu Feenstra]

Good day.

Thank you for the feedback.

I am looking forward to the update.

Regards.

Hanu.

[Prathap Senthil]

Sorry for the inconvenience caused,

The reported issue was fixed but we were unable to include this fix in yesterday's patch release. However, we want to assure you that the fix will be included in our weekly patch release, scheduled for on or before October 1st, 2024. We appreciate your patience and understanding in the meantime. Thank you.

Until then we appreciate your patience.

[Prathap Senthil]

Thanks for your patience,

We are glad to announce that, we have included the fix for the issue  “In the grid, using a percentage height with infinite scrolling and lazy loading throws exceptions when expanding a group” in our 27.1.51 release.  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the NuGet package for latest fixes and features from below.

NuGet : https://www.nuget.org/packages/Syncfusion.Blazor.Grid

Root cause : The issue occurs because, during the initial rendering, LazyLoadPageSize and LazyLoadBlockSize are calculated based on the row height and the parent height. When the parent height is set to 100%, this calculation returns a negative value. As a result, incorrect values are used to fetch the child items while expanding the caption row, leading to the observed issue.

Action Taken: Prevented the occurrence of negative values in the SetLazyLoadPageSize() method during initial rendering. Also, prevented the execution of the call when the list is empty to avoid exceptions caused by ElementAt() by ensuring ExpandRow.Any(). Additionally, when the grid height is 100%, a client call is made in the LazyExpandCollapse() method, which is triggered when expanding any caption to recalculate the LazyLoadPageSize, resolving the issue.Also optimized the code in the LazyExpand() previously var is used defined exact type and minimized the multiple AsQuerable() conversion.