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

Click event for selected TabStripe

4 Answers 195 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 25 Oct 2017, 01:20 PM

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

4 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 27 Oct 2017, 01:00 PM
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.
0
Anamika
Top achievements
Rank 1
answered on 30 Oct 2017, 07:28 AM

Thanks Neli ,

 

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

 

-Anamika

0
Neli
Telerik team
answered on 31 Oct 2017, 07:17 AM
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.
0
Anamika
Top achievements
Rank 1
answered on 31 Oct 2017, 07:28 AM
Thanks . It works well
Tags
TabStrip (Mobile)
Asked by
Anamika
Top achievements
Rank 1
Answers by
Neli
Telerik team
Anamika
Top achievements
Rank 1
Share this question
or