^1374129215707
@xworker.html.jqueryesayui.datagridtree.propertygrid
sname
propertygrid
slabel
propertygrid
sdescriptors
xworker.lang.MetaDescriptor3
sextends
xworker.html.jqueryesayui.datagridtree.datagrid
smany
true
seditCols
2
sinitialization
false
smodifier
public
sinheritDescription
false
Sdescription
#$@text#$@
<p style="text-align: left;">Extend from $.fn.datagrid.defaults. Override defaults with $.fn.propertygrid.defaults.</p>

<p style="text-align: left;">The propertygrid provides users an interface for browsing and editing the properties of an object. The property grid is an inline editing datagrid. It is fairly easy to use. Users can easily create a hierarchical list of editable properties and represent any data type of item. The property grid comes with a built-in sorting and grouping features.</p>

<p><img src="http://www.jeasyui.com/documentation/images/propertygrid.png" style="-webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); color:rgb(0, 0, 0); font-size-adjust:none; font-stretch:normal; font:14px/normal verdana, helvetica, arial, sans-serif; letter-spacing:normal; text-align:left; text-indent:0px; text-transform:none; white-space:normal; word-spacing:0px" /></p>

<h4 style="text-align: left;">Dependencies</h4>

<ul>
	<li>datagrid</li>
</ul>

<h4 style="text-align: left;">Usage</h4>

<p style="text-align: left;">Create a propertygrid in markup. Notice that the columns have been built-in and don&#39;t need to declare them again.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>&lt;</strong><strong>table</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">id</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;pg&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">class</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;easyui-propertygrid&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">style</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;width:300px&quot;</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red; font-size:14px">data-options</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;url:&#39;get_data.php&#39;,showGroup:true,scrollbarSize:0&quot;</span><strong>&gt;</strong><strong>&lt;/</strong><strong>table</strong><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
</ol>
</div>

<p style="text-align: left;">Create a propertygrid using javascript.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>&lt;</strong><strong>table</strong><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">id</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;pg&quot;</span><span style="color:black; font-size:14px">&nbsp;</span><span style="color:red; font-size:14px">style</span><span style="color:black; font-size:14px">=</span><span style="color:blue; font-size:14px">&quot;width:300px&quot;</span><strong>&gt;</strong><strong>&lt;/</strong><strong>table</strong><strong>&gt;</strong><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
</ol>
</div>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><span style="color:black; font-size:14px">$(</span><span style="color:blue; font-size:14px">&#39;#pg&#39;</span><span style="color:black; font-size:14px">).propertygrid({&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;<span style="color:blue; font-size:14px">&#39;get_data.php&#39;</span><span style="color:black; font-size:14px">,&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;showGroup:&nbsp;<strong>true</strong><span style="color:black; font-size:14px">,&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;scrollbarSize:&nbsp;0&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">});&nbsp;&nbsp;</span></li>
</ol>
</div>

<p style="text-align: left;">Append a new row to propertygrid.</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><strong>var</strong><span style="color:black; font-size:14px">&nbsp;row&nbsp;=&nbsp;{&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;name:<span style="color:blue; font-size:14px">&#39;AddName&#39;</span><span style="color:black; font-size:14px">,&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;value:<span style="color:blue; font-size:14px">&#39;&#39;</span><span style="color:black; font-size:14px">,&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;group:<span style="color:blue; font-size:14px">&#39;Marketing&nbsp;Settings&#39;</span><span style="color:black; font-size:14px">,&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;editor:<span style="color:blue; font-size:14px">&#39;text&#39;</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">};&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">$(<span style="color:blue; font-size:14px">&#39;#pg&#39;</span><span style="color:black; font-size:14px">).propertygrid(</span><span style="color:blue; font-size:14px">&#39;appendRow&#39;</span><span style="color:black; font-size:14px">,row);&nbsp;&nbsp;</span></span></li>
</ol>
</div>

<h4 style="text-align: left;">Row Data</h4>

<p style="text-align: left;">The propertygrid extend from datagrid. It&#39;s row data format is same as datagrid. As a property row, the following fields are required:<br />
name: the field name.<br />
value: the field value to be edited.<br />
group: the group field value.<br />
editor: the editor while editing property value.</p>

<p style="text-align: left;">Row data example:</p>

<div class="dp-highlighter" style="font: 12px/normal Consolas, &quot;Courier New&quot;, Courier, mono; padding: 1px; width: 1584px; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; overflow: auto; margin-left: 9px; word-spacing: 0px; white-space: normal; word-break: break-all; word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;">
<div class="bar" style="font-size: 14px;">
<div class="tools" style="margin: 0px; padding: 3px; text-align: left; color: black; font-size: 14px;">&nbsp;</div>
</div>

<ol start="1">
	<li><span style="color:black; font-size:14px"><span style="color:black; font-size:14px">{</span><span style="color:blue; font-size:14px">&quot;total&quot;</span><span style="color:black; font-size:14px">:4,</span><span style="color:blue; font-size:14px">&quot;rows&quot;</span><span style="color:black; font-size:14px">:[&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;{<span style="color:blue; font-size:14px">&quot;name&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;Name&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;value&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;Bill&nbsp;Smith&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;group&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;ID&nbsp;Settings&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;editor&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;text&quot;</span><span style="color:black; font-size:14px">},&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;{<span style="color:blue; font-size:14px">&quot;name&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;Address&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;value&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;group&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;ID&nbsp;Settings&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;editor&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;text&quot;</span><span style="color:black; font-size:14px">},&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;{<span style="color:blue; font-size:14px">&quot;name&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;SSN&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;value&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;123-456-7890&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;group&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;ID&nbsp;Settings&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;editor&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;text&quot;</span><span style="color:black; font-size:14px">},&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;{<span style="color:blue; font-size:14px">&quot;name&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;Email&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;value&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;bill@gmail.com&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;group&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;Marketing&nbsp;Settings&quot;</span><span style="color:black; font-size:14px">,</span><span style="color:blue; font-size:14px">&quot;editor&quot;</span><span style="color:black; font-size:14px">:{&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue; font-size:14px">&quot;type&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;validatebox&quot;</span><span style="color:black; font-size:14px">,&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue; font-size:14px">&quot;options&quot;</span><span style="color:black; font-size:14px">:{&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue; font-size:14px">&quot;validType&quot;</span><span style="color:black; font-size:14px">:</span><span style="color:blue; font-size:14px">&quot;email&quot;</span><span style="color:black; font-size:14px">&nbsp;&nbsp;</span></span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;}}&nbsp;&nbsp;</span></li>
	<li><span style="color:black; font-size:14px">]}&nbsp;&nbsp;</span></li>
</ol>
</div>

<h4 style="text-align: left;">Pro</h4>
#$@text#$@
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.datagridtree.propertygrid/@showGroup
sname
showGroup
sinputtype
truefalse
sshowLabel
true
sgroup
propertygrid
sreadOnly
false
sdefault
false
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Defines if to show property group.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.datagridtree.propertygrid/@groupField
sname
groupField
sshowLabel
true
sgroup
propertygrid
sreadOnly
false
sdefault
'group'
sinheritDescription
false
sdescription
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Defines the group field name.</span></p>
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.datagridtree.propertygrid/@proxy1
sname
groupFormatter
sdescriptors
xworker.lang.MetaDescriptor3/@thing,xworker.lang.MetaDescriptor3
sextends
xworker.html.jqueryesayui.EasyUIFunction
smany
true
seditCols
2
sinitialization
false
sgroup
jquery-easyui.propertygrid
smodifier
public
sinheritDescription
false
Sdescription
#$@text#$@
<p><span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">Defines how to format the group value. This function takes following parameters:</span><br />
<span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">group: the group field value.</span><br />
<span style="background-color:rgb(255, 255, 255); color:rgb(0, 0, 0)">rows: the rows belong to its group.</span></p>
#$@text#$@
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.datagridtree.propertygrid/@proxy1/@name
sname
name
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.datagridtree.propertygrid/@proxy1/@label
sname
label
sshowLabel
true
sreadOnly
false
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
@xworker.html.jqueryesayui.datagridtree.propertygrid/@proxy1/@params
sname
params
sshowLabel
true
ssize
60
sreadOnly
false
sdefault
group,rows
sinheritDescription
false
svalidateAllowBlank
true
LvalidateOnBlur
true
LallowDecimals
true
LallowNegative
true
sdescriptors
xworker.lang.MetaDescriptor3/@attribute
sth_createIndex
false
sth_mark
false
