I have tried above code, it works fine with edatagrid. But in my project I have to update each subgird row data in the underlying table as soon as it changed or lost focus. So in my project I could not use edatagrid rather I have tried by implementing Cell Editing feature of subgrid. Just have a look at the following code snippet:
<script type="text/javascript">
$(function(){
$('#dg1').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div style="padding:2px"><table id="dg2" class="ddv" ></table></div>';
},
onExpandRow: function(index,row){
var yr = $('#year').combobox('getValue');
var g = $('#cg').combogrid('grid');
var s = g.datagrid('getSelected');
var j = encodeURIComponent($('#jobpos').combobox('getValue'));
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.datagrid({
method: 'get',
url:'rating.getSkills.php?yr='+yr+'&secode='+s.secode+'&jobpos='+j+'&tno='+row.tno,
onClickCell: onClickCell,
fitColumns:true,
singleSelect:true,
rownumbers:true,
loadMsg:'loading...',
height:'auto',
columns:[[
{field:'year',title:'',width:0,hidden:true},
{field:'tno',title:'',width:0,hidden:true},
{field:'skname',title:'Functional Competencies',width:250},
{field:'sktype',title:'',width:0,hidden:true},
{field:'mrating_ass',title:'Rating',width:60,
editor:{
type:'combobox',
options:{
valueField:'mrating_ass',
textField:'mrating_ass',
data: [ {mrating_ass:'X', mrating_ass:'X'},
{mrating_ass:'Y', mrating_ass:'Y'},
{mrating_ass:'Z', mrating_ass:'Z'},
{mrating_ass:'NA', mrating_ass:'NA'}
],
panelHeight:90,
required:true
}
}
},
{field:'mapprog',title:'Associated Module',width:380},
{field:'trgdate',title:'Plan Date',width:100,
editor:{
type:'combobox',
options:{
valueField:'trgdate',
textField:'trgdate',
data: [{trgdate:'', trgdate:''}]
}
}
}
]],
onResize:function(){
$('#dg1').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$('#dg1').datagrid('fixDetailRowHeight',index);
},0);
}
});
$('#dg1').datagrid('fixDetailRowHeight',index);
}
});
});
</script>
Here editCell method has been implemented as follows. What I have seen that there may be some problem to reference the subgrid itself or each cell of the subgrid and that's why method endEdit is not functioning properly, after end of editing the focus does not goes anywhere if I click on the other cell. Cell Editing code is given below :
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv'); // here I am tring to reference subgrid
if (ddv.datagrid('validateRow', editIndex)){ // may be problem here to reference subgid
ddv.datagrid('endEdit', editIndex); // may be problem here to reference subgid
editIndex = undefined;
var yr = $('#year').combobox('getValue');
var rec = ddv.datagrid('getSelected'); // same way I have to reference subgrid row here
$.get("rating2.skUpdate.php?yr="+yr+"&tno="+rec.tno+"&skname="+encodeURIComponent(rec.skname)+"&mra="+rec.mrating_ass);
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (endEditing()){
$(this).datagrid('selectRow', index)
.datagrid('editCell', {index:index,field:field});
editIndex = index;
}
}
If you please rectify this cell editing code it would be very useful to me. Thanking you once again.
Complete code and screenshot you may view at
http://www.jeasyui.com/forum/index.php?topic=4319.0
