tagbox in datagrid

[zombie86]

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

Code:

<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>

Code:

<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>

[jarry]

Please extend the 'tagbox' editor before applying it.

Code:

$.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);
		}
	}
})

[zombie86]

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?

[jarry]

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.