Manually select tabstrip

2 posts, 0 answers
  1. Dave
    Dave avatar
    12 posts
    Member since:
    Dec 2012

    Posted 18 Jun 2013 Link to this post

               I am opening a modal view when a tabstrip item is selected as shown in the screenshot (Show Modal.png).

    In the select method of kendo ui mobile tabstrip I am
    preventing  the default event propagation i.e, to show the modal view by using e.preventDefault(),  to show a confirmation dialog box as shown in the screenshot(Prevent Default Action.png). 


    <div id='modal_tabs' data-role="tabstrip" data-select='tabChange'>
      <a href="#index" data-icon="custom">Home</a>
    function tabChange(e){
                       if (someCondition) {
                          showConfirmation(showPopUpMsg, 'Unsaved changes', doTabActiveOnOK); // show confirmation dialog box
                   doTabActiveOnOK = function(button){   // callback function
                          if (button == true) { //  if ok button is pressed
                                     $("#modal_tabs").data("kendoMobileTabStrip").select(1);  // not supported
    If  'ok'  button is pressed on the confirmation dialog I want to perform the default action again(to show the modal) or select the tabstrip manually.  How to perform this task?

  2. Petyo
    Petyo avatar
    2436 posts

    Posted 20 Jun 2013 Link to this post

    Hello Dave,

    If I understand your case correctly, you may do something like this sample - preventing the default action only if the cancel button is tapped. 

    However, if the flow you are implementing is more complicated, and you have to call the select method, it will not work from the select event handler. A workaround which may work for that case would be to delay the select call:

    setTimeout(function() { $("#modal_tabs").data("kendoMobileTabStrip").select(1); }, 0);

    Please let me know in case you need further assistance with this.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top