Click event for selected TabStripe

5 posts, 0 answers
  1. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 25 Oct 2017 Link to this post

    Hello,

    I would like to fire click Event when already selected tab item is clicked. Looks like OnSelect doesnt get fired if the selected item is clicked again. I tried implementing JavaScript but doesnt get fired

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

     

    here is my layout

    @(Html.Kendo().MobileLayout()
    .Name("mobile-tabstrip")
    //.Header(obj => NavBarTemplate(this))
    .Header(
    @<text>
    @Menumobile()
    </text>
    )
    .Footer(
    @<text>
    @(Html.Kendo().MobileTabStrip()
    .Name("tbAdress")
    .SelectedIndex(999)
    .Events(events => events
    .Select("onTabSelect")
    )
    .Items(items =>
    {
                       
                        items.Add().Text("Objekt").HtmlAttributes(new { @data_icon = "home" });
    items.Add().Text("GoogleMaps").HtmlAttributes(new { @data_icon = "gps-e" });
    })
    )
    </text>)
    )

     

    How can i achieve this

     

    -Anamika

  2. Neli
    Admin
    Neli avatar
    221 posts

    Posted 27 Oct 2017 Link to this post

    Hi Anamika,

    A possible approach is to subscribe a click event on <a> elements of the TabStrip. The current active Tab has 'km-state-active' class. In the click event handler you can check if the clicked Tab is the active one.
    $('a').click(function(){       
            var isactive = this.classList.contains('km-state-active');
             
            if(isactive){
                     alert('The selected Tab was clicked!');    
            }
        })

    I hope that the enclosed Dojo will help.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 30 Oct 2017 in reply to Neli Link to this post

    Thanks Neli ,

     

    That works. How can i get id/text of active tab inside the click Event?

     

    -Anamika

  4. Neli
    Admin
    Neli avatar
    221 posts

    Posted 31 Oct 2017 Link to this post

    Hello Anamika,

    You could get the id and the text of the selected item by using the event currentTarget properties.
    var currentId = e.currentTarget.id;
    var currentText = e.currentTarget.text;

    Please find the modified Dojo example here.


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 31 Oct 2017 in reply to Neli Link to this post

    Thanks . It works well
Back to Top