SGGrid Inside Dashboard Layout

[VINIT GANDHI]

Hello - Code works as expected when no GridColumns of SFGrid is mention inside SFDashboardLayout.

When i define columns inside DashboardLayout, nothing is displayed.

If i put same grid outside of dashboard layout, it works well. With defined columns and without defined columns

Code that Works

@page "/"
@inject BlazorEnerRocketSizing.Data.ISizingServices serviceSizing
@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Grids
@using BlazorEnerRocketSizing.Models

<SfDashboardLayout CellSpacing="@(new double[] { 10, 10 })" Columns="6" CellAspectRatio="2" AllowResizing="true">
    <DashboardLayoutPanels>
        <DashboardLayoutPanel Col="0">
            <HeaderTemplate><div>UPS</div></HeaderTemplate>
            <ContentTemplate>
                <div style="height:100%;width:100%">
                    <SfGrid DataSource="@varUPSData">
                    
                    </SfGrid>
                </div>

            </ContentTemplate>
        </DashboardLayoutPanel>
        <DashboardLayoutPanel Col="1">
            <HeaderTemplate><div>UPS Brands</div></HeaderTemplate>
            <ContentTemplate>
                <div style="height:100%; width:100%;">
                    <SfGrid DataSource="@varUPSBrands">

                    </SfGrid>
                </div>

            </ContentTemplate>
        </DashboardLayoutPanel>
    </DashboardLayoutPanels>
</SfDashboardLayout>

<style>
    .e-panel-header {
        background-color: rgba(0, 0, 0, .1);
        text-align: center;
    }

    .e-panel-content {
        text-align: center;
        margin-top: 10px;
    }
</style>

@code {
    List<Ups> varUPSData = new List<Ups>();
    List<Upsbrand> varUPSBrands = new List<Upsbrand>();

    protected override async Task OnInitializedAsync()
    {
        varUPSData = await serviceSizing.GetUPS();
        varUPSBrands = await serviceSizing.GetUPSBrands();
    }
}

Code That Doesnt Work

@page "/"
@inject BlazorEnerRocketSizing.Data.ISizingServices serviceSizing
@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Grids
@using BlazorEnerRocketSizing.Models

<SfDashboardLayout CellSpacing="@(new double[] { 10, 10 })" Columns="6" CellAspectRatio="2" AllowResizing="true">
    <DashboardLayoutPanels>
        <DashboardLayoutPanel Col="0">
            <HeaderTemplate><div>UPS</div></HeaderTemplate>
            <ContentTemplate>
                <div style="height:100%;width:100%">
                    <SfGrid DataSource="@varUPSData">
                        <GridColumns>
                            <GridColumn Field=@nameof(Ups.Upsname)></GridColumn>
                            <GridColumn Field=@nameof(Ups.Kva) HeaderText="KVA"></GridColumn>
                            <GridColumn Field=@nameof(Ups.MinBatteries) HeaderText="MIN"></GridColumn>
                            <GridColumn Field=@nameof(Ups.MaxBatteries) HeaderText="MAX"></GridColumn>
                        </GridColumns>
                    </SfGrid>
                </div>

            </ContentTemplate>
        </DashboardLayoutPanel>
        <DashboardLayoutPanel Col="1">
            <HeaderTemplate><div>UPS Brands</div></HeaderTemplate>
            <ContentTemplate>
                <div style="height:100%; width:100%;">
                    <SfGrid DataSource="@varUPSBrands">

                    </SfGrid>
                </div>

            </ContentTemplate>
        </DashboardLayoutPanel>
    </DashboardLayoutPanels>
</SfDashboardLayout>

<style>
    .e-panel-header {
        background-color: rgba(0, 0, 0, .1);
        text-align: center;
    }

    .e-panel-content {
        text-align: center;
        margin-top: 10px;
    }
</style>

@code {
    List<Ups> varUPSData = new List<Ups>();
    List<Upsbrand> varUPSBrands = new List<Upsbrand>();

    protected override async Task OnInitializedAsync()
    {
        varUPSData = await serviceSizing.GetUPS();
        varUPSBrands = await serviceSizing.GetUPSBrands();
    }
}

[Sowmiya Padmanaban]

Hi Vinit,  

 

We have validated your reported problem using your shared code snippet. But, we are unable to reproduce it as Grid component is correctly rendered inside the DashboardLayout component.  

 

Refer the below code snippet. 

 

   <div> 

        <SfDashboardLayout CellSpacing="@(new double[] { 10, 10 })" Columns="6"  CellAspectRatio="2"  AllowResizing="true"> 

            <DashboardLayoutPanels> 

                <DashboardLayoutPanel Col="0" Row="0" SizeX="2" SizeY="2"> 

                    <HeaderTemplate><div>UPS</div></HeaderTemplate> 

                    <ContentTemplate> 

                        <div style="height:100%;width:100%"> 

                            <SfGrid DataSource="@varUPSData" Height="100%"> 

                                <GridColumns> 

                                    <GridColumn Field=@nameof(Ups.Upsname)></GridColumn> 

                                    <GridColumn Field=@nameof(Ups.Kva) HeaderText="KVA"></GridColumn> 

                                    <GridColumn Field=@nameof(Ups.MinBatteries) HeaderText="MIN"></GridColumn> 

                                    <GridColumn Field=@nameof(Ups.MaxBatteries) HeaderText="MAX"></GridColumn> 

                                </GridColumns> 

                            </SfGrid> 

                        </div> 

 

                    </ContentTemplate> 

                </DashboardLayoutPanel> 

            </DashboardLayoutPanels> 

        </SfDashboardLayout> 

    </div> 

  

Refer the below output screenshot. 

 

 

For your reference, we have prepared a sample using your shared code snippet. Please, download the sample from the following link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-538896791.zip 

 

Refer the below links to know more about DashboardLayout  component 

 

UG documentation –https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started/ 

 

Demo link –https://blazor.syncfusion.com/demos/dashboard-layout/seo?theme=bootstrap4 

 

API Reference - https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html 

 

If the issue still persist, can you please share the below details. It will help us to resolve your issue at the earliest. 

 

·       Code snippet of  data source for Grid component. 

 

·       Video footage of your problem. 

 

·       If possible, reproduce the issue in attached sample. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P