How to render tab control with different grids as tab items ?

1 min read

Description

To add different Grid control inside each tab item in a Tab control, we can use the tab’s content template property.

Solution

Define a Tab control and add item to the tab using Items property. For each tab item define the Grid control using ContentTemplate property.

Refer the following code to render different Grids inside each tab items:

[CSHTML]

     @{Html.EJ().Tab("defaultTabs").Items(data =>
           {
               data.Add().ID("Orders").Text("Tab1").ContentTemplate(@<div>
                   @(Html.EJ().Grid<object>("Grid1")
                        .Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/")
                        .AllowPaging()
                        .PageSettings(page => { page.PageSize(5); })
                        .Columns(col =>
                        {
                            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
                            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
                            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
                            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
                            col.Field("ShipCity").HeaderText("Ship City").Width(80).Add();
                            col.Field("OrderDate").Format("{0:MM/dd/yyyy}").Width(80).TextAlign(TextAlign.Right).Add();
                            col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
                        }))
               </div>);
               data.Add().ID("Employees").Text("Tab2").ContentTemplate(@<div>
                  @(Html.EJ().Grid<object>("Grid2")
                        .Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Employees/")
                        .AllowPaging()
                        .PageSettings(page => { page.PageSize(5); })
                        .Columns(col =>
                        {
                            col.Field("LastName").HeaderText("LastName").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
                            col.Field("FirstName").HeaderText("FirstName").Width(90).Add();
                            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
                            col.Field("Title").HeaderText("Title").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
                            col.Field("City").HeaderText("City").Width(80).Add();
                            col.Field("Country").HeaderText("Country").Width(100).Add();
                        }))
               </div>);
               data.Add().ID("Customers").Text("Tab3").ContentTemplate(@<div>
                  @(Html.EJ().Grid<object>("Grid3")
                        .Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Customers/")
                        .AllowPaging()
                        .PageSettings(page => { page.PageSize(5); })
                        .Columns(col =>
                        {
                            col.Field("CompanyName").HeaderText("CompanyName ").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
                            col.Field("CustomerID").HeaderText("Customer ").Width(90).Add();
                            col.Field("ContactName").HeaderText("ContactName ID").TextAlign(TextAlign.Right).Width(90).Add();
                            col.Field("ContactTitle").HeaderText("ContactTitle").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
                            col.Field("City").HeaderText("City").Width(80).Add();
                            col.Field("Country").HeaderText("Country").Width(100).Add();
                        }))
               </div>);
           }).Render();}

Output of the above code,

Tab item 1 is active with Grid 1