i tried to jsfiddle, but i dont know....
this is my code, --i made it simple---
<body>
<h3>Students</h3>
<div id='students'></div>
<h4>Subject</h4>
<div id='subject'></div>
<script>
$(function(){
var classroom={};
classroom.rows = [
{id:"C1",name:"Daisy"},
{id:"C2",name:"Tulip"},
{id:"C3",name:"Rose"},
{id:"C4",name:"Aster"},
{id:"C5",name:"Lily"},
];
classroom.total = classroom.rows.length;
var students=$('#students').datagrid({
singleSelect:true,
data:classroom, //actually i use url: at my localhost web
pageSize:10,
rownumbers:true,
pagination:true,
remoteSort:true,
remoteFilter:true,
filterDelay:1000,
idField:'id',
columns:[[
{field:'cek',checkbox:true},
{field:'id',title:'#'},
{field:'name',title:'Classroom'}
]]
})
var subject=$('#subject').datagrid({
singleSelect:true,
pageSize:10,
pagination:true,
rownumbers:true,
idField:'cr_id',
remoteFilter:true,
remoteSort:true,
columns:[[
{field:'name',title:'Student Name'},
{field:'point',title:'Points'}
]]
})
subject.datagrid({queryParams:{cr_id:'C1',type:'students'}})
subject.datagrid('enableFilter')
function seeDetail(id){
/*
for avoiding 'uncaught range error maximum call
stack size exceeded' i use disableFilter first, query
the data and then enable it again.
but the disableFilter keep trigger query
to server with old queryparams
*/
subject.datagrid('disableFilter');
subject.datagrid({queryParams:{cr_id:id,tipe:'students'}});
subject.datagrid('enableFilter');
}
students.datagrid({
onSelect:function(i,r){
id=r.id;
seeDetail(id);
}
})
})
</script>
</body>
thank you
Edit: cleaning code
