splitter is undefined

1 posts, 0 answers
  1. Tony
    Tony avatar
    1 posts
    Member since:
    Mar 2012

    Posted 28 Apr 2012 Link to this post

    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:whitemargin:1pxwidth: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
Back to Top