propertygrid combobox

[JeroenNL]

Hi there,

I want to use a combobox in my propertygrid. My setup:

Code:

var options = [
                { value: "O", label: "Object" },
                { value: "W", label: "World" },
                { value: "N", label: "Normals" }
]

{
                    "name": "My Field", "value": "O", "group": "Settings", "editor": {
                        "type": "combobox",
                        "options": {
                            valueField: 'value',
                            textField: 'label',
                            editable: false,
                            panelHeight: 100,
                            data: options
                        }
                    }
                },
            ]

The labels are displayed correctly when the combobox is opened (showing the dropdown panel). But after selecting an item and leaving the combobox, the value of the item (!) is displayed in the editor. Of course, I'd expect the label to be displayed.

Am I doing something wrong?

[stworthy]

First of all, define a 'label' property to the 'My Field' row.

Code:

var data = [{
	"name": "My Field", "value": "O", "label":"Object", "group": "Settings", 
	"editor": {
		"type": "combobox",
		"options": {
			valueField: 'value',
			textField: 'label',
			editable: false,
			panelHeight: 100,
			data: options
		}
	}
}];

And then define the column 'formatter' function to display the 'label' property value.

Code:

$('#pg').propertygrid({
	data: data,
	width: '98%',
	showGroup: true,
	showHeader: true,
	scrollbarSize: 0,
	columns: [[
		{field:'name',title:'Name',width:200,resizable:false,styler:EstiloEtiquetas},
		{field:'value',title:'Value',width:400,resizable:false,
			formatter:function(value,row){
				if (row.name == 'My Field'){
					return row.label || value;
				} else {
					return value;
				}
			}
		}
	]],
	onEndEdit: function(index,row){
		if (row.name == 'My Field'){
			var ed = $(this).datagrid('getEditors',index)[0];
			row.label = $(ed.target).combobox('getText');
		}

	}
});