Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
145577 | Jun 28,2019 01:16 PM UTC | Jul 8,2019 06:56 AM UTC | Blazor | 6 |
![]() |
Tags: Tabs |
@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"); } } |
<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();
}
} |
#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"); } } |
<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>
|
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.
This page will automatically be redirected to the sign-in page in 10 seconds.