CODEWITHSUNDEEP
kendo-ui
Sujata Chanda
Sujata Chanda

Reputation: 3395

Manually select tabstrip in Kendo ui mobile

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

enter image description here

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

enter image description here

Code:-

(Html part)

<div id='modal_tabs' data-role="tabstrip" data-select='tabChange'>
    <a href="#index" data-icon="custom">Home</a>
</div>

(JS part)

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?

Upvotes: 0

Views: 2045

Answers (2)

İrfan Sağır
İrfan Sağır

Reputation: 134

function ChangeTabStrip(DivID) {
    var tabStrip = app.view().footer.find(".km-tabstrip").data("kendoMobileTabStrip");
    tabStrip.switchTo("#" + DivID);
    app.navigate("#" + DivID, "slide");
}

Upvotes: 1

Mahmoud Ibrahim
Mahmoud Ibrahim

Reputation: 1731

I'm not sure if you still need this but you can use switchTo instead of select:

var tabStrip = $("#modal_tabs").data("kendoMobileTabStrip");
tabStrip.switchTo("#tabId");

Upvotes: 1

Related Questions