Datagrid inside a DashboardLayoutPanel Overlaps that panel

[Medupi Ramaboea]

I created multiple panels and would like that when ever I add a Datagrid and other component's within the Panel those components including the Datagrid should not overlap the panel.

Because I would like the Datagrid to be responsive I made use of the  EnableAdaptiveUI property.
When using that property you need to have the Width and the Height of the Datagrid should be 100%, which then makes the Datagrid take up the full width and height of the panel. 

How can I prevent the Datagrid from overlapping the Panel.

If you look at the screenshot below you will see how the Datagrid overlaps the Panel.

Code(attached the sample code):
@page "/test"

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Layouts

<div class="content">

    <SfDashboardLayout Columns="8" CellSpacing="@(new double[]{10 ,10 })">

        <DashboardLayoutPanels>

            <DashboardLayoutPanel Id="1" SizeX="4" SizeY="2" Column=0 Row=1>

                <HeaderTemplate><div>Panel 1</div></HeaderTemplate>

                <ContentTemplate>

                    <SfGrid

                        DataSource="@Orders"

                        AllowSorting="true"

                        AllowFiltering="true"

                        EnableAdaptiveUI="true"

                        AllowTextWrap="true"

                        RowRenderingMode="RowDirection.Vertical"

                        Height="100%"

                        Width="100%">

                        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>

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

                    </SfGrid>

                </ContentTemplate>

            </DashboardLayoutPanel>

            <DashboardLayoutPanel Id="2" SizeX="4" SizeY="2" Column=4 Row=1>

                <HeaderTemplate><div>Panel 2</div></HeaderTemplate>

                <ContentTemplate>

                    <SfGrid

                        DataSource="@Orders"

                        AllowSorting="true"

                        AllowFiltering="true"

                        EnableAdaptiveUI="true"

                        AllowTextWrap="true"

                        RowRenderingMode="RowDirection.Vertical"

                        Height="100%"

                        Width="100%">

                        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>

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

                    </SfGrid>

                </ContentTemplate>

            </DashboardLayoutPanel>

            <DashboardLayoutPanel Id="3" SizeX="4" SizeY="2" Column=0 Row=2>

                <HeaderTemplate><div>Panel 3</div></HeaderTemplate>

                <ContentTemplate>

                    <SfGrid

                        DataSource="@Orders"

                        AllowSorting="true"

                        AllowFiltering="true"

                        EnableAdaptiveUI="true"

                        AllowTextWrap="true"

                        RowRenderingMode="RowDirection.Vertical"

                        Height="100%"

                        Width="100%">

                        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>

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

                    </SfGrid>

                </ContentTemplate>

            </DashboardLayoutPanel>

            <DashboardLayoutPanel Id="4" SizeX="4" SizeY="2" Column=4 Row=2>

                <HeaderTemplate><div>Panel 4</div></HeaderTemplate>

                <ContentTemplate>

                    <SfGrid

                        DataSource="@Orders"

                        AllowSorting="true"

                        AllowFiltering="true"

                        EnableAdaptiveUI="true"

                        AllowTextWrap="true"

                        RowRenderingMode="RowDirection.Vertical"

                        Height="100%"

                        Width="100%">

                        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>

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

                    </SfGrid>

                </ContentTemplate>

            </DashboardLayoutPanel>

        </DashboardLayoutPanels>

    </SfDashboardLayout>

</div>

@code{

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

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 20).Select(x => new Order()

        {

            OrderID = 0 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

    }

}

Attachment: DatagridWithPanels_cbe497d0.zip

[Monisha Saravanan]

Hi Medupi,

Greetings from Syncfusion support.

We have checked your query and we suggest you to set Height and Width properties as 100% for the parent container. In your shared sample we could see that the parent container of the Grid component starts halfway on the panel height. So we suggest you to set the remaining height to the component to overcome the adjustment issue. Also, kindly ensure to set the overflow CSS property to Auto. Please refer the modified sample and code snippet for your reference.

<div class="content">

    <SfDashboardLayout Columns="8" CellSpacing="@(new double[]{10 ,10 })">

        <DashboardLayoutPanels>

            <DashboardLayoutPanel Id="1" SizeX="4" SizeY="2" Column=0 Row=1>

                <HeaderTemplate><div>Panel 1</div></HeaderTemplate>

                <ContentTemplate>

                    <SfGrid DataSource="@Orders"

                            AllowSorting="true"

                            AllowFiltering="true"

                            EnableAdaptiveUI="true"

                            AllowTextWrap="true"

                            RowRenderingMode="RowDirection.Vertical"

                            ID="gridContainer"

                            Width="100%">                      

        </DashboardLayoutPanels>

    </SfDashboardLayout>

</div>

 

 

<style>

    #gridContainer {

        overflow: auto;

        height: 87%;

        position: absolute;

    }

</style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSample586594354.zip

Kindly get back to us if you have further queries.

Regards,

Monisha