Tab Strip as Buttons

[Shawn]

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 

[Shawn]

I answered question #2 - the answer is no so I will use the custom icon methods.

Question #1 still pertains and I tried some of the solutions that were posted to clear the selections and they did not work.

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

A little more background in why I am using tab strip is that they behave well when switching form factors, rotating and when the virtual keyboard is open.

[Kiril Nikolov]

Hello Shawn,

I have tested the clear() method in the following jsBin and it seems to be working correctly. Can you please use it to reproduce the issue that you are having?

http://jsbin.com/xeneveba/1/edit

Regards,
Kiril Nikolov
Telerik

 

 

[Shawn]

Hi Kiril

Here is a link to my code with yours included.

Hope this helps and let me know what is going wrong here or if I am doing something wrong.

http://jsbin.com/xeneveba/4/

[Kiril Nikolov]

Hello Shawn,

Due to the async nature of the operations, you will need to wrap the clear() in a setTimeout() block, in order to successfully clear the state. Please check the updated example:

http://jsbin.com/xeneveba/5/edit

Regards,
Kiril Nikolov
Telerik

 

 

[Shawn]

Thanks Kiril

That worked for me.