Search code examples
javascriptmvvmkendo-uitelerikkendo-tabstrip

Kendo Tabstrip show tabs on the Left-side with MVVM


I want to use Kendo Tabsrip with MVVM and show tabs on the left-side of the screen. In general, in non-MVVM environment tab positions is set like this:

 $(document).ready(function () {
                $("#tabstrip-left").kendoTabStrip({
                    tabPosition: "left",
                    animation: { open: { effects: "fadeIn" } }
                });
 }

However, I don't know how to set tabPosition attribute in the kendo MVVM. I have tried this in MVVM but it did not worked:

<div data-role="tabstrip"
             data-tabPosition="left" 
             data-bind="events: { select: onSelect },
             visible: isVisible">
....
</div>

Here is a MVVM example of the code that has this data-tabPosition attribute but tab position is still on the top

http://dojo.telerik.com/UDELe


Solution

  • You should use this way:

    data-tab-position="left"
    

    There is rule: data-some-variable parameter will produce javascript variable someVariable