propertygrid needs a label

[eggbert]

Hi,

I am just getting started with jquery easy ui.  I am really impressed so far.  However, one thing that is driving me crazy is that the propertygrid component has no "label" for the key... For example, a row of the json to load a property grid looks like:

Code:

{"name":"user_name","value":"Bill Smith","group":"ID Settings","editor":"text"}

So then then in the grid it looks like..

user_name - Bill Smith

I am using the key value pair from my database to simplify  things E.g "user_name" 

Would it not be good to have a label? So that I could do something like...

Code:

{"name":"user_name","label":"User Name","value":"Bill Smith","group":"ID Settings","editor":"text"}

I've tried to use the formatter property to format the "name" field, but it does not seem to work with property grid.

[stworthy]

Override the 'columns' property and you can customize the columns and display the 'label' field.

Code:

$('#tt').propertygrid({
	width:300,
	height:'auto',
	url:'propertygrid_data.json',
	showGroup:true,
	scrollbarSize:0,
	columns:[[
		{field:'label',title:'Label',width:100,resizable:true},
		{field:'value',title:'Value',width:100,resizable:false}
	]]
});

[eggbert]

Thanks for the reply.

Actually,  what I need is an additional field, but I can't seem to get propertygrid to bend to my will. 

Say I have a field/key called user_name.  I would not want to display "user_name" in the propertygrid, but rather User Name.   The label would be the "user presentable" string for the field.

So i'd have:

name = user_name:  The actual key/name, probably a database column.
label = User Name: - The user-friendly label of user_name, used ONLY for presentation.

[stworthy]

Define the 'formatter' function for your 'name' field:

Code:

$(function(){
	$('#tt').propertygrid({
		width:300,
		height:'auto',
		url:'propertygrid_data.json',
		showGroup:true,
		scrollbarSize:0,
		columns:[[
			{field:'name',title:'Name',width:100,resizable:true,
				formatter:function(value,row){
					return row.label;
				}
			},
			{field:'value',title:'Value',width:100,resizable:false}
		]]
	});
});