How to dynamically add tabs and its content to Kendo Tabstrip without iterating through the collection

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

    Posted 16 Sep 2014 Link to this post

    Hi,
           I want to create a Kendo TabStrip where tabs are added dynamically. I know we can do it as below

    @(Html.Kendo().TabStrip()
             .Name("tabstrip")
                   .Items(tabstrip =>
              {
                  foreach (var tab in @Model)    // I don't want to iterate through items like this
                  {
                      tabstrip.Add().Text(tab.ComponentTypes).Content(@<text>
                        @(Html.Kendo().Grid<dynamic>().Name("grids" + tab.ComponentTypes)                         
                    .Columns(columns =>
                    {

                    }).HtmlAttributes(new { style = "width: 980px;height: 800px" })
                                    .Scrollable().Events(events => events.DataBound("dataBound"))
                                    .ClientDetailTemplateId("template").Sortable().Pageable().DataSource(dataSource => dataSource
                                    .Ajax()
                                                                              .Read(read => read.Action("GetResults", "Result", new {
                                                                                  ScanID = tab.ScanID,
                                                                                  ComponentType = tab.ComponentTypes }))
                                            .ServerOperation(false)))
                    </text>
                    );
                  }

              }) .Events(events => events.Select("onSelect"))
    )

    Above code works well ,It is creating Tabs dynamically with grid in each tab. But it is iterating through items in a @Model. Instead of this , is there any other way to bind tabs dynamically to Kendo Tabstrip without iterating.My requirement is ,I want to create a Kendo Tabstrip where tabs are added  dynamically.Based on selection of tab ,I need to display data in Kendo Grid which is present inside Kendo Tabstrip where data in Grid changes based on Tab selection.

    How to achieve this.Please Suggest..
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 18 Sep 2014 Link to this post

    Hello Chandra,

    You can use the BindTo method to bind the tabstrip to the model data if you do not wish to iterate over the items:
    Html.Kendo().TabStrip()
        .Name("tabstrip")
        .BindTo(Model, (tabStripItem, tab) =>
            {
                tabStripItem.Text = tab.ComponentTypes;
                tabStripItem.Template.InlineTemplate = @<text>
                     @(Html.Kendo().Grid<dynamic>().Name("grids" + tab.ComponentTypes)
                        ...
                    )
                </text>;
            })



    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