Hello Kendo UI Community,

We are in the process of upgrading our mobile web application to the latest version of Kendo UI (2024.3.1015). During the upgrade, we noticed that the kendo.mobile.all.min.css file is no longer included in the newer versions. Our application heavily depends on this file for mobile-specific styling and functionality.

Could you please advise on the following:

1. What is the recommended replacement for kendo.mobile.all.min.css in the latest Kendo UI versions?
2. How can we ensure that our application retains the same mobile-friendly layout and features after the upgrade?
3. Are there any migration guides, examples, or resources for transitioning from Kendo UI Mobile to the current responsive framework?

Any insights or suggestions would be greatly appreciated, as this is critical for us to keep our application functional and up-to-date.

Thank you!

Best regards,
Arvind Kanswal

I try to use this code 
but is not working
always return -1 

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

tabStrip.select().index()

Hi

i use Kendo Mobile Tabstrip It doesn't show me any results

dojo tabstrip

result for me

Preview result image

This problem also exists in other kendo mobile controls

pls help me

thank you

Hi

I found bug into the Items of Tab component.

When you create Tab and write 3 TabItems for it, all of the component are correct but when you want create other tab into the first or second part of TabItem with 2 tabitems, you will expect to see one main Tab with 3 TabItems and other Tab with 2 Tabitems into the first tabItem of first Tab. But you will see one Tab with 5 Tabitems So main Tab merge all of TabItems with together.

<Tab id="mainTab">
    <TabItem id="item1">
          <Tab id="childTab">
               <TabItem id="childItem1">
                    Content 1
                </TabItem>
                  <TabItem id="childItem2">
                    Content 2
                </TabItem>
           </Tab>
     </TabItem>
     <TabItem id="item2">
             Content 2
     </TabItem>
     <TabItem id="item3">
             Content 3
      </TabItem>
</Tab>

Thanks for solving this problem or for guiding me.

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?

Hi,

I need to add a drop list to the mobile-tab-strip, I write this: 

kendo-mobile-layout(k-id="'default'")
            kendo-mobile-header
              kendo-mobile-tab-strip
                      a(href='#!/' data-icon='Canvas') Canvas
                      a
                        select(kendo-drop-download-list placeholder="Content")
                          option(href='#!stackup') Stackup

however, the option stackup doesn't work, the route is not true.