Grid not rendered correctly on tab view

[Daniel Koffler]

Hello,

My Blazor page contains of a tab view with 2 tab items. On tab item #1 I put a grid. On tab item #2 I put some analysis/report. A toolbar allows to add items to the grid. If tab #2 is selected and I add new items and then switch back to the tab item #1 with the grid, the grid is not rendered correctly. (wrong height and therefore vertical scrollbars are shown, refer to screenshot attached).

If I explicitly call grid.Refresh()  after the respective tab was selected it is displayed correct again. However this results in a screen flickering which I would like to avoid.

Could you please explain what is needed to render the grid properly if updated while the tab is is placed on is not selected.

Thank you
Daniel

Attachment: gridrendering.jpg_ee3b9971.zip

[Naveen Palanivel]

Hi Daniel,

We checked your query , it seems that the grid not rendering correctly when switching tabs after adding items. Specifically, the grid's height is incorrect, and unwanted vertical scrollbars appear. We tested the scenario on our end using a simple sample, but we were unable to reproduce the issue. You can find the attached sample for your reference.

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

If the reported issue still reproduced, then kindly share the below details to validate further at our end.

1. Share us the full Grid code snippet and model class.
2. Please share the details if you are using virtualization or paging
3. Specify which type of CRUD operation you are using (e.g., batch, dialog, or normal), and how you are adding new rows (e.g., by entering values in the toolbar and clicking "Add," or using a button to insert rows without the grid going into edit form state)
4. Share us the video demonstration of the issue with elaborately, it will be more useful to us.
5. Share us a simple issue replicating sample or try to modify the above mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,
Naveen

[Daniel Koffler]

Hello,

I guess my solution has 2 main differences: Tab content and grid height = 100%. Grid has paging enabled. My tests showed that the issue just appears if paging is enabled.

Please find a simplified demo app for reproducing the error. 

• Open the page
• Click "Tab 2"
• Click "Load Data"
• Click "Tab 1"

Result: Grid is not rendered correctly anymore.

Let me know if you need anything else.

Thank you

Daniel

Attachment: BlazorApp1_8071a1f4.zip

[Naveen Palanivel]

Hi Daniel,

Thanks for update,

We have reviewed the attached sample, and the reported issue of the unwanted scrollbar being rendered is due to the custom class applied in the sample. To resolve this issue, please remove the custom class. If you prefer not to have a browser scrollbar and wish to apply scrolling specifically to the Grid, you can set a static height for the Grid or specify its height as 100% to make it fill its parent container. Note that setting the height to 100% requires the parent element of the Grid to have an explicit height. Alternatively, you can use the calc function to dynamically calculate and set the height based on the browser layout. For more details, refer to the following documentation:

Link : https://blazor.syncfusion.com/documentation/datagrid/scrolling

   <!--Main Content.-->

   <div class="position-relative flex-grow-1 overflow-auto">

       <SfTab

           @bind-SelectedItem="_selectedTabIndex"

           CssClass="h-100"

           LoadOn="ContentLoad.Demand"

           @ref="_tab">

           <TabEvents Created="@HandleTabCreated" Selected="@HandleTabSelected"></TabEvents>

           <TabAnimationSettings>

               <TabAnimationPrevious Effect="@_previousEffect"></TabAnimationPrevious>

               <TabAnimationNext Effect="@_nextEffect"></TabAnimationNext>

           </TabAnimationSettings>

           <TabItems>

               <TabItem>

                   <HeaderTemplate>Table</HeaderTemplate>

                   <ContentTemplate>

                       @if (_isTabCreated && _selectedTabs.Contains(0))

                       {

                             <SfGrid

      AllowFiltering="false"

      AllowFreezeLineMoving="false"

      AllowGrouping="@AllowGrouping"

      AllowMultiSorting="true"

      AllowPaging="true"

      AllowReordering="false"

      AllowResizing="true"

      AllowSelection="true"

      AllowSorting="true"

      ColumnMenuItems=@_columnMenuItems

      EnableColumnVirtualization="false"

      EnableVirtualMaskRow="false"

      EnableStickyHeader="true"

      EnableVirtualization="@EnableRowVirtualization"

      FrozenColumns="@FrozenColumns"

      GridLines="GridLine.Horizontal"

      Height="450"

      RowHeight="30"

      ShowColumnChooser="false"

      ShowColumnMenu="true"

      DataSource="ViewModel.Chargings"

      @ref="_dataGrid"

      TItem="Charging">

Regards,
Naveen

Attachment: BlazorApp1_c9a67a36.zip