Manually select tabstrip

[Dave]

Hello,
           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). 

Code:-

<div id='modal_tabs' data-role="tabstrip" data-select='tabChange'>
  <a href="#index" data-icon="custom">Home</a>
</div>
function tabChange(e){
                   if (someCondition) {
                        e.preventDefault();
                      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?

 Thanks,
Dave.

[Petyo]

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.

Regards,
Petyo
Telerik