Styling individual tabpanel in Kendo Tabstrip

Question

I'm using the Kendo-UI Tabstrip, and would like to add a class to one specific tabpanel. Is this possible? Using .SpriteCssClasses within the items.Add() section only seems to add the class to the tab itself, and not the actual panel.

Any help is greatly appreciated.

Answer 1

You can try to get the specific panel using the ID because kendo will add a div with specific ID depending on the name of the tab strip and the tab number (order), for example:

@(Html.Kendo().TabStrip()
    .Name("Main")
    .Items(Main =>
    {
        Main.Add()
            .Text("test1 title").Content(@<text>
                test1
            </text>);
        Main.Add()
            .Text("test2 title")
            .Content(@<text>
                test2
            </text>);
    })
)

This will generate the following HTML:

<div class="k-tabstrip-wrapper" style="">
    <div id="Main" class="k-widget k-tabstrip k-header" data-role="tabstrip" tabindex="0" role="tablist" aria-activedescendant="Main_ts_active">
        <ul class="k-reset k-tabstrip-items">
            <li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="Main-1" style="" aria-selected="true">
                <span class="k-loading k-complete"></span>
                <a href="#Main-1" class="k-link">test1 title</a>
            </li>
            <li class="k-item k-state-default k-last" role="tab" aria-controls="Main-2" style="">
                <span class="k-loading k-complete"></span>
                <a href="#Main-2" class="k-link">test2 title</a>
            </li>
        </ul>
        <div id="Main-1" class="k-content k-state-active" role="tabpanel" aria-expanded="true" style="height: auto; overflow: hidden; opacity: 1; display: block;">
            <div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
                <div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
            </div>
            test1
        </div>
        <div id="Main-2" class="k-content" role="tabpanel" aria-expanded="false" style="height: auto; overflow: hidden; opacity: 0; display: none;" aria-hidden="true">
            <div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
                <div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
            </div>
            test2
        </div>
    </div>
</div>

Note the divs with IDs "Main-1" and "Main-2" are the IDs of the actual panels which is what you want from what I understand so you can add CSS on the IDs:

#Main-1 {
    background-color: #E3F7A8;
}