or
$('#target').kendoSplitter({ orientation: 'horizontal', panes: [ { collapsible: false, resizable: false, size: '25%' }, { collapsible: false, resizable: false, size: '25%' }, { collapsible: false, resizable: false, size: '25%' }, { collapsible: false, resizable: false, size: '25%' }, { collapsible: false, resizable: false, size: '25%' }, { collapsible: false, resizable: false, size: '25%' }, { collapsible: false, resizable: false, size: '25%' } ]});<div id="target" class="k-widget k-splitter" data-role="splitter"> <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 0px;">1</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 300px;"></div> <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 307px;">2</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 607px;"></div> <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 614px;">3</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 914px;"></div> <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 921px;">4</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1221px;"></div> <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 1228px;">5</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1528px;"></div> <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 1535px;">6</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1835px;"></div> <div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;">7</div></div><div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;">7</div>
var viewModel = kendo.observable({
ordersSource: statesDataSource,
isActive: true,
tabSelected: function (e) {
var selectedTab = $(e.item).text().trim();
this.set("isActive", (selectedTab === "Active"));
},
stateName: "",
stateAbbreviation: "",
isActive: true,
createState: function () {
debugger;
statesDataSource.add({
stateLookupID: 0,
stateName: viewModel.get("stateName"),
StateAbbreviation: viewModel.get("StateAbbreviation"),
isActive: viewModel.get("isActive")
});
}
});