Two level Kendo TabStrip

[Ollie]

I am not sure if the TabStrip control is the right one to use for what I am trying to do.

Below is the screenshot of what I am working on:

[Ollie]

Sorry I accidentally hit the Post button.

Anyway, from the attached screenshot that I have, I created a kendo tabstrip with 5 items:

Editor, HTML Editor, Preview, Question, Answer

What I am trying to do is: On page load, Editor and Question will be selected, and when i click one of the three tabs (Editor, HTML Editor, Preview), it will load info related to Question, since its the other tab selected.

When I click Answer, it will use the same 3 divs (related to the first 3 tabs) but will load info related to Answer.

I tried to look for multiple kendo tabstrip or hierarchical tabstrip, but with no luck.

Any help will be appreciated.

 

 

[Dimitar]

Hello Ollie,

A suggestion approach that you could try for achieving the desired result could be the following:

1) Initialize the TabStrip with the desired "Editor, HTML Editor, Preview" tabs.

2) On page load retrieve the TabStrip reference and dynamically append a container for ButtonGroup into the .k-tabstrip-items container:

<script>
  $(document).ready(function() {
    var ts = $("#tabstrip").kendoTabStrip({
       ...
    }).getKendoTabStrip();

    ts.wrapper.find(".k-tabstrip-items").append("<div id='select-period'><span>month</span><span>test</span></div>");

    $("#select-period").kendoButtonGroup({
      index: 0
    });
  });
</script>

In general, the ButtonGroup is not intended to be injected into the header of the TabStrip in this way. Thus, additional styling might be needed to float the widget to the right and fix any discrepancies when hovering/selecting items.

3) Then, based on the selected item of the ButtonGroup, reload the TabStrip's items by also passing a parameter that will let you distinguish between "Question/Answer":

var link = ts.tabGroup.find("li:first .k-link");
 var url = link.data("contentUrl") + "?param=question";

link.data("contentUrl", url);
ts.reload(tab);

I would suggest to test the above in order to verify if this scenario will be suitable for the project requirements. 

Regards,
Dimitar
Progress Telerik

[Bryan Patrick]

 

This worked perfectly for me to put a button on the far right of the tabs (pulls selected records from both tabs).

Added bootstrap classes w-100 and pull-right.

Thanks!