Vertical scroll bar on DataGrid

[Michael Aston]

I'm getting a vertical scroll on the DataGrid when it is not required. How can I prevent it from being displayed?

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

@using Attribute = vx.Models.Attribute;

@namespace vx.Website.Components

<SfDialog ID="dlgDashBoardScopeAttributeEdit" Width="805px" IsModal="true" ShowCloseIcon=@true AllowDragging="true">

    <DialogEvents OnClose="@Close"></DialogEvents>

    <DialogTemplates>

        <Header>

            <span style="margin-right:5px;">@TString.value("Add attribute scope rule")</span>

            <div style="display:inline-block; padding-top: 4px; padding-bottom: 4px;">

                <SfTooltip ShowTipPointer="true">

                    <TooltipTemplates>

                        <Content>

                            Select blah blah blah

                        </Content>

                    </TooltipTemplates>

                    <span class="vx-icon-info"></span>

                </SfTooltip>

            </div>

        </Header>

        <Content>

            @if (AttributeSelections != null)

            {

                <SfGrid ID="AttributeScopeRuleGrid" TValue="AttributeSelection"  Toolbar="@(new List<string>() { "Search" })" AllowPaging="true" AllowSorting="true" AllowMultiSorting="true" AllowResizing="true" AllowTextWrap="true" EnablePersistence="false" Height="565px" @ref=@AttributeGrid>

                    <SfDataManager AdaptorInstance=@typeof(AttributeAdaptor) [email protected]></SfDataManager>

                    <GridPageSettings PageSizes=@PageSizes PageSize=@PageSize></GridPageSettings>

                    <GridTemplates>

                        <EmptyRecordTemplate Context="EmptyRecordTemplateContext">

                            <span>@RecordsText</span>

                        </EmptyRecordTemplate>

                    </GridTemplates>

                    <GridColumns>

                        <GridColumn Width="5%">

                            <HeaderTemplate Context="ScopeAttributeContext">

                                <div>

                                    <SfCheckBox TChecked="bool" Indeterminate=@SelectAllIndeterminateState @bind-Checked=@SelectAllCheckState @onchange=@AttributeSelectAll></SfCheckBox>

                                </div>

                            </HeaderTemplate>

                            <Template Context="ScopeAttributeContext">

                                @{

                                    AttributeSelection AttributeSelectionObj = (ScopeAttributeContext as AttributeSelection);

                                    <div>

                                        <SfCheckBox @[email protected] @onchange=@AttributeSelectItemCheckState></SfCheckBox>

                                    </div>

                                }

                            </Template>

                        </GridColumn>

                        <GridColumn Field="AttributeObj.DisplayId" [email protected]("ID") Width="15%" />

                        <GridColumn Field="AttributeObj.Name" [email protected]("Name") Width="60%" />

                        <GridColumn [email protected]("Value") Width="20%">

                            <Template Context="ScopeAttributeContext">

                                @{

                                    AttributeSelection AttributeSelectionObj = (ScopeAttributeContext as AttributeSelection);

                                    <div>

                                        <span style="vertical-align: text-bottom; margin-right:5px;">@TString.value("Yes")</span>

                                        <SfSwitch EnableRtl="true" @[email protected]></SfSwitch>

                                        <span style="vertical-align: text-bottom; margin-left:5px;">@TString.value("No")</span>

                                    </div>

                                }

                            </Template>

                        </GridColumn>

                    </GridColumns>

                </SfGrid>

            }

            <div class="e-footer-content">

                <SfButton type="button" class="e-control e-btn" OnClick=@(() => this.CloseCallback.InvokeAsync())>@TString.value("Cancel")</SfButton>

                <SfButton type="submit" class="e-control e-btn e-primary" OnClick=@Submit>@TString.value("Add")</SfButton>

            </div>

        </Content>

    </DialogTemplates>

</SfDialog>

[Rahul Narayanasamy]

Hi Michael, 

Greetings from Syncfusion. 

Query: Vertical scroll bar on DataGrid - I'm getting a vertical scroll on the DataGrid when it is not required. How can I prevent it from being displayed? 

We have validated your query and you don’t want to show the vertical scrollbar when it is not required(small amount of records present when height is explicitly set). Here, we have prepared a sample based on your requirement. 

We have achieved your requirement by using DataBound event. We have dynamically change the Grid Height property based on the number of records in the Grid to achieve your requirement. Find the below code snippets and sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/165551/ze/SampleGrid1211278686  

You can check this requirement by changing the number of records in the Grid using button click(rendered above Grid in dialog). 

 

 

<SfButton @onclick="@OpenDialog">Open Dialog</SfButton> 

 

<SfDialog Width="800px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogTemplates> 

        <Header> Dialog </Header> 

        <Content> 

            <button @onclick="Data2">Set 2 Records</button> 

            <button @onclick="Data3">Set 3 Records</button> 

            <button @onclick="Data4">Set 4 Records</button> 

            <button @onclick="Data1">Set 10 Records</button> 

 

            <SfGrid @ref="DefaultGrid" DataSource="@Orders" Height="@GridHeight" RowHeight="@GridRowHeight"> 

                <GridEvents DataBound="DataBoundHandler" TValue="Order"></GridEvents> 

                <GridColumns> 

                    . . . 

                </GridColumns> 

            </SfGrid> 

        </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" /> 

        <DialogButton Content="Cancel" OnClick="@CloseDialog" /> 

    </DialogButtons> 

</SfDialog> 

 

 

@code{ 

    private SfGrid<Order> DefaultGrid; 

    public string GridHeight = "auto";          //set default height as auto 

    public double MaxGridHeight { get; set; } = 250;   //define max height- (when the number of records * grid row height - is exceed then scrollbar will appear) 

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

    double GridRowHeight { get; set; } = 40; 

 

    . . . 

 

    public async Task DataBoundHandler() 

    { 

        int count = (await DefaultGrid.GetCurrentViewRecords()).Count();   //get current view records count 

        double CalcultedHeight = count * GridRowHeight;     //calculate the height with number of records and Grid Row height 

        GridHeight = CalcultedHeight < MaxGridHeight ? "auto" : MaxGridHeight.ToString();   //set the Grid height based on the calculated height and Grid max height 

    } 

} 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/events/#databound 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetCurrentViewRecords 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Michael Aston]

Sorry this doesn't work for me as the height of the rows is unknown due to column wrapping and detail templates.

Don't understand why the scrollbar is display when its clear its not required.

[Rahul Narayanasamy]

Hi Michael, 

Thanks for the update. 

By default, the Grid scrollbar will appear when we explicitly setting the Grid height. If the record count is smaller than the Grid height, the empty scrollbar will be appear in Grid. This is the default behavior.  

Based on your requirement we have prepared a sample to achieve your requirement even if we do not know the exact row height. We have achieved this requirement by calling an interop function in DataBound event of the Grid. Find the below code snippets and sample for your reference. 

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.Popups 

@using Syncfusion.Blazor.Buttons 

@inject IJSRuntime Runtime 

 

 

<SfButton @onclick="@OpenDialog">Open Dialog</SfButton> 

 

<SfDialog Width="800px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogTemplates> 

        <Header> Dialog </Header> 

        <Content> 

            <button @onclick="Data2">Set 2 Records</button> 

            <button @onclick="Data3">Set 3 Records</button> 

            <button @onclick="Data4">Set 4 Records</button> 

            <button @onclick="Data1">Set 10 Records</button> 

 

            <SfGrid ID="Grid" @ref="DefaultGrid" DataSource="@Orders" Height="300"> 

                <GridEvents DataBound="DataBoundHandler" TValue="Order"></GridEvents> 

                <GridColumns> 

                    . . . 

                </GridColumns> 

            </SfGrid> 

        </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" /> 

        <DialogButton Content="Cancel" OnClick="@CloseDialog" /> 

    </DialogButtons> 

</SfDialog> 

 

 

@code{ 

    private SfGrid<Order> DefaultGrid; 

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

 

    . ..  

 

    public async Task DataBoundHandler() 

    { 

        await Runtime.InvokeVoidAsync("hideScroll", DefaultGrid.ID);  // called interop function for show /hide the scrollbar 

    } 

} 

[Interop.js] 

function hideScroll(id) { 

    var gridContent = document.getElementsByClassName("e-content")[0]; 

    var scrollHeight = document.getElementById(id + "_content_table").scrollHeight; 

    if (scrollHeight < gridContent.clientHeight) { 

        gridContent.style.overflowY = "auto"; 

        document.getElementsByClassName("e-gridheader")[0].style.paddingRight = ""; 

    } else { 

        document.getElementsByClassName("e-gridheader")[0].style.paddingRight = "16px"; 

    } 

} 

[_Host.cshtml] 

<head> 

    . . .> 

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 

    <script src="~/Interop.js"></script> 

</head> 

Sample: https://www.syncfusion.com/downloads/support/forum/165551/ze/Sample-621916405  

Please let us know if you have any concerns. 

Regards, 

Rahul