This is a migrated thread and some comments may be shown as answers.

Click event on currently selected tab

3 Answers 436 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 02 Oct 2014, 04:39 PM
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.

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 03 Oct 2014, 08:27 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Mark
Top achievements
Rank 1
answered on 03 Oct 2014, 09:07 AM
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.
0
Accepted
Dimiter Madjarov
Telerik team
answered on 03 Oct 2014, 10:12 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TabStrip
Asked by
Mark
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Mark
Top achievements
Rank 1
Share this question
or