Change Kendo Grid column names based on Tab selection

2 posts, 0 answers
  1. Chandra
    Chandra avatar
    2 posts
    Member since:
    Aug 2014

    Posted 11 Sep 2014 Link to this post

    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>                       
                    );
                  }
                 
              })
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 15 Sep 2014 Link to this post

    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.

     
Back to Top