Create and dynamically update tab badge

[Responsive]

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?

[Ivan Danchev]

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