Tab Strip as Buttons

6 posts, 0 answers
  1. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 21 Mar 2014 Link to this post

    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 





  2. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 22 Mar 2014 in reply to Shawn Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 24 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 24 Mar 2014 in reply to Kiril Nikolov Link to this post

    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/

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 25 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 26 Mar 2014 in reply to Kiril Nikolov Link to this post

    Thanks Kiril

    That worked for me.


Back to Top
Kendo UI is VS 2017 Ready