Dynamically add items to tab stripe and its contents

2 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 27 Mar 2014 Link to this post

    Hello,

    I have an XML file with variable number of Tabs and controls(TextBox,combobox,grid etc) to be displayed whne each tab is selected. My Controller parses the XML and creates a model of type
    Dictionary<string, DefaultControlsViewModel>
    where string part is the tabitem.text and DefaultControlsViewModel is a list of different controls to be displayed in that tab.
    I Need to create all the Tabs and ist Contents dynamically on load. Is there a way to bind this Kind of model to view having a tabstripe and create all Tabs and ist controls dynamically?Attached a small sample Project, i have controls.xml and model with tab Name and Array of controls in that tab. Need the code for binding the model to tabstripe in index.cshtml

    Thanks

    Anamika
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 31 Mar 2014 Link to this post

    Hello Anamika,

    The following simplified code snippet shows how to build TabStrip items, according to some Model or ViewBag data:

    @(Html.Kendo().TabStrip()
            .Name("tabstrip")
            .Items(tabstrip =>
            {
                for (int j = 0; j < 5; j++)
                {
                    var c = j + 1;
                    tabstrip.Add().Text("Tab " + (j + 1))
                        .Content(@<text>
                            @*using j here will not lead to the desired result, as it will always be equal to 5*@
                            @(c)
                        </text>);
                }
            })
    )


    Please note that the attached project currently throws exception due to an incorrect model configuration in the View (assuming that the code in the Controller is correct)

    wrong:

    @model DynamicControlsCreation.ViewModels.DefaultControlsViewModel

    correct:

    @model Dictionary<string, DynamicControlsCreation.ViewModels.DefaultControlsViewModel>


    Regards,
    Dimo
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top