This is a migrated thread and some comments may be shown as answers.

Change Kendo Grid column names based on Tab selection

1 Answer 108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chandra
Top achievements
Rank 1
Chandra asked on 11 Sep 2014, 02:49 PM
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>                       
                );
              }
             
          })

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 15 Sep 2014, 09:51 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Chandra
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or