I am trying to establish the basics with the splitter.
I have have three panes and am trying to load a page into the middle pane and then resize the spliiter tp fit the content.
When I call
var splitter = $("#splitter").data("kendoSplitter");
// expand the pane with ID, pane1
splitter.expand("#mainContent");
I get a "splitter is undefined" error.
Here is the code...
<div align="center">
<div id="splitter" style="border-color:white; margin:1px; width:80%" align="center">
<div id="menu">Area 1</div>
<div id="mainContent">Area 2</div>
<div id="rightCol">Area 3</div>
</div>
</div>
<a href="#" onclick="test()">Expand</a>
$("#splitter").kendoSplitter({
panes: [
{ size: "100px", collapsible: false, min: "100px", max: "110px", resizable: false },
{ size: "700px", min: "300px", contentUrl: "../default.aspx"},
{ size: "100px", collapsible: false, min: "100px", max: "110px", resizable: false }
],
orientation: "horizontal"
})
function test() {
var splitter = $("#splitter").data("kendoSplitter");
// expand the pane with ID, pane1
splitter.expand("#mainContent");
}
I am seeing a few other posts about resizing to fit contents, can it be done this way or do you need to resize from the loaded page to the parent?
Cheers