here my code..
$(function(){
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:false,
showFooter:true,
idField:'itemid',
//url:'data/datagrid_data.json',
columns:[[
{field:'ck',checkbox:true},
{field:'itemid',title:'Item ID',width:60},
{field:'productid',title:'Product',width:100,
editor:{
type:'combobox',
options:{
mode:'remote',
valueField:'productid',
textField:'name',
url:'comboboxs.php',
required:true,
onChange:function(newValue, oldValue) {
ede = $("#tt").datagrid("getEditor", {index: 0, field:"kota"});
// alert(ede.toSource());
$(ede.target).combobox("setValue", newValue-1);
// getEditor
}
}
}
},
{field:'kota',title:'kota', width:80, editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'name',
data:[
{productid: 1, name: "satu"},
{productid: 2, name: "dua"},
{productid: 3, name: "tiga"},
],
required:true
}
}
},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
{field:'attr1',title:'Attribute',width:180,editor:'text'},
{field:'action',title:'Action',width:80,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" onclick="saverow(this)">Save</a> ';
var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
return e+d;
}
}
}
]],
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
insert()
}
}],
onBeforeEdit:function(index,row){
row.editing = true;
updateActions(index);
},
onAfterEdit:function(index,row){
row.editing = false;
updateActions(index);
},
onCancelEdit:function(index,row){
row.editing = false;
updateActions(index);
}
});
});
function updateActions(index){
$('#tt').datagrid('updateRow',{
index: index,
row:{}
});
}
