Splitter with Grid content

[Greffin]

Hi all,

I have this problem in splitter and grid ui, my splitter have two panes, left side is a list in Grid ui and right side is the detail view. i want to click the row in the grid and of course there's an id on it, i want to reload the right side pane of splitter with the parameters id in the left side pane. 

Right now i already get the id and the problem is whenever i access the splitter its always says undefined.

Can anyone tell me how to do it? I'm new to this Kendo UI and love this thing. 

Please refer to my code below. 

<div class="k-content">

    <div id="tabs">

        <ul>

            <li class="k-state-active">AREA</li>       

        </ul>

        <div>      

            <div id="grid"> </div>

        </div>             

    </div> 

</div>

 

 

<script type="text/javascript">

 

$().ready(function() { 

    $("#tabs").kendoTabStrip();

     

    var baseUrl = "<?php echo $this->baseUrl();?>";

    var dataSource = new kendo.data.DataSource({

        transport: {

            read: {

                url: baseUrl + "/Maintenance/Area/json",

                dataType: "json"

            }

        },

        batch: true,

        pageSize:20,

        schema: {

            model: {

                id: "area_id",

                fields: {

                    area_id: {editable:false, nullable:true},

                    area_code: {type:"string"},

                    area_desc: {type:"string"}

                }

            }

        }

    });

         

    $("#grid").kendoGrid({

        dataSource: dataSource,

        navigatable: true,

        pageable:true,

        height:400,        

        columns: [             

            {field:"area_code", title:"CODE"},

            {field:"area_desc", title:"DESCRIPTION"}               

        ],

        selectable: "row",     

        change: onSelect

    });

         

    function onSelect(e) {

        var id;

        var splitter = $("#splitter").data("kendoSplitter");

        splitter.ajaxRequest("#detail", baseUrl + "/Maintenance/Area/detail", {id: 8});

        var selected = $.map(this.select(), function(item) {               

            id = $(item ).attr('data-id');                                                         

            //return $(item).text();               

        });

        alert(id);

        //loadPaneDetail(id);      

    }  

});

</script>

Thank you. 

[Gary]

I cannot see where you have created the splitter.

The statement var splitter = $("#splitter").data("kendoSplitter"); will not create the splitter but only try and get a reference to the element.

You should have a statement like:

$("#splitter").kendoSplitter();

somewhere in your script.

Hope that helps