Hi friends,

I have a simple html+css+js app .

I use a structure of tabs linked with divs for the sections menu.

My problem is that i have in a section ( on a div ) only a reference of a img that is on a remote url , but this img maybe will change, but have always the same name. I want to know if there is some method to force always i click on the tab ( div ) of this section to reload the content of this div, or reload always this img, because in this moment only load when the app is launched the first time.

Thx you very much.

For many reasons I am using a tab strip as action buttons on a form instead of buttons.

First question:

I want to be able to deselect a tab once I have called its action.  For example I have the following snippet.

      <div data-role="footer">
            <div data-role="tabstrip" id="tabstrip" data-select="onTabSelected">
                <a data-icon="home">Save</a>
                <a data-icon="info">Previous</a>
                <a data-icon="details">Next</a>
                <a data-icon="camera">Scan</a>
            </div>
        </div>

And here is the select event

        function onTabSelected(e)
        {
            var index = $(e.item).index();

            console.log("tab index="index);

            if(index == 1)
            {
                    // do something
            }
            else if(index == 2)
            {
                    // do something
            }

            // deselect the tab item so the user can select it again and fire the select event

            return;
        }

Second question:

Can I use standard jquery icons like data-icon="ui-icon-carat-1-e"

Thanks in advance 

Greetings,

Unless I'm missing something, in Q1 2014 kendo mobile tabstrip, buttons now fail to launch the drawer properly.
 
I pasted a modified version of the mobile drawer sample with a footer that has a tabstrip with the same button that launches the drawer from the header navbar.  When you click the button in the footer's tabstrip, the drawer doesn't respond (nothing happens).

(to reproduce, save the code below in a file called "index2.html" in the folder for the mobile drawer sample: C:\Program Files (x86)\Telerik\Kendo UI Complete Q1 2014\examples\mobile\drawer in my case),

the drawer pops out fine when you use the button in the header's nav bar,

but fails to pop out when you use the button in the footer's tab strip.  

This was working in my project 2013 Q3, then I upgraded to the 2014 Q1 and it stopped working.

Do not take this as a complaint - Kendo is amazing and awesome.  You guys are making my 2014 fantastic.

-Mike Graham

Hello,

i build a mobile web for our company using for our BlackBerry Z10.

When using a form with some inputs ... the tabstrip moves up when onscreen keyboard comes up.
Is there a way to prevent tabstrip moving with onscreen keyboard ?

I readed some threads here but the solutions there doesn`t work for me.

Regards

Jürgen

hi,

Please advise....How can i prevent tabstrip footer blinking when i load a remote view? any trick?

This is my remote view:


And this is my footer that  initialized just one time:



Please see the video with my problem:

http://www.youtube.com/watch?v=OI8pkYXC6rk

Hi,

I've a little problem. I'm using the TabStrip and i need to clic twice on tabstrip to activate the view or press F5 to refresh the page. I posted a video to see the problem.

http://www.youtube.com/watch?v=z8GkVn8QGB0


please your help.

I posted part of the source:

Using the guide at http://docs.telerik.com/kendo-ui/getting-started/mobile/icons#restyle-only-the-custom-icon I've added a custom mask icon using the latest recommended way to do it. Unfortunately my icons (glyphish pack) seem to be just a tiny bit too large for my taste and the background-size is having no effect when i try to change it.


I have tried as low as 10% 10% and it changes nothing.

I'm encountering problems retrieving my app's tab strip using JQuery. Sometimes it works, sometimes it doesn't. Code snippet below:

function updateBadges() {
        console.log("Updating badges");
        var tabstrip = $("#tabstrip").data("kendoMobileTabStrip");
        if (tabstrip) {
            var reminderCount = getRemindersDataSource().view().length;
            console.log(reminderCount);
            if (reminderCount > 0)
                tabstrip.badge(2, reminderCount);
            else
                tabstrip.badge(2, false);
        } else {
            console.log("Can't find tabstrip");
        }
    }

Tabstrip is defined as:

<div id="tabstrip" data-role="tabstrip">
etc

Are there any constraints to be followed?

Thanks.

With Android 4.1.2  There is a quick launch menu at the bottom of the device that will open to display a bunch of icons.  Well in my Mobile App when I click on the tabstrip to navigate... it's causing this menu to popup as if I clicked on the little button to bring it up.

Does anyone know whats going on here or how to prevent the quick launch menu from popping up when using the tabstrip?

hello there!
i have 3 views "menu", "details" and "cart" which have a header and a footer. The tabstrip only has 2 tabs : "menu" and "cart". 

<div data-role="view" id="menu" data-title="Menu"  data-layout="myLayout" data-model="viewModel">
   here i have a listview with the category names and when i click on an "li" it goes to the #details view where products are filtered by the category name
</div>

<div  id="details" data-role="view" data-title="Details" data-layout="myLayout" data-transition="slide:left" data-model="viewModel" >
    <h3 class="item-title">#: name #</h3>
    <p class="item-info">#: description #</p>
    <a data-role="button" data-item-id="#:id#" class="details-link fa"  data-icon="cart" data-bind="click: addToCart" >#: price # lei</a>
</div>

the footer from myLayout looks like this:

<footer data-role="footer">
<div data-role="tabstrip" id="badgeIcon">
    <a href="#menu" class="fa" data-icon="home">Menu</a>
    <a href="#cart" class="fa" data-icon="cart" >Cart</a>
</div>
</footer>

i have onInit function which works and initializes the badge:

function onInit(e) {
 var tabstrip = e.layout.footer.find(".km-tabstrip").data("kendoMobileTabStrip");
 tabstrip.badge(1,0);
}

And the addToCart function is this
function addToCart(e) {
var tabstrip = $("#badgeIcon").data("kendoMobileTabStrip");
tabstrip.badge(1, +tabstrip.badge(1) + 1);

....rest of function which works perfectly...
}

The app loads in the #menu view from where it goes to #details view,  and then,  when i click on a #li it crashes and gives me an error on the " tabstrip.badge(1, +tabstrip.badge(1) + 1); " line

Uncaught TypeError: Cannot call method 'badge' of undefined 

If i load the app in the #details view ( index.html#details ) with all the items shown, it works and updates the cart badge, but i want to filter them and thats why i have the #menu view first.

I'm using the latest kendo latest release with jQuery1.9.1

Please give me your input and thanks in advance :)