sfgrid height increase with export button

[Thijs van Rijswijk]

Goodmornig,

Snippet of the grid:

    <SfGrid DataSource="@AllDates"

            AllowSorting="true"

            AllowPaging="false"

            EnableHover="false"

            AllowResizing="true"

            AllowExcelExport="false"

            Height="100%"

            Width="100%"

            @ref="DefaultGrid">

Made i component (ClockTimesComponent) from it an wrapped it in the following:

        <div class="myClockTimesComponentRow col-7 border rounded p-1" style="background-color: #ddd">

            <ClockTimesComponent />

        </div>

CSS snippet:

.myClockTimesComponentRow {

    width: 100%;

    height: 400px;

}

After adding the ExcelExport button 

    <SfButton OnClick="ExcelExport" Content="Excel Export"></SfButton>

    <SfGrid DataSource="@AllDates"

            AllowSorting="true"

            AllowPaging="false"

            EnableHover="false"

            AllowResizing="true"

            AllowExcelExport="false"

            Height="100%"

            Width="100%"

            @ref="DefaultGrid">

the grid height increases.

Hope you can help me out.

Best regards,

Thijs van Rijswijk

[Renjith Singh Rajendran]

Hi Thijs, 

Thanks for contacting Syncfusion support. 

We suggest you to add the below overflow style in your application to overcome this behavior you are facing. Please add the below style in your application. 

 

        <style> 

            .myClockTimesComponentRow { 

                width: 100%; 

                height: 400px; 

                overflow: auto; 

            } 

       </style> 

 

By default, Grid will be rendered by considering the height of the Grid’s parent div(400px). As now the button element also adds up to the Grids parent container, this pushed the Grid element below the button. But as the parent’s height is just 400px, but this contains the button and also Grid has rendered by respecting its parent container height(400px) this made the Grid to overflow its parent. So you can overcome this behavior by adding the above overflow:auto style in your application. 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-9468727 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran