We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Tab content does not fullfill the tab item surface

Thread ID:

Created:

Updated:

Platform:

Replies:

145577 Jun 28,2019 01:16 PM UTC Jul 8,2019 06:56 AM UTC Blazor 6
loading
Tags: Tabs
Brice FROMENTIN
Asked On June 28, 2019 01:16 PM UTC

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 [Syncfusion]
Replied On July 1, 2019 11:49 AM UTC

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(); 
    } 
} 
 
 
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
Replied On July 1, 2019 04:35 PM UTC

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
Replied On July 1, 2019 09:22 PM UTC

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 [Syncfusion]
Replied On July 2, 2019 05:04 PM UTC

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> 
 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


Brice FROMENTIN
Replied On July 6, 2019 10:20 AM UTC

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 [Syncfusion]
Replied On July 8, 2019 06:56 AM UTC

Hi Brice, 
 
Thanks for your update. Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon