Hi, 

We are looking to get tabs with menu list or dropdown kind think in it , with items in that , Below i have attached image of our requirement,

Kindly provide solution for above requirement  ,

 Thanks,

Mike

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:

Hi

I am having two issues with Kendo Tab Strip(AnguarJS) as followings:

1) Default HTML tag 'li' is showing before Kendo Tab strip is applied

- Default HTML tag 'li' is showing for 1 second(see the screenshot '1') and then Kendo Tab strip is applied

- I tried to use ng-cloak and also k-ng-delay, it is still showing default HTML tag

- I do not want to show default HTML tag, I want to display Kendo Tab Strip once it is fully initialized

- *I am using ng-repeat for dynamic tab, not data-bound. I prefer to use ng-repeat as each tab contents are quiet large

2) After add a new tab(by some button), UI for a new tab is broken

- As I mentioned above, I am using ng-repeat and add a new object to existing array to add a new tab.

- I guess this would be a bug, it would be great if you can provide the example with ng-repeat scenario

Kind regards

Minchul

Hi

I am trying to use scrollable Kendo Tab Strip(with angularjs) and I am having an issue when I resize the browser.

Initially when I load the Kendo Tab Strip, buttons for scroll are hidden if tab wrapper is big enough to show all tabs as expected. However when I resize the browser to half and width of tab wrapper becomes small to display all tabs, It still does not show the scroll buttons so I can't scroll at all. Is this bug or you are actually not supporting the responsiveness for scroll in Kendo Tab Strip?

Kind regards

Minchul

I have left menu is hidden or same case is visible so when i click show button then the tab width is change from 100% to 70% so in this case the tab get added scroll and arrow so how to do that

Demo:

https://dojo.telerik.com/@vishal14/UcaPEYoh

I have this simple tabStrip

Let's do two transformations on it

If I look at the dataSource of my tabStrip, I don't see the above transformations.

How can I keep the dataSource in sync with what is actually rendered?

Here is a dojo snippet reproducing my issue.

Regards

I have created a kendo tabstrip with 2 tabs. I want to add buttons inline with the tabs and to their extreme right. I have attached a screenshot of the functionality I want to achieve.

I tried using the css display:flex property, but the buttons are still not in line with the tabs.

Hi there,

On tab drag i want to update a field in the datasource.  But as soon as datasource sync is called an "Index of undefined" error is received.  This is the sortable section of the tabstrip:

var configureSortable = function () {
            $("#tabstrip ul.k-tabstrip-items").kendoSortable({
                filter: "li.k-item",
                axis: "x",
                container: "ul.k-tabstrip-items",
                hint: function (element) {
                    return $("<div id='hint' class='k-widget k-header k-tabstrip'><ul class='k-tabstrip-items k-reset'><li class='k-item k-state-active k-tab-on-top'>" + element.html() + "</li></ul></div>");
                },
                start: function (e) {
                    tabstrip.activateTab(e.item);
                },
                change: function (e) {
                    var tabstrip = $("#tabstrip").data("kendoTabStrip"),
                        reference = tabstrip.tabGroup.children().eq(e.newIndex);

                    if (e.oldIndex < e.newIndex) {
                        tabstrip.insertAfter(e.item, reference);
                    } else {
                        tabstrip.insertBefore(e.item, reference);
                    }
                },
                move: function(e) {
                    //NOTE: the heading element will be excluded from the
                    //collection as it does not match the filter
                    //e.preventDefault();
                    //shows the original position of the item
                    var originalPos = this.indexOf(e.item);
                    console.log("index of item", originalPos);
                    //shows the position where item will be moved to
                    var newPos = this.indexOf(this.placeholder);
                    console.log("index of placeholder", newPos);
                    //var item = tabStrip.dataSource.at(originalPos);
                    //console.log(item.id + item.pos + item.name + item.status + newPos);
                    //item.set("pos", newPos);
                    //tabStrip.dataSource.sync();
                    var tabstrip = $("#tabstrip").data("kendoTabStrip");
//this gives me a null
                    //var dataItem = tabstrip.dataSource.get(e.item.data("id"));
                    var dataItem = tabstrip.dataSource.at(originalPos);
     //i tried this as well
                    //tabstrip.dataSource.remove(dataItem);
                    //tabstrip.dataSource.insert(newPos, dataItem);
                    dataItem.set("pos", newPos);
                    tabstrip.dataSource.sync();
                }
            });
        };