Title: tagbox in datagrid
Post by: zombie86 on February 17, 2020, 10:56:18 PM
Dear All, please can you help me on how to use tagbox editor in datagrid i do use for now a combobox and I need to change it to tagbox <th style="width:30%;" data-options="field:'vendor_id',formatter:function(value,row){return row.vendor_name;},editor:{type:'combobox'}">Vendor Name</th>
<th style="width:30%;" data-options="field:'vendor_ids',tagFormatter:function(value,row){var opts=$(this).tagbox('options'); return row ? row[opts.textField] : value;},editor:{type:'tagbox'}">Vendor Name</th><script type="text/javascript">
$('#dg_rfq_trans').datagrid({
onBeforeEdit: function(rowIndex,row){
var material = $('#dg_rfq_trans').datagrid('getColumnOption', 'material_id');
material.editor = {
type:'combobox',
options:{
valueField:'id',
textField:'text',
method:'get',
data:accounts.material,
required:true,
value:row.material_id,
onChange:function(value){
}
}
}
var vendor = $('#dg_rfq_trans').datagrid('getColumnOption', 'vendor_id');
vendor.editor = {
type:'combobox',
options:{
multiple:true,
valueField:'id',
textField:'text',
method:'get',
data:accounts.vendor,
required:true,
value:row.vendor_id,
onChange:function(value){
}
}
}
var vendors = $('#dg_rfq_trans').datagrid('getColumnOption', 'vendor_ids');
vendors.editor = {
type:'tagbox',
options:{
data:accounts.vendor,
valueField:'id',
textField:'text',
value:row.vendor_id,
limitToList: true,
hasDownArrow: true
}
}
}
});
</script>
Title: Re: tagbox in datagrid
Post by: jarry on February 18, 2020, 01:37:40 AM
Please extend the 'tagbox' editor before applying it. $.extend($.fn.datagrid.defaults.editors, {
tagbox: {
init: function(container,options){
var input = $('<input>').appendTo(container);
input.tagbox(options);
return input;
},
destroy: function(target){
$(target).tagbox('destroy');
},
getValue: function(target){
return $(target).tagbox('getValues').join(',');
},
setValue: function(target, value){
if (value){
$(target).tagbox('setValues', value.split(','));
} else {
$(target).tagbox('clear');
}
},
resize: function(target, width){
$(target).tagbox('resize', width);
}
}
})
Title: Re: tagbox in datagrid
Post by: zombie86 on February 19, 2020, 09:31:06 PM
thanks jarry,
you save my day, but when I set tagFormatter in markup way its not working properly, and returns the values instaed of textField
any suggestions?
Title: Re: tagbox in datagrid
Post by: jarry on February 20, 2020, 10:58:41 PM
The editor displays the tagbox component to edit and finally the datagrid will retrieve the values of the tagbox component. You should define the 'formatter' function on the column to display your expired text based on the field values.
|