I have two tabs inside the Kendo Tab strip.
Both of the tabs have its own grids as well, but when ever i do the column drop on the grid of the 1st tab, the column
drop gets visible on the grid of the second tab.
now if i change the code to create the grid on the first tab to be second, then it gets vice versa.
basically which ever the last grid created in the code, becomes active for the column drop.
though the column filter functionlity is working on the desired grid, on the column header drop area the column is not visible.
<
html
>
<
head
>
<
title
>Basic usage</
title
>
<
link
href
=
"./addi/styles/examples.css"
rel
=
"stylesheet"
/>
<
link
href
=
"./addi/styles/kendo.common.css"
rel
=
"stylesheet"
/>
<
link
href
=
"./addi/styles/kendo.kendo.css"
rel
=
"stylesheet"
/>
<
script
src
=
"./addi/js/jquery.js"
></
script
>
<
script
src
=
"./addi/js/kendo.core.js"
></
script
>
<
script
src
=
"./addi/js/kendo.fx.js"
></
script
>
<
script
src
=
"./addi/js/kendo.draganddrop.js"
></
script
>
<
script
src
=
"./addi/js/kendo.resizable.js"
></
script
>
<
script
src
=
"./addi/js/kendo.window.js"
></
script
>
<
script
src
=
"./addi/js/kendo.tabstrip.js"
></
script
>
<
script
src
=
"./addi/js/kendo.data.js"
></
script
>
<
script
src
=
"./addi/js/kendo.pageable.js"
></
script
>
<
script
src
=
"./addi/js/kendo.sortable.js"
></
script
>
<
script
src
=
"./addi/js/kendo.groupable.js"
></
script
>
<
script
src
=
"./addi/js/kendo.grid.js"
></
script
>
<
script
src
=
"./addi/js/people.js"
></
script
>
<
script
src
=
"./addi/js/kendo.splitter.js"
></
script
>
<
style
>
html,body { height:100%;margin:0;padding:0;}
</
style
>
</
head
>
<
body
>
<
div
id
=
"tabstrip"
style
=
"height: 100%; border: 1;"
>
<
ul
>
<
li
>First tab</
li
>
<
li
>Second tab</
li
>
</
ul
>
<
div
>
<
div
id
=
"vertical"
>
<
div
>
<
div
id
=
"horizontal1"
>
<
div
></
div
>
<
div
><
div
id
=
"grid3"
></
div
></
div
>
</
div
>
</
div
>
<
div
>
<
div
id
=
"horizontal2"
>
<
div
></
div
>
<
div
></
div
>
</
div
>
</
div
>
<
div
>
<
div
id
=
"horizontal3"
>
<
div
></
div
>
<
div
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
>
<
div
id
=
"grid"
></
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
$("#tabstrip").kendoTabStrip();
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 10
},
height: window.height,
groupable: true,
scrollable: true,
sortable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "City"
},
{
field: "Title"
},
{
field: "BirthDate",
title: "Birth Date",
template: '<#= kendo.toString(BirthDate,"dd MMMM yyyy") #>'
},
{
field: "Age"
}
]
});
$("#grid3").kendoGrid({
height: window.height,
groupable: true,
scrollable: true,
sortable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
]
});
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "100%" },
{ collapsible: false },
{ collapsible: true, size: "100%" }
]
});
$("#horizontal1").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "300px" },
{ collapsible: false },
{ collapsible: true, size: "100%" },
{ resizable: true }
]
});
$("#horizontal2").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "300px" },
{ collapsible: false },
{ collapsible: true, size: "100%" },
{ resizable: true }
]
});
$("#horizontal3").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "300px" },
{ collapsible: false },
{ collapsible: true, size: "100%" },
{ resizable: true }
]
});
$(document).ready(function(){
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(tabstrip.tabGroup.children("li:first"));
});
});
</
script
>
</
div
>
</
body
>
</
html
>
Please help