Click event on currently selected tab

[Mark]

Hi,

I want to respond to a click event on my tabs even if the user clicks on the one currently selected.

The "Select" event works fine when switching tabs but I need to do something if the user clicks on the currently selected tab.

Thanks,

Paul.

[Dimiter Madjarov]

Hello Paul,


Indeed there is no event for clicking the currently selected tab. You should manually attach a click handler for the list item with k-state-active class.

Regards,
Dimiter Madjarov
Telerik

 

 

[Mark]

Thanks Dimiter.

Here is my view that draws the tabs:

@(Html.Kendo().TabStrip()
    .Name("mainQuotesTabs")
    .Animation(false)
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Not Yet Quoted")
            .LoadContentFrom("GetMainTab", "Quotes", new { id = "NotYetQuotedTab" })
            .Selected(true);

        tabstrip.Add().Text("Outstanding Quotes")
            .LoadContentFrom("GetMainTab", "Quotes", new { id = "OutstandingQuotesTab" });

        tabstrip.Add().Text("Quote History")
            .LoadContentFrom("GetMainTab", "Quotes", new { id = "QuoteHistoryTab" });

        tabstrip.Add().Text("Create New Quote/Enquiry")
            .LoadContentFrom("GetMainTab", "Quotes", new { id = "CreateNewQuoteOrEnquiryTab" });
    })
    //.Events(e => e.Select("testSelectTab"))
)
<script>
    //function testSelectTab() {
    //    alert("Select");
    //}
</script>

Can you give me an example of how I hook up the click event on the list item please?

Thanks,

Paul.

[Dimiter Madjarov]

Hello Mark,


Here is a sample approach to attach the click handler.
E.g.

$("#mainQuotesTabs .k-tabstrip-items").on("click", "li.k-state-active", function () {
    //custom logic
});

Regards,
Dimiter Madjarov
Telerik