PropertyGrid

Extend from $.fn.datagrid.defaults. Override defaults with $.fn.propertygrid.defaults.

Dependencies

Usage

Create a propertygrid

  1. <table id="pg"></table>  
  1. $('#pg').propertygrid({  
  2.     url:'propertygrid_data.json',  
  3.     showGroup:true  
  4. });  

Append a new row to propertygrid.

  1. var row = {  
  2.   name:'AddName',  
  3.   value:'',  
  4.   group:'Marketing Settings',  
  5.   editor:'text'  
  6. };  
  7. $('#pg').propertygrid('appendRow',row);  

Row Data

The propertygrid extend from datagrid. It's row data format is same as datagrid. As a property row, the following fields are required:
name: the field name.
value: the field value to be edited.
group: the group field value.
editor: the editor while editing property value.

Row data example:

  1. {"total":4,"rows":[  
  2.     {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},  
  3.     {"name":"Address","value":"","group":"ID Settings","editor":"text"},  
  4.     {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},  
  5.     {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{  
  6.         "type":"validatebox",  
  7.         "options":{  
  8.             "validType":"email"  
  9.         }  
  10.     }}  
  11. ]}  

Properties

The properties extend from datagrid, below is the added properties for propertygrid.

Name Type Description Default
showGroup boolean Defines if to show property group. false
groupField string Defines the group field name. group
groupFormatter function(group,rows) Defines how to format the group value. This function takes following parameters:
group: the group field value.
rows: the rows belong to its group.

Methods

The methods extend from datagrid, below is the added methods for propertygrid.

Name Parameter Description
expandGroup groupIndex Expand specified group.
collapseGroup groupIndex Collapse specified group.