Dynamic TabStrip and nested Grids

[Chris]

I need to be able to render a tabstrip with a dynamic number of tabs, and then within each tab a griid to display records that relate to the tab.

Basically it is grouping sets of data into tabs, and then displaying the records from that group in the grid.

The underlying source of the grids is all the same, albeit each one would be showing a different subset of records.

The number of tabs/grids required would be unknown until the data is loaded.

Is this even possible? I have searched but can't find an example doing exactly what I need.

Thanks

[Eyup]

Hello Chris,

 

Thank you for contacting us.

Yes, this is possible and can be achieved using dynamic loading:
https://docs.telerik.com/aspnet-core/html-helpers/navigation/tabstrip/content#loading-content-with-ajax

I have divided it into steps so it will be more convenient:

1. Create the TabStrip.

2. Create a PartialView.

3. Create the Grid inside the PartialView.

4. Add items to the TabStrip and set them to call the PartialView content with custom Data arguments:

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Paris")
            .LoadContentFrom(Url.Action("Paris", "Home")).Data("additionalData").Type(HttpVerbs.Post);

5. Return different argument for each tab:

    function additionalData(){
        return {
            myParam: "myValue"
        }
    }

6. Using this argument in the Controller Action, bind each Grid to the corresponding data set.

Do you find these steps helpful? Do you like the idea?

 

Regards,
Eyup
Progress Telerik

[Chris]

Hi - that makes sense - can I also create the tabs dynamically - i.e. put this inside some sort of loop? E.g. :

foreach(var tab in Model.Tabs)
{
 tabstrip.Add().Text(tab.TabName)
            .LoadContentFrom(Url.Action("GridAction", "Home", new { type = tab.TabType })).Data("additionalData").Type(HttpVerbs.Post);
}

[Chris]

I have managed to get this working I believe with a loop, and a nested partial view - thanks for your help :

@model CustomFieldsViewModel
@(
Html.Kendo().TabStrip().Name("customFieldTab")
.Items(tabstrip =>
{
    int x = 1;
    foreach(var grp in Model.CustomFieldGroups.OrderBy(s => s.SortOrder))
    {
        tabstrip.Add().Text(grp.FieldGroupName.ToString()).Selected(x == 1)
        .LoadContentFrom("CustomFields", "CRM", new { tid = Model.PrimaryKeyType, id = Model.PrimaryKeyValue, title = Model.RecordTitle, tabid = grp.FieldGroupId });
        x++;
    }
}
)
)