How to prevent columns "jumping" at page load

[Michael Østerberg]

I have a grid with multiselect with check-boxes.

When I load the screen screen load once and then resizes the check-box column making the columns re-draw.

See attached video.

Is it possible to prevent this page refresh/re-load/jumping?

This is my grid code:

 <SfGrid @ref="@Grid"

                    DataSource="@ServiceAgreementViewModels"

                    AllowSelection="true"

                    AllowGrouping="true"

                    AllowSorting="true"

                    AllowFiltering="true"

                    AllowResizing="true"

                    EnableHover="false"

                    ContextMenuItems="ContextMenuItems"

                    Toolbar="Toolbaritems">

                <GridEvents OnToolbarClick="ToolbarClickHandler" ContextMenuItemClicked="ContextMenuItemClickedHandler" TValue="ServiceAgreementViewModel"></GridEvents>

                <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

                <GridPageSettings PageSize="40"></GridPageSettings>

                <GridSelectionSettings CheckboxOnly="true" PersistSelection="true" Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

                <GridGroupSettings Columns="@GroupedColumns" ShowDropArea="false">

                    <CaptionTemplate>

                        @{

                            var item = (context as CaptionTemplateContext);

                            <div>@item.Key</div>

                        }

                    </CaptionTemplate>

                </GridGroupSettings>

                <GridColumns>

                    <GridColumn Field=@nameof(ServiceAgreementViewModel.ID) HeaderText="ID" Visible="false" IsPrimaryKey="true"></GridColumn>

                    <GridColumn Type="ColumnType.CheckBox" AllowFiltering="false" AllowSorting="false" Width="30"></GridColumn>

                    

                    <GridColumn Field=@nameof(ServiceAgreementViewModel.Name) HeaderText="Serviceaftale" Width="150">

                        <Template>

                            @{

                                var item = (context as ServiceAgreementViewModel);

                                <div>

                                    <div @onclick="@(() => EditServiceDescriptions(item))" class="mouse-pointer">@item.Name</div>

                                </div>

                            }

                        </Template>

                    </GridColumn>

                    <GridColumn Field=@nameof(ServiceAgreementViewModel.AfdelingName) HeaderText="Afdeling" Width="150"></GridColumn>

                    <GridColumn Field=@nameof(ServiceAgreementViewModel.TeamName) HeaderText="Team" Width="100"></GridColumn>

                    <GridColumn AllowFiltering="false" AllowSorting="false" Width="30">

                        <Template>

                            @{

                                var item = (context as ServiceAgreementViewModel);

                                <div @onclick="@(() => EditServiceAgreement(item))" class="col mouse-pointer"><i class="material-icons text-black-50">edit</i></div>

                            }

                        </Template>

                    </GridColumn>

                </GridColumns>

            </SfGrid>

Attachment: TeamFokus__Google_Chrome_20210127_095105_5bc5282e.zip

[Vignesh Natarajan]

Hi Michael,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Is it possible to prevent this page refresh/re-load/jumping?” 

 

We have analyzed your query and we are able to reproduce the reported behavior at our end also. We suggest you to overcome the reported query by removing the Width property for any one of the available (visible) column. Width for that particular column will determine based on the Grid remaining width left. 

 

We have prepared a sample using the above solution (removing the width for particular column), which can be downloaded from below 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161928/ze/Grid-2038450240  

 

Please get back to us with more details, if you have further queries. 

 

Regards, 

Vignesh Natarajan