This is a migrated thread and some comments may be shown as answers.

Splitter with Grid content

1 Answer 141 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Greffin
Top achievements
Rank 1
Greffin asked on 31 Jan 2012, 05:06 AM
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. 

1 Answer, 1 is accepted

Sort by
0
Gary
Top achievements
Rank 1
answered on 03 Dec 2012, 10:43 PM
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
Tags
Splitter
Asked by
Greffin
Top achievements
Rank 1
Answers by
Gary
Top achievements
Rank 1
Share this question
or