Search results

Render the Tab using content template

You can bind any data in Tab items, by simply using the content template property in ASP.NET Tab.

In the below demo, the tab items are given as chart, grid, calender using the content template. In the content template you can give the header using e-tab-header and content using e-content class.

razor
contenttemplate.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Navigations;
@section ControlsSection{   
<div class="col-lg-12 control-section">
	<div class="e-sample-resize-container">
		<div class="info">
			Content Template
		</div>

		<br /><br />
            @Html.EJS().Tab("ej2Tab").Selected("selected").Created("oncreate").ContentTemplate(@<div>
              <div class="e-tab-header">
                  <div>Chart</div>
                  <div>Grid</div>
                  <div>Calendar</div>
              </div>
              <div class="e-content">
                  <div>
                      @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").Load("onChartLoad").Render()

                  </div>
                  <div>
                      @Html.EJS().Grid("ej2grid").Height("400px").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>
                      @Html.EJS().Calendar("ej2calendar").Render()
                  </div>

              </div>
          </div>).HeightAdjustMode(HeightStyles.Content).OverflowMode(OverflowMode.Scrollable).Render()

        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult contenttemplate()
        {
            return View();
        }
    }
}

Output be like the below.

content template