Change Kendo Grid column names based on Tab selection

[Chandra]

Hi,
   
  I am using below code to display Kendo Grid inside Kendo TabStrip. Here GetDetails is a JsonResult method in controller returning different data based on each tab selection.Each selected tab name is sent as parameter to Grid ,based on that , data is binded to Grid.According to our requirement , We have tabstrip where tabs are loaded dynamically . Inside of this tabstrip, we have Kendo grid. Based on tab selection we need to display different data in kendo grid present inside tabstip.Grid inside tabstrip may have different column names based on tab selection.Suppose if user click on First tab,then that value is sent to JsonResult method in controller to retrieve  data and if obtained data has only 2 columns like Name,Title  then only  those 2 columns should be displayed in grid. If user click on Second tab,then that value is sent to JsonResult method in controller to retrieve  data and if obtained data has only 5 columns like Name,Location,City,Address,Status then only  those 5 columns should be displayed in grid.

     With below code, i am getting same column names for all tab grids.For each tab selection , same column names are binded to all grids.How can i bind different column names to gird present in each tab.Column names in grid should  change for each tab selection based on data obtained from GetDetails is a JsonResult method in controller.

@(Html.Kendo().TabStrip()
    .Name("tabstrip")

          .Items(tabstrip =>
          {
             foreach (var tab in @Model)
              {
                   tabstrip.Add().Text(tab.ComponentTypes).Content(@<text>
            @(Html.Kendo().Grid<Portal.Entity.ComponentProperty>().Name("grids" + tab.ComponentTypes)
                //+ DateTime.Now.ToString().Replace(" ", ""))
        .Columns(columns =>
        {

        }) .HtmlAttributes(new { style = "width: 980px;height: 800px" })
                .Scrollable().Sortable().Pageable().DataSource(dataSource => dataSource
                                .Ajax()
                                  .Read(read => read.Action("GetDetails", "ComponentProperties", new { PropertyName = tab.ComponentTypes }  ))
                                        .ServerOperation(false)      ))
                </text>
                );
              }

          })

[Daniel]

Hello Chandra,

You could either include information in the model what columns should be shown in the specific tab and configure the columns dynamically:

.Columns(columns =>
{
    foreach (var propertyName in tab.Columns)
    {
        columns.Bound(propertyName);
    }
})

or set the grid model type to dynamic:

Html.Kendo().Grid<dynamic>().Name("grids" + tab.ComponentTypes)

so that the columns are not generated based on the model but based on the returned data.


Regards,
Daniel
Telerik