This is a migrated thread and some comments may be shown as answers.
Create and dynamically update tab badge
1 Answer 11 Views
This is a migrated thread and some comments may be shown as answers.
Responsive
Top achievements
Rank 1
Responsive asked on 02 Feb 2021, 11:38 PM
I'm working with the tab control now and need to have a badge attached to one of the tabs. As the user works in the tab, however, the badge content needs to update. I have found references to the JQuery forum for something like this, but am unable to make it work in MVC. What would be the recommended approach for MVC?

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 04 Feb 2021, 05:49 PM

Hello,

The TabStrip does not support templates for the tabs, so an approach you can try is to append the badge to the respective tab with jQuery. Here's an example, showing a badge appended to the first tab of an MVC TabStrip.

@(Html.Kendo().TabStrip()
	.Name("tabstrip1")
	.Items(items =>
	{
		items.Add().Text("Tab1");
		items.Add().Text("Tab2");
	})
)

<script>	
	$(document).ready(function () {
		$("#tabstrip1 li").first().append("<a class='k-button' href='#'><span id='badge-in-tab1'>2</span></a>");

		$('#badge-in-tab1').kendoBadge({
			themeColor: 'info',
			shape: 'rounded'
		});
	})
</script>

If you need to update the content of the badge, you will have to do this with jQuery.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Responsive
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or