javascriptasp.net-corekendo-uijquery-eventskendo-tabstrip

Can you activate separate events on tab change?


I am aware that it is possible to set up an event that fires whenever the tab is changed within a tab strip within Kendo UI. However, I'm wondering if it is possible to fire separate events on separate tabs?

For example, I have a tab strip with 6 tabs. I want to fire a different event on entering tab 2 than when entering tab 4 or 5 or 6. I want a separate event for each tab. How can I tell Kendo UI to listen in for which tab we are on to fire these distinct events?


Solution

  • Please show what you have tried, So it will help us to find the exact problem/solution.

    Anyways, You can use active Event handler in TabStrip.

    Set an id for the tab, And check the id and call the function, when user activate it.

    For more info Documentation

    This is very simple example

    <div id="tabStrip">
        <ul>
            <li id='tab1'>Tab 1</li>
            <li id='tab2'>Tab 2</li>
        </ul>
        <div>Content 1</div>
        <div>Content 2</div>
    </div>
    
    <script>
        // event handler for activate
        var onActivate = function(e) {
            // access the activated item via e.item (Element)
    
            if(e.item.id == "tab1"){
    
               alert("func 1");
    
            } else if (e.item.id == 'tab2') {
    
                alert("func 2");
    
            }
        };
    
        // attach activate event handler during initialization
        var tabStrip = $("#tabStrip").kendoTabStrip({
            activate: onActivate
        }).data("kendoTabStrip");
    </script>