Questions on Kendo UI for jQuery Forum

0 answers

205 views

Why is $(this.TabElement).kendoTabStrip(config).data('kendoTabStrip') undefined?

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?

General Discussions

TabStrip

TabStrip (Mobile)

updated question on 24 Jun 2021

0 answers

47 views

Hide Index button on tabstrip ?

Hi,

How do I hide the "Index" button that tabstrip shows at the buttom.

Very often the tab stop working after I click the Index button, the tab is not selected the blue line under icon just flashes once.

I'm using KendoUI with Cordova / Android.

TabStrip (Mobile)

asked on 22 Nov 2012

0 answers

41 views

Change tab dimensions

Hi,

I'm looking to change the dimensions of the TabStrip, specifically on Android.

Any help would be great

TabStrip (Mobile)

asked on 14 Nov 2012

0 answers

45 views

Use Kendo Mobile TabStrip in Kendo Web UI Application?

Hi,

I am using the Kendo Web UI controls to build a responsive web application using HTML5, CSS3, javascript, etc. I would like to use the kendo mobile tabstrip in my application. Will this play nice with the web ui layout I already have in place? In the tabstrip example I see that I need a div with the data-role="view" attribute/value in addition to the following line of javascript code:

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

Can an existing web ui application "become" a mobile application too?

Thank you,

Dan

TabStrip (Mobile)

asked on 25 Sep 2012

0 answers

102 views

Tabstrip initail selected index

Hello I have an issue with intial sected index of tab strip

I tried:

$("#mobilePeriodChooser").kendoMobileTabStrip({

selectedIndex: 2

});

but this causing some duplications and still first is active.

I also tried:

$("#mobilePeriodChooser").data("kendoMobileTabStrip").selectedIndex = 2

But this one is showing error becuase data("kendoMobileTabStrip") is undefined.

So how to setup it ?

TabStrip (Mobile)

asked on 22 Aug 2012

0 answers

164 views

Refresh a view of a tabstrip

Hi,

i put a form inside a view... in a tabstrip, now i want to try to change the view content (with a listview).... i tryed this but it don't work, the refresh with jquery fully break kendo ui!:

<div id="figa" data-role="view" data-title="Form Elements" data-init="initForm" data-layout="mobile-tabstrip">
<form action="/newOrdine/" method="post">
<ul data-role="listview" data-style="inset">
<li>
<select>
<option value="First Option">First Option</option>
<option value="Second Option">Second Option</option>
<option value="Third Option">Third Option</option>
<option value="Fourth Option">Fourth Option</option>
</select>
Select element
</li>
</ul>
</form>
<a class="button" data-role="button" type="submit">Home</a>
<a class="button" data-role="button" onclick="javascript:submitForm();">Facility</a>
<a class="button" data-role="button" href="#sports" style="background-color: #f60">Sports</a>
</div>

<script>
function submitForm() {
alert('a');
//$("#container").empty().html('<img src="/static/indicator.gif"/>');
var nome = 'pippo';
$('#figa').load('/newOrdine/', {'nome':nome});
}
</script>

TabStrip (Mobile)

asked on 27 Jul 2012

0 answers

50 views

Should tab strip auto size retina vs non retina display

I noticed that the tabstrip in our app was very large on the iPhone 3gs until I saw it on a 4s.

I have read here about the ability to resize http://www.kendoui.com/forums/mobile/tabstrip/width-height-icons-on-tabstrip.aspx but wouldn't that make it smaller on the 4s too?

Isn't there some 'auto' resize function in the framework that deals with device resolutions and tabstrip icon sizes?

TabStrip (Mobile)

asked on 19 Jul 2012

0 answers

75 views

Is there an example of using tab strips events?

I'd like to do a custom operation when a specific tabs is selected, actually after the tab loads (or activates) would be best. Is there an example of tab strip events for mobile?

TabStrip (Mobile)

asked on 09 Jul 2012

0 answers

73 views

Multiple Tabstrips

Hei
I want to display Tabs as vertical with image like

Registration Contact Info About us

When click on Registration it wud display under tab like

Registration P Reg A Reg C

How to achieve this using Tabstrip . Iam new to Kendo ui

TabStrip (Mobile)

asked on 21 May 2012

0 answers

93 views

Refreshing a Tabstrip?

In every Grid master row, I have 2 tabstrips populated when detailInit event happens.

If I click on the next master row, the tabstrip in that row detail doesn't seems to be updated with the new JSON datasource using AJAX.

How do I do that without using the Grid Refresh?

$("XXX").data("kendoGrid").dataSource.read();

Is there a detailRefresh or detailReload event for Kendo Grid?

I have written 2 methods to collapse the previous master row details when the next master row is clicked.

TabStrip (Mobile)