Print Page - Datagrid cel editing with combobox

Title: Datagrid cel editing with combobox
Post by: angween on January 09, 2016, 01:38:02 AM

I have a datagrid table with rows data json look like this:

Code:

{
	"rows":[
		{"fruit":"Apple","color_option":"red,purple,blue"},
		{"fruit":"Banana","color_option":"purple,yellow,red"}
	],
	"total":"2"
}

And the columns option for my table look like this:

Code:

var color_obj=[];
.
.
.
// datagrid options..
...
onClickCell:onClickCell,				// i copied the row editing code from the Demo page.
onEndEdit:onEndEdit,
columns:[[
	{field:'fruit',title:'Fruit'},
	{field:'color_option',title:'Color',
		formatter:function(v){
			color_obj=[];
			colors=v.split(",")		
			// i try to convert the color_option string as object
			// to make it readable as combobox data
			$.each(colors,function(i,j){
				color_obj.push({val:j,txt:j})
			})
			return 'Choose the right color...';
		},
		editor:{
			type:'combobox',
			options:{
				data:color_obj,
				valueField:'val',
				textField:'txt',
				required:true
			}
		}
	}
]]

When i run it, combobox are works but the option list is blank. I'm sure my combobox codes still not complete, i wish to make a combobox with options from the color_option string that are different on each rows. Please help.

Thank you.

Title: Re: Datagrid cel editing with combobox
Post by: stworthy on January 09, 2016, 05:37:05 PM

You can not load combobox data in 'formatter' function, please use 'onBeginEdit' callback function instead.

Code:

$('#dg').datagrid({
	onBeginEdit: function(index,row){
		var color_obj = $.map(row.color_option.split(','), function(c){
			return {
				val: c,
				txt: c
			}
		});
		var ed = $(this).datagrid('getEditor', {
			index: index,
			field: 'color_option'
		});
		var cc = $(ed.target);
		cc.combobox('loadData', color_obj);
	}
})

Title: Re: Datagrid cel editing with combobox
Post by: angween on January 10, 2016, 08:02:04 PM

IT'S WORK, THANK YOU!

for who maybe need it, here is my working code:

Code:


var color_obj=[];
.
.
.
// datagrid options..
...
columns:[[
	{field:'fruit',title:'Fruit'},
	{field:'color_option',title:'Color',
		formatter:function(v){
			if(v=='') return 'Choose the right color...';
			else return v;
		},
		editor:{
			type:'combobox',
			options:{
				valueField:'val',
				textField:'txt',
				//required:true
			}
		}
	},
	onBeginEdit:function(index,row){
		var color_obj=$.map(row.color_option.split(','),function(c){
			return {
				val:c,
				txt:c
			}
		});
		var color_cell=$(this).datagrid('getEditor',{
			index:index,
			field:'color_option'
		});
		var cc=$(color_cell.target);
		cc.combobox('loadData',color_obj);
	},
	onClickCell:function(index,field,value){
		// copied from Demo page
	},
	onEndEdit:function(index,row){
		// copied from Demo page
	}
]]

Thank you.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: angween on January 09, 2016, 01:38:02 AM