Hi,

I updated to latest version of Kendo jQery R2 2022. After the update I get an horizontal line on top of the tabstrips tabs if I add this line of code,

var tabStrip1 = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

You can test to add it to your demo tabstrip code, you will get the same result.

So I've searched the forums down to page 7 .. sorry if I missed this being answered already.

I have a page in my app that I extended with a tabstrip. So far it it works - displaying what was formerly "there" in one of the tabs, second tab comes later.

My problem comes when dealing with the css surrounding tabstrips.

The tabstrip I first built shows the content that was already there - meaning 2 floated fieldsets containing a grid each. This seems to work "right out of the box" .. but when I look at my page in chrome (current version), I see a nice beautiful frame around the second tab (just a text replacement for the future content, which will also be 2 fieldsets containing a grid each).

Now my first tab shows only a small part of said "beautiful border". The border vanished as soon as I made those fieldsets float right next to each other (float: left; with a definded width). When I inspect the page with firebug or developer console the div created by tabstrip "ends" exactly where the fieldsets start (y-coordinate) hence the border is missing it seems.

Can you give me some hints how I can extend the div to surround the fieldsets (both have exactly the same height..) ?

Hello everyone,

I want to make a grid similar to this example: 

https://demos.telerik.com/kendo-ui/grid/custom-command

but i want the popup window to have a kendo tabstrip inside.

How can i do it in jquery? 

Thank you

in pre version of Kendo UI Jquery, the follow code can get select tab id , but it is not working in recent version.

var tabStrip = $("#" + controlName).kendoTabStrip().data("kendoTabStrip");

var selectId = tabStrip.select()[0].id;

Please help

the follow code not working...

var tabStrip = $("#TsMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);

When clicked on tabstrip tab, it gets "selected" box around it. It is quite ugly when you have biggest tabstrips and nice UI around it.

Is there a way to disable it? I tried navigatable : false, but no help.

Example:

https://dojo.telerik.com/iveBAPAK

Hi,

We want multiple tabstrip depending on user selection. In that tabstrip want multiple grid. Is there sample code in angularJS for this problem.

Thanks!

Hello,

I'm using LitElement to create a reusable tab component, but when I 'm initializing the kendoTabStrip, the TabStrip property is undefined. 

In my firstUpdated function I'm setting the TabElement property:

    firstUpdated (changedProperties) {
        this.TabElement = this.shadowRoot.querySelector('#tabs-container')
    }
   

In the parent element, I'm setting the TabConfig property:

    setHtml () {
        const tabs = this.shadowRoot.querySelector('tabs')
       tabs.TabConfig = TabConfig(this)
    }

I have a setter in the tabs component that addsTabs after being set:

    set TabConfig (value) {
        const oldValue = this._TabConfig
        this._TabConfig = value
        const self = value.self
        this.addTabs(self, oldValue)
    }

I'm initializing the kendoabStrip using the previously set properties (all properties are defined):

    addTabs () {
        this.TabStrip = $(this.TabElement).kendoTabStrip(this.TabConfig).data('kendoTabStrip')

        this.TabConfig.tabs.forEach(tab => {
            if (tab.show) {
                this.TabStrip.append(tab) // This throws an error "Cannot read property append of undefined"
            }
        })
    }

I tried initializing the TabStrip property in the setter for the TabConfig, but ended up with the same result. Any idea as to why this.TabStrip is undefined?