Search results

Populate Tab items and their content through ViewBag

For the Tab control, the tab items can be rendered in the controller and can be returned as ViewBag to bind as items. You can also map the content to other contents using the mapping id in controller to return as ViewBag. Please refer to the below sample, which takes chart, grid, calender as its content through viewBag content id mapped in view.

razor
viewbag.cs
@using Syncfusion.EJ2.Navigations;

<div class="info">
    Tab content loaded from ViewBag
</div>

<div id="Content1" style="display: none">
    @(Html.EJS().Chart("ej2chart")
        .Width("100%")
        .Height("100%")
        .Series(series =>
        {
            series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).
            Marker(mr => mr.Visible(true)).
            XName("x").
            YName("yValue").
            DataSource(ViewBag.dataSource).
            Name("Gold").
            Width(2).Add();
        })
        .PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
        .Title("Olympic Medal Counts - RIO")
        .Render()
    )
</div>

<div id="Content2" style="display: none">
    @(Html.EJS().Grid("ej2grid")
        .DataSource(dataManger =>
        {
            dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/Products").CrossDomain(true).Adaptor("ODataV4Adaptor");
        })
        .Columns(col =>
        {
            col.Field("ProductID").HeaderText("Product ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
            col.Field("ProductName").HeaderText("Product Name").Width("150").Add();
            col.Field("UnitPrice").HeaderText("Supplier ID").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
            col.Field("UnitsInStock").HeaderText("QuantityPerUnit").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
            col.Field("Discontinued").HeaderText("Discontinued").Width("140").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Type("boolean").DisplayAsCheckBox(true).Add();
        })
        .AllowPaging()
        .Render()
    )
</div>

<div id="Content3" style="display: none">
    @Html.EJS().Calendar("ej2calendar").Render()
</div>

@Html.EJS().Tab("ej2Tab").Items(ViewBag.items).Render()
public ActionResult Index()
{
    List<TabTabItem> tabItems = new List<TabTabItem>();
    tabItems.Add(new TabTabItem { Header = new TabHeader { Text = "Chart" }, Content = "#Content1" });
    tabItems.Add(new TabTabItem { Header = new TabHeader { Text = "Grid" }, Content = "#Content2" });
    tabItems.Add(new TabTabItem { Header = new TabHeader { Text = "Calender" }, Content = "#Content3" });
    ViewBag.items = tabItems;
    //chart data
    List<ColumnChartData> chartData = new List<ColumnChartData>
    {
        new ColumnChartData { x= "USA", yValue= 46 },
        new ColumnChartData { x= "GBR", yValue= 27 },
        new ColumnChartData { x= "CHN", yValue= 26 }
    };
    ViewBag.dataSource = chartData;
    return View();
}

public class ColumnChartData
{
    public string x;
    public double yValue;
}

Output be like the below.

content template