|
thecyberzone
|
 |
« on: January 03, 2015, 12:14:24 AM » |
|
I have used Datagrid in a project to show subGrid as detail view. Everything is working fine, only I want to use subgrid as editable where only two columns will be editable - Rating and Plan Date. If I use editable grid separately it is working fine, but when the same grid is used as subgrid/detail view, editiable option is not working. Specifically I think editcell in javascript is not functioning properly. Here I am giving the main PHP file as well as JS file. Anybody can help me please by rectifying the problem in the code. Thanks in advance. here is the output screenshot -  content of rating2.php PHP file - <?PHP
include("lock.php");
include("header.php");
?>
<div id="code1">
<div id="dlg">
<script type="text/javascript" src="rating2.js"></script>
<script type="text/javascript" src="ui/datagrid-detailview.js"></script>
<div id="toolbar">
<form id="fm" method="post" novalidate>
<div class="fitem">
<label2>Year :</label2>
<input id="year" name="year" class="easyui-combobox"
style="width:100px;"
data-options="
valueField:'year',
textField:'tyear',
data: [ {year:'2012', tyear:'2012-2013'},
{year:'2013', tyear:'2013-2014'},
{year:'2014', tyear:'2014-2015'},
{year:'2015', tyear:'2015-2016'},
{year:'2016', tyear:'2016-2017'},
{year:'2017', tyear:'2017-2018'},
{year:'2018', tyear:'2018-2019'},
{year:'2019', tyear:'2019-2020'},
{year:'2020', tyear:'2020-2021'}
],
onSelect: function() {
$('#cg').combogrid('clear');
$('#jobpos').combobox('clear');
$('#dg1').datagrid('loadData', []);
}" />
</div>
<div class="fitem">
<label2>Section:</label2>
<select id="cg" name="cg" class="easyui-combogrid" style="width:220px; padding-right:10px;"
data-options="panelWidth: 500,
idField: 'secode', textField: 'section',
url: 'welcome.getSection.php',
columns: [[
{field:'secode',title:'SeCode',width:50,align:'right'},
{field:'section',title:'Section',width:220},
{field:'deptname',title:'Department',width:200}
]],
required:true,
onSelect: function() {
var g = $('#cg').combogrid('grid');
var r = g.datagrid('getSelected');
$('#jobpos').combobox('clear');
$('#jobpos').combobox('reload', 'allot.getJobpos.php?secode='+r.secode);
$('#dg1').datagrid('loadData', []);
}"></select>
<label>Job Position:</label>
<input id="jobpos" name="jobpos" class="easyui-combobox"
style="width:220px;"
data-options="valueField:'jobpos', textField:'jobpos',
required:true,
onSelect: function(rec) {
var g = $('#cg').combogrid('grid');
var r = g.datagrid('getSelected');
$('#dg1').datagrid('loadData', []);
$('#dg1').datagrid({
url:'allot.Alloted.php?cg='+r.secode+'&jobpos='+encodeURIComponent(rec.jobpos),
columns:[[
{field:'tno',title:'T/No',width:60},
{field:'name',title:'Name',width:670}
]]
});
} " />
</div>
</form>
</div>
<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:'',
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:50,
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>
<div id="table2" style="display:block; background:#fff; width:800px; height:350px; padding 0px 0px; float:left; border:1px solid #ddd;">
<div id="dlg1" style="display:block; width:800px;padding:0px 0px; float:left;">
<table id="dg1" title="Available Employee" class="easyui-datagrid" style="width:800px;height:350px; float:left;"
rownumbers="true" singleSelect="true"
data-options="" >
</table>
</div>
</div>
</div>
</div>
<?PHP
include("footer.php");
?>
And here is the content of rating2.js file $.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');
if (ddv.datagrid('validateRow', editIndex)){
ddv.datagrid('endEdit', editIndex);
editIndex = undefined;
var yr = $('#year').combobox('getValue');
var rec = ddv.datagrid('getSelected');
$.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;
}
}
And thanks in advance ..... |
