CODEWITHSUNDEEP
javascriptjquerycsskendo-uikendo-tabstrip
chiapa
chiapa

Reputation: 4412

Changing Kendo tab strip text dynamically alters style

I need to change the Tab text dynamically and I can do that but when I change the text, the design changes and it looks bad.

Here's what I've got:

$("#tabstrip").kendoTabStrip({
    select: tabstrip_select
});

function tabstrip_select(e) {
    var x = e.item;
    $(x).text($(x).text() + ' - plus changed text');
    //alert('Tab text: ' + $(x).text());    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet"/>   
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="tabstrip">
    <ul>
        <li>Online</li>
        <li>Trading</li>
        <li>Whatever</li>
    </ul>
    <div style="min-height:350px;"></div>
    <div style="min-height:350px;"></div>
</div>

Here's a Fiddle

I don't know why is that screwed up after changing the text but what I need is to change the text without affecting anything else.

Upvotes: 0

Views: 2578

Answers (1)

Gene R
Gene R

Reputation: 3744

function tabstrip_select(e) {
    $('#tabstrip ul li .k-link .plusText').remove();
    $(e.item).find('.k-link').append('<span class="plusText"> - plus changed text</span>'); 
}

you need add one more

<div style="min-height:350px;"></div>

Update:

function tabstrip_select(e) {
    var tab = $('#tabstrip ul li .k-link:contains("Online")');
    tab.find('.plusText').remove();
    tab.append('<span class="plusText"> - selected '+$(e.item).find('.k-link').text()+'</span>');
}

Upvotes: 2

Related Questions