Inline editing of the DataGrid, Cascade of ComboBox.

Select a province and the information in the city will change accordingly. When the value of the first ComboBox changes, accessing the server, getting the data and assigning it to the second ComboBox, fetching the data is an AJAX time, and the second ComboBox object is obtained in the first ComboBox:

. $.get (ctx+ ' region/ajaxregionlist.html ', {parentid:newvalue},function (data) {
var ed=$ ("#" +frm+ "#addresstest"). DataGrid (' Geteditor ', {
Index: $rowIndexForAddress,//index of the row currently being edited
Field: ' Country ',//column name of the second ComboBox
});
$ (Ed.target). ComboBox (' Clear ');
$ (Ed.target). ComboBox (' LoadData ', data);
}, ' json ');

$rowIndexForAddress can be obtained in onbeforeedit and emptied in Onafteredit.
2. $.get (ctx+ ' region/ajaxregionlist.html ', {parentid:newvalue},function (data) {
var row = $ ("#" +frm+ "#addresstest"). DataGrid (' getselected ');
var Rindex = $ ("#" +frm+ "#addresstest"). DataGrid (' Getrowindex ', row);
var ed = $ ("#" +frm+ "#addresstest"). DataGrid (' Geteditor ', {
Index:rindex,
Field: ' Country ',
});
$ (Ed.target). ComboBox (' Clear ');
$ (Ed.target). ComboBox (' LoadData ', data);
}, ' json ');
The first method is recommended. The second method has a bug, the question exists on this sentence: var row = $ ("#" +frm+ "#addresstest"). DataGrid (' getselected '); There are two data in the DataGrid, you have modified the first one, the first one is in the edit state, and you click on the second one. And then go back to the first one. This time row is the second, index is 1 (should be 0);

{field: ' Province ', title: ' Province ', align: ' center ', width:100,
editor:{
Type: ' ComboBox ',
options:{
Valuefield: ' Code ',
TextField: ' Name ',
Editable:false,
Panelheight: ' 100 ',
Required:true,
Queryparams:{parentid: ' 0 '},
url:ctx+ ' region/ajaxregionlist.html ',
Onchange:function (Newvalue,oldvalue) {
$.get (ctx+ ' region/ajaxregionlist.html ', {parentid:newvalue},function (data) {
var ed=$ ("#" +frm+ "#addresstest"). DataGrid (' Geteditor ', {
Index: $rowIndexForAddress,
Field: ' Country ',
});
$ (Ed.target). ComboBox (' Clear ');
$ (Ed.target). ComboBox (' LoadData ', data);
}, ' json ');
},
Onloadsuccess:function () {
var target=$ (this);
var data=target.combobox ("GetData");
var options=target.combobox ("Options");
if (data&&data.length>0) {
var fs=data[0];
Target.combobox ("SetValue", Fs[options.valuefield]);
}
},
Formatter:function (Row) {
var opts=$ (this). ComboBox (' Options ');
return Row[opts.textfield];
},
Onselect:function (record) {
$protext =record.name;
},
}},
},
{field: ' Country ', title: ' Downtown ', align: ' center ', width:100,
editor:{
Type: ' ComboBox ',
options:{
Valuefield: ' Code ',
TextField: ' Name ',
Editable:false,
Panelheight: ' 100 ',
Required:true,
Onchange:function (Newvalue,oldvalue) {
$.get (ctx+ ' region/ajaxregionlist.html ', {parentid:newvalue},function (data) {
var ed=$ ("#" +frm+ "#addresstest"). DataGrid (' Geteditor ', {
Index: $rowIndexForAddress,
Field: ' Street ',
});
$ (Ed.target). ComboBox (' Clear ');
$ (Ed.target). ComboBox (' LoadData ', data);
}, ' json ');
},
Onloadsuccess:function () {
var target=$ (this);
var data=target.combobox ("GetData");
var options=target.combobox ("Options");
if (data&&data.length>0) {
var fs=data[0];
Target.combobox ("SetValue", Fs[options.valuefield]);
}
},
Formatter:function (Row) {
var opts=$ (this). ComboBox (' Options ');
return Row[opts.textfield];
},
Onselect:function (record) {
$citytext =record.name;
},
}},
},
{field: ' Street ', title: ' Street ', align: ' center ', width:100,
editor:{
Type: ' ComboBox ',
options:{
Valuefield: ' Code ',
TextField: ' Name ',
Editable:false,
Panelheight: ' 100 ',
Required:true,
Onloadsuccess:function () {
var target=$ (this);
var data=target.combobox ("GetData");
var options=target.combobox ("Options");
if (data&&data.length>0) {
var fs=data[0];
Target.combobox ("SetValue", Fs[options.valuefield]);
}
},
Formatter:function (Row) {
var opts=$ (this). ComboBox (' Options ');
return Row[opts.textfield];
},
Onselect:function (record) {
$streettext =record.name;
$countyId =record.code;
}
}}
},
{field: ' AddressInfo ', title: ' Detailed Address ', align: ' center ', width:250,
editor:{
Type: ' Validatebox ',
options:{
Validtype: ' lenx[50] ',
Required:true,
}
},
},

Inline editing of the DataGrid, Cascade of ComboBox.