How to load json data in editor of datagrid column dynamical?

[ejzhang]

datagrid colume define:

Code:

{
title:'<strong>姓名</strong>',
field:'EmpID',
rowspan:2,
width:68,
align:'center',
formatter:function(value,row){
return row.EmpName;
},
editor:{
type:'combobox',
options:{
valueField:'EmpID',
textField:'EmpName',
url:'emp.json',
multiple:false,
editable:false,
required:false
}
}
}

datagrid onClickRow handle:

Code:

onClickRow:function(rowIndex){
   if (lastIndex != rowIndex && $(this).datagrid('validateRow', lastIndex)){
var ed = $(this).datagrid('getEditor', {index:lastIndex, field:'EmpID'});
if (ed){
$(this).datagrid('getRows')[lastIndex]['EmpName'] = $(ed.target).combobox('getText');
}
$(this).datagrid('endEdit', lastIndex);
$(this).datagrid('beginEdit', rowIndex);
lastIndex = rowIndex;
} else {
$(this).datagrid('selectRow', lastIndex);
}
}

emp.json:

Code:

[
{"EmpID":289,"EmpName":"\u66f9\u6587\u771f"},
{"EmpID":290,"EmpName":"\u675c\u6c38\u5f3a"},
{"EmpID":291,"EmpName":"\u51af\u7acb\u660e"},
{"EmpID":292,"EmpName":"\u4ed8\u6653\u94a2"},
{"EmpID":293,"EmpName":"\u90ed\u8fde\u745e"},
{"EmpID":295,"EmpName":"\u674e\u5b9d\u5149"},
{"EmpID":296,"EmpName":"\u674e\u798f\u589e"},
{"EmpID":294,"EmpName":"\u674e\u5efa"},
{"EmpID":297,"EmpName":"\u674e\u6770\u5112"},
{"EmpID":298,"EmpName":"\u674e\u4fca\u51ef"},
{"EmpID":299,"EmpName":"\u674e\u5e0c\u81e3"},
{"EmpID":301,"EmpName":"\u5218\u7115\u5947"},
{"EmpID":300,"EmpName":"\u5218\u8f89"},
{"EmpID":302,"EmpName":"\u8def\u5bb6\u8fdb"},
{"EmpID":303,"EmpName":"\u9a6c\u5b50\u6d9b"},
{"EmpID":304,"EmpName":"\u6bdb\u6811\u5cad"},
{"EmpID":305,"EmpName":"\u7c73\u6842\u6885"},
{"EmpID":306,"EmpName":"\u725b\u6811\u6a80"},
{"EmpID":307,"EmpName":"\u6f58\u745e\u5b58"},
{"EmpID":308,"EmpName":"\u4efb\u56fd\u653f"},
{"EmpID":309,"EmpName":"\u82ae\u5efa\u8f89"},
{"EmpID":310,"EmpName":"\u738b\u5efa\u5fe0"},
{"EmpID":311,"EmpName":"\u738b\u514b\u65b0"},
{"EmpID":312,"EmpName":"\u738b\u7acb\u5cf0"}
]

[ejzhang]

Why it's not work? The combobox is empty.

[ejzhang]

I want to reload json data into combobox editor of datagrid column when i click a button each times. thanks very much!

[stworthy]

Please refer to this example http://jsfiddle.net/xAnDj/.

[ejzhang]

thanks first! but i need reload different data each times, such as fetch from a background script with different argument.

[stworthy]

After get the combobox editor object, call 'reload' method to reload its new data.

Code:

$(this).datagrid('beginEdit', rowIndex);
var ed = $(this).datagrid('getEditor',{index:rowIndex,field:'EmpID'});
$(ed.target).combobox('reload', yoururl);

[ejzhang]

I cannot do it correctly, help me please! these are my code snippets as following:

Code:

var empData = new Array();

Code:

onLoadSuccess:function(data){
if (data.rows.length > 0){
$(this).datagrid('selectRow',0);
var ed = $(this).datagrid('beginEdit', 0);
if (ed){
$(ed.target).combobox('loadData', empData);
}
$(this).datagrid('endEdit', 0);
}
}

Code:

$btnSearch.click(function(){
$.ajaxSettings.async = false;
$.getJSON('getjson.php', {"dept": $sltDept.children('option:selected').val()}, function(data){empData = data.rows;});
$.ajaxSettings.async = true;
$gridAllowance.datagrid('load',{
"dept":$sltDept.children('option:selected').val(),
"date":$dbxDate.val()
});
});

[stworthy]

Please try the following code.

Code:

onLoadSuccess:function(data){
if (data.rows.length > 0){
$(this).datagrid('selectRow',0);
$(this).datagrid('beginEdit', 0);
var ed = $(this).datagrid('getEditor', {index:0,field:'EmpID'});
if (ed){
$(ed.target).combobox('loadData', empData);
}
$(this).datagrid('endEdit', 0);
}
}

[ejzhang]

I try to test that code, but nothing loaded yet!

[stworthy]

Try to call console.log(empData) before loadData for combobox to see if the empData is empty.

[ejzhang]

That's ok!

Code:

$(this).datagrid('selectRow',0);
$(this).datagrid('beginEdit',0);
var ed = $(this).datagrid('getEditor', {index:0, field:'EmpID'});
if (ed){
console.log(empData);
$(ed.target).combobox('loadData', empData);
}
$(this).datagrid('endEdit',0);

[ejzhang]

some errors:

[stworthy]

Don't really known why to 'beginEdit' and then 'endEdit' at once in 'onLoadSuccess' event. Please refer to this example http://jsfiddle.net/gEJmG/. When click a row to begin editing, the combobox editor is created and its data is loaded with new 'empData'.

[ejzhang]

It's okay! thanks very much stworthy!