Click event for selected TabStripe

[Anamika]

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

[Neli]

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

[Anamika]

Thanks Neli ,

 

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

 

-Anamika

[Neli]

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

[Anamika]

Thanks . It works well