|
thecyberzone
|
 |
« on: December 17, 2018, 09:21:59 AM » |
|
One datagrid is defined as follows: $('#dg1').datagrid({
method: 'get',
url: 'getNeed.php?dt1='+d1+'&dt2='+d2,
fitColumns:true,
rownumbers:true,
onClickCell:onClickCell,
columns:[[
{field:'ID',width:0,hidden:true},
{field:'TNO2',title:'T/No',width:50,align:'center'},
{field:'NAME',title:'Name',width:150,align:'left'},
{field:'DESCODE',title:'Desig',width:40,align:'center'},
{field:'PROGNAME',title:'Module',width:250,align:'left'},
{field:'PROGCODE',title:'ProgId',width:60,align:'center'},
{field:'DURATION',title:'Days',width:40,align:'center'},
{field:'ASSDATE',title:'Plan Date',width:80,align:'center'},
{field:'STATUS',title:'Status',width:50,align:'center',editor:'textbox'},
{field:'CALDATE',title:'Cal. Date',width:100,align:'center' ,
editor:{
type:'combobox',
options:{
valueField:'ST_DT',
textField:'ST_DT',
panelHeight:100,
required:true
}
}
},
{field:'ACTDATE',title:'Actual Date',width:80,align:'center'},
{field:'SOURCE',title:'Source',width:50,align:'center'}
]],I want to change the value of STATUS column depending on the input given by the user. Code is written in onAfterEdit event as follows, but setValue to STATUS column is not working. onAfterEdit:function(index,row){
row.editing = false;
$(this).datagrid('updateRow',{index:index, row:{}});
var ed = $(this).datagrid('getEditor',{index:index,field:'STATUS'});
$(ed.target).textbox('setValue','N'); // <-- This line is not working
if (row.CALDATE!='' && row.STATUS!='A') {
$.get("nomi.Update.php?tno="+row.TNO2+"&pc="+row.PROGCODE+"&cdt="+row.CALDATE);
$.messager.show({title:'Information', msg:row.NAME+' has been nominated successfully!',timeout:2000,showType:'slide'});
}
}Please help me by showing how to change the value of STATUS column. |
|
|
|
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #1 on: December 18, 2018, 02:44:43 AM » |
|
You can't get any editors in 'onAfterEdit' event. If you really want to do that, please use the 'onEndEdit' event instead.
|
|
|
|
|
Logged
|
|
|
|
|
thecyberzone
|
|
« Reply #2 on: December 18, 2018, 12:16:04 PM » |
|
Actually my aim is to change the value of STATUS column from 'P' to 'N' if I put any date in the blank cell of CALDATE column using combobox in the same row. Please suggest me easiest way to achieve the above output. I don't want to let STATUS column editable, just I want to change the value of this column programmatically. Only CALDATE column is changeable using combobox value here.
Thanks in advance.
|
|
|
|
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #3 on: December 18, 2018, 06:31:44 PM » |
|
The 'STATUS' column should have an 'editor', set it as a readonly textbox. {field:'STATUS',title:'Status',width:50,align:'center',editor:{type:'textbox',options:{readonly:true}}},
Listen to the 'onChange' event on 'CALDATE' editor and change the value for the 'STATUS' editor. $('#dg').datagrid({
onBeginEdit: function(index,row){
var edDate = $(this).datagrid('getEditor',{index:index,field:'CALDATE'})
var edStatus = $(this).datagrid('getEditor',{index:index,field:'STATUS'})
$(edStatus.target).textbox('textbox').css('textAlign','center')
$(edDate.target).combobox({
onChange: function(value){
$(edStatus.target).textbox('setValue', ...)
}
})
}
})
|
|
|
|
|
Logged
|
|
|
|
|
thecyberzone
|
|
« Reply #4 on: December 18, 2018, 11:31:34 PM » |
|
What I have done is given below, but still I cannot achieve the required effect. What I want if I select any value in the CALDATE column making the cell value non-empty, just after when focus goes to another cell, the cell value in the column STATUS in the same row will change from 'P' to 'N'. That is my requirement. $('#dg1').datagrid({
method: 'get',
url: 'getNeed.php?dt1='+d1+'&dt2='+d2+'&secode='+s.SECODE,
fitColumns:true,
rownumbers:true,
onClickCell:onClickCell,
columns:[[
{field:'ID',width:0,hidden:true},
{field:'TNO2',title:'T/No',width:50,align:'center'},
{field:'NAME',title:'Name',width:150,align:'left'},
{field:'DESCODE',title:'Desig',width:40,align:'center'},
{field:'PROGNAME',title:'Module',width:250,align:'left'},
{field:'PROGCODE',title:'ProgId',width:60,align:'center'},
{field:'DURATION',title:'Days',width:40,align:'center'},
{field:'ASSDATE',title:'Plan Date',width:80,align:'center'},
{field:'STATUS',title:'Status',width:50,align:'center',editor:'textbox'},
{field:'CALDATE',title:'Cal. Date',width:100,align:'center' ,
editor:{
type:'combobox',
options:{
valueField:'ST_DT',
textField:'ST_DT',
panelHeight:100,
required:true
}
}
},
{field:'ACTDATE',title:'Actual Date',width:80,align:'center'},
{field:'SOURCE',title:'Source',width:50,align:'center'}
]],
onBeforeEdit: function(index,row){
row.editing = true;
$(this).datagrid('updateRow',{index:index, row:{}});
//$.messager.alert("Error",'getDate.php?dt1='+d1+'&dt2='+d2+'&pc='+row.PROGCODE);
var colDate = $(this).datagrid('getColumnOption', 'CALDATE');
if (row.STATUS!='A') {
colDate.editor = {
type:'combobox',
options:{
method: 'get',
valueField:'ST_DT',
textField:'ST_DT',
panelHeight:100,
url: 'getDate.php?dt1='+d1+'&dt2='+d2+'&pc='+row.PROGCODE
}
};
}
else {
colDate.editor = null;
}
},
onAfterEdit:function(index,row){
row.editing = false;
$(this).datagrid('updateRow',{index:index, row:{}});
//$(this).datagrid('endEdit', getRowIndex(target));
//var ed = $(this).datagrid('getEditor',{index:index,field:'STATUS'});
//var x = $(ed.target).textbox('getValue');
//$.messager.show({title:'Information', msg:x,timeout:3000,showType:'slide'});
//$(ed.target).textbox('setValue','N');
if (row.CALDATE!='' && row.STATUS!='A') {
$.get("nomi.Update.php?tno="+row.TNO2+"&pc="+row.PROGCODE+"&cdt="+row.CALDATE);
$.messager.show({title:'Information', msg:row.NAME+' has been nominated successfully!',timeout:2000,showType:'slide'});
}
},
onEndEdit:function(index,row){
var edDate = $(this).datagrid('getEditor',{index:index,field:'CALDATE'});
var edStatus = $(this).datagrid('getEditor',{index:index,field:'STATUS'});
$(edStatus.target).textbox('textbox').css('textAlign','center');
$(edDate.target).combobox({
onSelect: function(value){
if(v!=null){
$(edStatus.target).textbox('setValue', 'N');
}
}
})
}
}); |
|
|
|
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #5 on: December 19, 2018, 12:39:23 AM » |
|
|
|
|
|
|
Logged
|
|
|
|
|
thecyberzone
|
|
« Reply #6 on: December 19, 2018, 08:03:55 AM » |
|
Thanks for your prompt help. I have tried your example and applied the same in my project, but onAfterEdit event is not working, I called this event to save the row in the backend table, but fails to save. I have used following code, please have a look and suggest. var editIndex = undefined;
function endEditing(ddv,index){
if (editIndex == undefined){return true}
if (ddv.datagrid('validateRow', editIndex)){
ddv.datagrid('endEdit', editIndex);
editIndex = undefined;
var rec = index;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (editIndex != index){
if (endEditing()){
$('#dg1').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg1').datagrid('getEditor', {index:index,field:field});
if (ed){
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function(){
$('#dg1').datagrid('selectRow', editIndex);
},0);
}
}
}
function onEndEdit(index, row){
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
}
$.extend($.fn.combogrid.defaults, {
filter: function(q, row){
var opts = $(this).combogrid('options');
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0;
}
});
// ************** for editable datagrid ****************************
function loadNeed() {
var g = $('#cg').combogrid('grid');
var s = g.datagrid('getSelected');
v = $('[name=upto]:checked').val();
if(v=='mon'){
var moncal = $('#dt').datetimespinner('getValue');
var selmon = moncal.split('-');
var dt1 = new Date(selmon[1],selmon[0],1);
var y = dt1.getFullYear();
var m = dt1.getMonth();
var dt2 = (new Date(new Date(y,m,1)-1));
var d2 = dt2.getFullYear()+'-'+dDigit(dt2.getMonth()+1)+'-'+dt2.getDate();
var dt1 = (new Date(y,m-1,1));
var d1 = dt1.getFullYear()+'-'+dDigit(dt1.getMonth()+1)+'-01';
}
else {
var moncal = $('#dt').datetimespinner('getValue');
var selmon = moncal.split('-');
var dt1 = new Date(selmon[1],selmon[0],1);
var y = dt1.getFullYear();
var m = dt1.getMonth();
if(m<4){
var dt1 = (new Date(y-1,4,1));
var d1 = dt1.getFullYear()+'-'+dDigit(dt1.getMonth())+'-01';
var dt2 = (new Date(y,3,31));
var d2 = dt2.getFullYear()+'-'+dDigit(dt2.getMonth()-1)+'-31';
}
else {
var dt1 = (new Date(y,4,1));
var d1 = dt1.getFullYear()+'-'+dDigit(dt1.getMonth())+'-01';
var dt2 = (new Date(y+1,3,31));
var d2 = dt2.getFullYear()+'-'+dDigit(dt2.getMonth()-1)+'-31';
}
}
$('#dg1').datagrid({
method: 'get',
url: 'getNeed.php?dt1='+d1+'&dt2='+d2+'&secode='+s.SECODE,
fitColumns:true,
rownumbers:true,
onClickCell:onClickCell,
columns:[[
{field:'ID',width:0,hidden:true},
{field:'TNO2',title:'T/No',width:50,align:'center'},
{field:'NAME',title:'Name',width:150,align:'left'},
{field:'DESCODE',title:'Desig',width:40,align:'center'},
{field:'PROGNAME',title:'Module',width:250,align:'left'},
{field:'PROGCODE',title:'ProgId',width:60,align:'center'},
{field:'DURATION',title:'Days',width:40,align:'center'},
{field:'ASSDATE',title:'Plan Date',width:80,align:'center'},
{field:'STATUS',title:'Status',width:50,align:'center',
editor:{
type:'textbox',
options:{
readonly:true
}
}
},
{field:'CALDATE',title:'Cal. Date',width:100,align:'center' ,
editor:{
type:'combobox',
options:{
valueField:'ST_DT',
textField:'ST_DT',
panelHeight:100,
required:true
}
}
},
{field:'ACTDATE',title:'Actual Date',width:80,align:'center'},
{field:'SOURCE',title:'Source',width:50,align:'center'}
]] ,
onBeforeEdit: function(index,row){
var colDate = $(this).datagrid('getColumnOption', 'CALDATE');
if (row.STATUS!='A') {
colDate.editor = {
type:'combobox',
options:{
method: 'get',
valueField:'ST_DT',
textField:'ST_DT',
panelHeight:100,
url: 'getDate.php?dt1='+d1+'&dt2='+d2+'&pc='+row.PROGCODE
}
};
}
else {
colDate.editor = null;
}
},
onBeginEdit: function(index,row){
var edStatus = $(this).datagrid('getEditor',{index:index,field:'STATUS'});
var edDate = $(this).datagrid('getEditor',{index:index,field:'CALDATE'});
$(edStatus.target).textbox('textbox').css('textAlign','center');
if (edDate){
var opts = $(edDate.target).combobox('options');
var tb = $(edDate.target).combobox('textbox');
tb.bind('focus', function(){
clearTimeout(opts.blurTimer)
}).bind('blur', function(){
opts.blurTimer = setTimeout(function(){
if ($(edDate.target).parent().length){
var value = $(edDate.target).combobox('getValue');
if (value){
$(edStatus.target).textbox('setValue', 'N');
}
}
},40)
})
}
},
onAfterEdit:function(index,row){
//$(this).datagrid('endEdit', getRowIndex(target));
if (row.CALDATE!='' && row.STATUS!='A') {
$.get("nomi.Update.php?tno="+row.TNO2+"&pc="+row.PROGCODE+"&cdt="+row.CALDATE);
$.messager.show({title:'Information', msg:row.NAME+' has been nominated successfully!',timeout:2000,showType:'slide'});
}
row.editing = false;
$(this).datagrid('updateRow',{index:index, row:{}});
}
});
}
Last get call is never executed. Even I put an alert / messenger.show statement just to see whether control goes in this event or not, but both are never executed. Still I could not find the cause. |
|
|
|
« Last Edit: December 19, 2018, 08:47:42 AM by thecyberzone »
|
Logged
|
|
|
|
|
thecyberzone
|
|
« Reply #7 on: December 19, 2018, 08:59:06 AM » |
|
One more thing I have noticed that after selecting one date from the combo column when I click to date column of another row, combobox editor does not open, it remains in the previous row, i.e., perhaps editing does not end on blur of the combobox control.
|
|
|
|
|
Logged
|
|
|
|
|
thecyberzone
|
|
« Reply #8 on: December 19, 2018, 09:08:20 AM » |
|
Problem found in if (endEditing()){ this calling, this should be if (endEditing($(this),index)){ as I have passed datagrid as parameter to endEditing function. Now everything is working fine. Thanks.
|
|
|
|
|
Logged
|
|
|
|
|
