Click event on currently selected tab

4 posts, 2 answers
  1. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 02 Oct 2014 Link to this post

    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.
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 03 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 03 Oct 2014 in reply to Dimiter Madjarov Link to this post

    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.
  5. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 03 Oct 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready