Category / Section
How to render grid inside Tab Component in ASP.NET Core
1 min read
Solution
To render a Grid component within the Tab Component, using the content template property of ASP.NET EJ2 Tab.
Render the Two Grids in different tabs
Under the e-content-template of the e-tab-tabitem, add the required number of tab headers and required e-content elements.
<ejs-tab id="ej2Tab" width="500px" heightAdjustMode="Auto" overflowMode="Scrollable">
<e-tab-tabitems>
<e-tab-tabitem>
<e-content-template>
<div>
<div class="e-tab-header">
<div>Grid 1</div>
<div>Grid 2</div>
</div>
<div class="e-content">
<div>
<ejs-grid id="EJ2Grid1" height="500" allowPaging="true" allowGrouping="true">
<e-grid-groupSettings showDropArea="true" columns="@(new string[] { "ProductID", "ProductName"})"></e-grid-groupSettings>
<e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/Products" crossdomain="true" adaptor="ODataV4Adaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="ProductID" headerText="Product ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="ProductName" headerText="Product Name" width="150"></e-grid-column>
<e-grid-column field="UnitPrice" headerText="Supplier ID" textAlign="Right" width="130"></e-grid-column>
<e-grid-column field="UnitsInStock" headerText="QuantityPerUnit" format="C2" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="Discontinued" headerText="Discontinued" width="140" textAlign="Center" type="boolean" displayAsCheckBox="true"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<div>
<ejs-grid id="EJ2Grid2" allowPaging="true">
<e-grid-pageSettings pageCount="3"></e-grid-pageSettings>
<e-data-manager url="https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders" adaptor="ODataAdaptor" crossdomain="true"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
</div>
</e-content-template>
</e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
Output
Figure 1: Grid inside the Tab items
Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridSample1457194105
