[Solved] Data bind tabstrip item badge

[Kevin]

Is there a way to bind a tabstrip data item badge?  For example, I want the tab header to be "Tab Header" having a badge = 10 but be able to update it via code.

div id="data-div">
    <kendo-tabstrip name="tabstrip">
        <items>
            <tabstrip-item selected="true" data-bind="text: tab1Header">
                <content>
                    <p>Content</p>
                </content>
            </tabstrip-item>
        </items>
    </kendo-tabstrip>
</div>

<script>

   var viewModel = kendo.observable({
       tab1Header: "Tab Header",
       //tab1Header: "Tab Header <span class='Valid'>10</span>" -- doesn't work, displays raw text,
       tab1Badge: "10"   // Need to bind this to the badge class for the first tab
   });

   kendo.bind($("#data-div"), viewModel);

</script>

 

 

Testing

[Kevin]

Please ignore the "Testing".

[Nencho]

Hello Kevin,

Could you please elaborate a bit more on the referenced badge and how exactly it is shown. Generally, the demonstrated binding should get applied through the observable object, however, I would like to revise the entire implementation that you have at your end. 

Regards,
Nencho
Progress Telerik