Title: Changing of Editor type in datagrid not working
Post by: thecyberzone on February 12, 2015, 10:21:41 PM
I have defined onBeforeEdit of an editable datagrid as follows: onBeforeEdit: function(index,row){
flag = 0;
alert("onBeforeEdit");
var colDate = $(this).datagrid('getColumnOption', 'trgdate');
var colRating = $(this).datagrid('getColumnOption', 'mrating_ass');
if(row.sktype == 'General') {
colRating.editor = null;
alert(row.sktype);
colDate.editor = {
type:'combobox',
options:{
method: 'get',
valueField:'trgdate',
textField:'trgdate',
panelHeight:135,
url: 'rating.getPlan.php?yr='+yr+'&trgcode='+row.trgcode,
onLoadSuccess: function(data){
if (data.length == 0) {
// alert(data.length);
flag = 1;
alert('G'+flag);
colDate.editor = 'datebox';
}
}
}
};
}
else {
colRating.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
}
};
if (row.mrating_ass == 'Z'){
colDate.editor = {
type:'combobox',
options:{
method: 'get',
valueField:'trgdate',
textField:'trgdate',
panelHeight:135,
url: 'rating.getPlan.php?yr='+yr+'&trgcode='+row.trgcode,
onLoadSuccess: function(data){
if (data.length == 0) {
flag = 1;
alert('Z'+flag);
colDate.editor = 'datebox';
}
}
}
};
}
else {
colDate.editor = null;
}
}
alert(2+"-"+flag);
if (flag == 1) {
alert('Zero');
colDate.editor = null;
colDate.editor = {
type:'datebox'
};
}
},What is happening here, probably onLoadSuccess of colDate editor is firing with some delay, in above example, the firing sequence is as follows: 1. onBeforeEdit 2. then in If (row.sktype=='General') shows row.sktype -> General 3. Then it directly goes out of IF - ELSE and show 2 and Flag = 0 4. After it I don't know it shows G1 / Z1 in corresponding onLoadSuccess event. So, I couldnot change the colDate editor from combobox to datebox as flag show 0, but it should be 1 when there is no data loaded in combobox editor.
Title: Re: Changing of Editor type in datagrid not working
Post by: stworthy on February 14, 2015, 06:04:54 PM
Please extend a new editor to achieve your functionality. $.extend($.fn.datagrid.defaults.editors, {
combodate: {
init: function(container, options){
var input = $('<span><span class="c"><input class="c"></span><span class="d"><input class="d"></span></span>').appendTo(container);
input.find('input.c').combobox($.extend({}, options, {
onLoadSuccess: function(data){
setVisible();
options.onLoadSuccess.call(this, data);
}
}));
input.find('input.d').datebox();
setVisible();
return input;
function setVisible(){
var width = $(container).width();
if (!input.find('input.c').combobox('getData').length){
input.find('span.c').hide();
input.find('span.d').show();
input.find('input.d').datebox('resize',width);
} else {
input.find('span.c').show();
input.find('span.d').hide();
input.find('input.c').combobox('resize',width);
}
}
},
destroy: function(target){
$(target).find('input.c').combobox('destroy');
$(target).find('input.d').datebox('destroy');
},
getValue: function(target){
if ($(target).find('span.c').is(':visible')){
return $(target).find('input.c').combobox('getValue');
} else {
return $(target).find('input.d').datebox('getValue');
}
},
setValue: function(target, value){
$(target).find('input.c').combobox('setValue', value);
$(target).find('input.d').datebox('setValue', value);
},
resize: function(target, width){
if ($(target).find('span.c').is(':visible')){
$(target).find('input.c').combobox('resize', width);
} else {
$(target).find('input.d').datebox('resize', width);
}
}
}
})
Before editing a row, you can override the editor options. onBeforeEdit: function(index,row){
var col = $(this).datagrid('getColumnOption','productid');
$.extend(col.editor.options, {
url: 'products.json'
});
}
Title: Re: Changing of Editor type in datagrid not working
Post by: thecyberzone on February 14, 2015, 10:53:27 PM
Brilliant! You are great. Completely new Idea for my suggestion. Definitely have to try this option. But what you have told in onBeforeEdit event that I could not follow, should I define the column editor as combodate during column definition ? Or during loading of data, please elaborate the usage of the said example how I use that combodate? Basically this portion I could not follow, how you are using combodate here : Before editing a row, you can override the editor options.
Code:
onBeforeEdit: function(index,row){
var col = $(this).datagrid('getColumnOption','productid');
$.extend(col.editor.options, {
url: 'products.json'
});
} Please let me know what will be the column definition of trgdate and how it will be populated from remote server from onBeforeEdit event. I have tried as follows, but combobox is not appearing, only datebox coming where if I select anydate only current date appears. My code for trgdate column is as follows : {field:'trgdate',title:'PlanDate',width:100,align:'center',editor:'combodate'},and call for loading remote data under onBeforeEdit is as follows: var col = $(this).datagrid('getColumnOption','trgdate');
$.extend(col.editor.options, {
url: 'rating.getPlan.php?yr='+yr+'&trgcode='+row.trgcode
});Still only datebox appears, no combobox is there. And in datebox changing of date has no effect, only current date appears.
|