Grid Tab content does not fullfill the tab item surface

[Brice FROMENTIN]

Hello,

The grid on the second tab item dos not fullfill the tab item :

@page "/"

@using Syncfusion.EJ2.RazorComponents.Grids;
@using Syncfusion.EJ2.RazorComponents.Layouts;
@using Syncfusion.EJ2.RazorComponents.Navigations;

@inject ApplicationState Application
@inject HttpClient HttpClient

<style>
    #defaultLayout {
        padding: 10px;
    }

    .e-dashboardlayout.e-control .e-panel:hover span {
        display: block;
    }

    #defaultLayout .e-panel .e-panel-container .text-align {
        vertical-align: middle;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
    }

    .e-template-icon {
        padding: 10px;
        float: right;
        display: none;
    }

    .text-align {
        line-height: 160px;
    }

    .sb-demo-section .container-fluid {
        background: #E5E5E5;
    }

    .full-size {
        width: 100%;
        height: 100%
    }
</style>
<EjsTab ID="tabs" Height="100%" Width="100%">
    <TabItems>
        <TabItem Header="@header1" Content="#tab1" />
        <TabItem Header="@header2" Content="#tab2" />
        <TabItem Header="@header3" Content="#tab3" />
    </TabItems>
</EjsTab>

<div id="tab1" class="full-size">
    <EjsDashboardLayout id="defaultLayout" columns="5" allowResizing="true">
        <ChildContent>
            <div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">0</div>
                </div>
            </div>
            <div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">
                <div class="e-panel-container">
                    <div class="text-align">1</div>
                </div>
            </div>
            <div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">
                <div class="e-panel-container">
                    <div class="text-align">2</div>
                </div>
            </div>
            <div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">3</div>
                </div>
            </div>
            <div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">4</div>
                </div>
            </div>
            <div id="six" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">5</div>
                </div>
            </div>
            <div id="seven" class="e-panel" data-row="1" data-col="3" data-sizeX="1" data-sizeY="1">
                <div class="e-panel-container">
                    <div class="text-align">6</div>
                </div>
            </div>
            <div id="eight" class="e-panel" data-row="0" data-col="4" data-sizeX="1" data-sizeY="3">
                <div class="e-panel-container">
                    <div class="text-align">7</div>
                </div>
            </div>
        </ChildContent>
    </EjsDashboardLayout>
</div>

<div id="tab2" class="full-size">
    <EjsGrid id="Grid" Width="100%" Height="100%">
        <GridColumns>
            <GridColumn HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
            <GridColumn HeaderText="Customer Name" Width="150"></GridColumn>
            <GridColumn HeaderText="Order Date" Format="yMd" Type="date" Width="130"></GridColumn>
            <GridColumn HeaderText="Freight" Format="C2" Width="120"></GridColumn>
            <GridColumn HeaderText="Ship Country" Width="150"></GridColumn>
        </GridColumns>
    </EjsGrid>
</div>

<div id="tab3" class="full-size">
    <br /><br /><br />
    Nursery === @nurse
    <br /><br /><br />
</div>
@functions
{
    object header1 = new { text = "dashboard" };
    object header2 = new { text = "other" };
    object header3 = new { text = "rest" };

    object nurse;

    protected override async Task OnInitAsync()
    {
        var restClient = new RestClient(HttpClient);
        nurse = await restClient.GetAsync<object>("security/hello-nurse-secured");
    }
}

[Rahul Narayanasamy]

Hi Brice, 

 

Greetings from Syncfusion. 

 

Query: The grid on the second tab item dos not fullfill the tab item : 

 

We have validated your query and from your code snippets, we suspect that you want to render the grid within tab item(with 100% width & height).  

 

But in your code snippets, you have rendered the grid without defining the dataSource and Field of each column. If you have not provided dataSource to grid, then it is display as “No records to display”. In addition to that you have not specified Field property in column declaration. If the column Field is not specified in the dataSource, the column values will be empty. After providing dataSource and column declaration properly, then it will render the grid within tab item(100% width and Height). 

 

Here, we have prepared a sample(with latest NuGet version-17.1.0.53-beta and latest CDN(17.1.51)) based on your requirement. Please find the below code example and sample for your reference. 

 

[code example] 

 

<EjsTab ID="defaultTab"> 

    <TabItems> 

        <TabItem Header="@header1" Content="@content1"></TabItem> 

        <TabItem Header="@header2" Content="#tab2"></TabItem> 

        <TabItem Header="@header3" Content="@content3"></TabItem> 

    </TabItems> 

</EjsTab> 

 

<div id="tab2" style="display:none" class="full-size"> 

    <EjsGrid id="Grid" DataSource="@gridData" Width="100%" Height="100%"> 

        <GridColumns> 

            <GridColumn Field="OrderID" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

            <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="150"></GridColumn> 

            <GridColumn Field="OrderDate" HeaderText="Order Date" Format="yMd" Type="date" Width="130"></GridColumn> 

            <GridColumn Field="Freight" HeaderText="Freight" Format="C2" Width="120"></GridColumn> 

            <GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="150"></GridColumn> 

        </GridColumns> 

    </EjsGrid> 

</div> 

 

<style> 

... 

</style> 

 

@functions{ 

 

    public object header1 = new { text = "Twitter" }; 

    public object header2 = new { text = "Grid" }; 

    public object header3 = new { text = "Whatsapp" }; 

 

    public string content1 = "Twitter is..."; 

    public string content3 = "WhatsApp Messenger is a ..."; 

 

    public object gridData { get; set; } 

    protected override void OnInit() 

    { 

        gridData = OrdersDetails.GetAllRecords(); 

    } 

} 

 

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

 

If you still facing the same problem, could you please share the below details. It will be helpful to provide a better solution. 

 

• Please share Essential Studio JS 2 version details.
• Share the screenshot or video demonstration of the reported issue.
• Please share script error details if any error throws in the console.

 

Regards, 

Rahul 

[Brice FROMENTIN]

Thanks for your Sample, I just make two snapshot from your sample to explain my issue :

•  Small amount of records, definitely not use 100% height of the surface.
• Big amount of records, is more than 100%.

Do you understand what I mean ?

Regards.

Attachment: Snapshots_5956cf36.7z

[Brice FROMENTIN]

FYI,

I use the following CSS workaround to have the correct display :

#tabs {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 36px auto;
    width: 100%;
    height: 100%;
}

.e-tab .e-content .e-item
{
    height: 100%;
}

IMHO, the use of 'auto' for height for e-content and e-item does not allow to use the full surface. I use the 36px magic number defined by "material.css". I join you a snapshot to see the result. The razor side looks like :

@page "/"

@using Syncfusion.EJ2.RazorComponents.Grids;
@using Syncfusion.EJ2.RazorComponents.Layouts;
@using Syncfusion.EJ2.RazorComponents.Navigations;

@inject ApplicationState Application
@inject HttpClient HttpClient

<style>
    #defaultLayout {
        padding: 10px;
    }

    .e-dashboardlayout.e-control .e-panel:hover span {
        display: block;
    }

    #defaultLayout .e-panel .e-panel-container .text-align {
        vertical-align: middle;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
    }

    .e-template-icon {
        padding: 10px;
        float: right;
        display: none;
    }

    .text-align {
        line-height: 160px;
    }

    .sb-demo-section .container-fluid {
        background: #E5E5E5;
    }

    .full-size {
        width: 100%;
        height: 100%
    }

    #tabs {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 36px auto;
        width: 100%;
        height: 100%;
    }

    .e-tab .e-content .e-item {
        height: 100%;
    }
</style>
<EjsTab ID="tabs" Height="100%" Width="100%">
    <TabItems>
        <TabItem Header="@header1" Content="#tab1" />
        <TabItem Header="@header2" Content="#tab2" />
        <TabItem Header="@header3" Content="#tab3" />
    </TabItems>
</EjsTab>

<div style="visibility: hidden">
    <div id="tab1" class="full-size">
        <EjsDashboardLayout id="defaultLayout" columns="5" allowResizing="true">
            <ChildContent>
                <div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
                    <div class="e-panel-container">
                        <div class="text-align">0</div>
                    </div>
                </div>
                <div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">
                    <div class="e-panel-container">
                        <div class="text-align">1</div>
                    </div>
                </div>
                <div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">
                    <div class="e-panel-container">
                        <div class="text-align">2</div>
                    </div>
                </div>
                <div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">
                    <div class="e-panel-container">
                        <div class="text-align">3</div>
                    </div>
                </div>
                <div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">
                    <div class="e-panel-container">
                        <div class="text-align">4</div>
                    </div>
                </div>
            </ChildContent>
        </EjsDashboardLayout>
    </div>

    <div id="tab2" class="full-size">
        <EjsGrid id="Grid" Width="100%" Height="100%" DataSource=@dataSource>
            <GridColumns>
                <GridColumn HeaderText="Order ID" Field="Id" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                <GridColumn HeaderText="Order Date" Field="Date" Format="yMd" Type="date" Width="130"></GridColumn>
                <GridColumn HeaderText="Freight" Field="Freight" Format="C2" Width="120"></GridColumn>
                <GridColumn HeaderText="Ship Country" Field="Country" Width="150"></GridColumn>
            </GridColumns>
        </EjsGrid>
    </div>

    <div id="tab3" class="full-size">
        <br /><br /><br />
        Nursery === @nurse
        <br /><br /><br />
    </div>

</div>
@functions
{
    object header1 = new { text = "dashboard" };
    object header2 = new { text = "other" };
    object header3 = new { text = "rest" };
    List<object> dataSource = new List<object>()
{
        new {Id = Guid.NewGuid(), Date=DateTime.Now, Freight=12.45, Country="Moon"},
        new {Id = Guid.NewGuid(), Date=DateTime.Now, Freight=12.45, Country="NZ"},
        new {Id = Guid.NewGuid(), Date=DateTime.Now, Freight=12.45, Country="UK"}
    };


    object nurse;

    protected override async Task OnInitAsync()
    {
        var restClient = new RestClient(HttpClient);
        nurse = await restClient.GetAsync<object>("security/hello-nurse-secured");
    }
}

Attachment: Correct_Display_65ff770c.7z

[Rahul Narayanasamy]

Hi Brice, 

 

Thanks for your update. 

 

Query: The grid on the second tab item dos not fullfill the tab item 

 

We went through your screenshot that you have shared for us and it looks like you want to maintain the same container height for the Grid which has minimum/Maximum records. If so, we suggest you to set the desired Height to parent container of the grid.  

 

For your scenario, you can achieve your requirement by using below way or you can use your own workaround.  

 

[code example] 

 

 

<EjsTab ID="defaultTab" @ref="sourceTab"> 

    <TabItems> 

        <TabItem Header="@header1" Content="@content1"></TabItem> 

        <TabItem Header="@header2" Content="#tab2"></TabItem> 

        <TabItem Header="@header3" Content="@content3"></TabItem> 

    </TabItems> 

</EjsTab> 

 

<div id="tab2" style="display:none" class="full-size"> 

    <div style="height: 600px"> 

    <EjsGrid @ref="@defaultGrid" DataSource="@gridData" Height="100%" Width="100%"> 

        <GridColumns> 

            <GridColumn Field="OrderID" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

            <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="150"></GridColumn> 

            <GridColumn Field="OrderDate" HeaderText="Order Date" Format="yMd" Type="date" Width="130"></GridColumn> 

            <GridColumn Field="Freight" HeaderText="Freight" Format="C2" Width="120"></GridColumn> 

            <GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="150"></GridColumn> 

        </GridColumns> 

    </EjsGrid> 

    </div> 

</div> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorGridHeight-1586427942 

 

Help Documentation: https://ej2.syncfusion.com/aspnet-core-blazor/documentation/grid/scrolling/?no-cache=1#responsive-with-parent-container  

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul 

[Brice FROMENTIN]

Thx, I will continue on the css workaround. I think an optional "Height" attributes on <TabItems/> should be great, or that the "Height" of EjsTab should cascade to its children, it make sense on a CSS point of view.

For those interested, here's now what I do :

[css]
.tab-workaround {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 36px auto;
    width: 100%;
    height: 100%;
}

.e-tab .e-content .e-item {
    height: 100%;
}

[razor]

<EjsTab ID="tabs" Height="100%" Width="100%" CssClass="tab-workaround">
    <TabItems>
        <TabItem Header="@header1" Content="#user-search" />
        <TabItem Header="@header2" Content="#user-header" />
        <TabItem Header="@header3" Content="#user-children" />
    </TabItems>
</EjsTab>

[Rahul Narayanasamy]

Hi Brice, 

 

Thanks for your update. Please get back to us if you need further assistance. 

 

Regards, 

Rahul