Splitter with Grid content

2 posts, 0 answers
  1. Greffin
    Greffin avatar
    9 posts
    Member since:
    Jan 2012

    Posted 30 Jan 2012 Link to this post

    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">
                <li class="k-state-active">AREA</li>       
                <div id="grid"> </div>
    <script type="text/javascript">
    $().ready(function() { 
        var baseUrl = "<?php echo $this->baseUrl();?>";
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: baseUrl + "/Maintenance/Area/json",
                    dataType: "json"
            batch: true,
            schema: {
                model: {
                    id: "area_id",
                    fields: {
                        area_id: {editable:false, nullable:true},
                        area_code: {type:"string"},
                        area_desc: {type:"string"}
            dataSource: dataSource,
            navigatable: true,
            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();               

    Thank you. 
  2. Gary
    Gary avatar
    28 posts
    Member since:
    Apr 2011

    Posted 03 Dec 2012 Link to this post

    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:


    somewhere in your script.

    Hope that helps
Back to Top