Print Page - propertygrid needs a label

Title: propertygrid needs a label
Post by: eggbert on July 26, 2011, 09:30:07 AM

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.

Title: Re: propertygrid needs a label
Post by: stworthy on July 26, 2011, 11:38:46 PM

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}
	]]
});

Title: Re: propertygrid needs a label
Post by: eggbert on July 27, 2011, 10:13:03 AM

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.

Title: Re: propertygrid needs a label
Post by: stworthy on July 27, 2011, 11:34:40 PM

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}
		]]
	});
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: eggbert on July 26, 2011, 09:30:07 AM