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

Data bind tabstrip item badge

2 Answers 41 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 24 Jan 2019, 03:56 PM

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

2 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 1
answered on 24 Jan 2019, 03:58 PM
Please ignore the "Testing".
0
Nencho
Telerik team
answered on 28 Jan 2019, 03:45 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TabStrip
Asked by
Kevin
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or