jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
912 lines (903 loc) • 648 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, Grid, Grid plugin, Grid View, Help Documentation, jQuery dataGrid, jQuery Mobile Grid, JavaScript Mobile Grid, Responsive Grid, Adaptive Grid Layout" />
<meta name="description" content="This page represents the help documentation of the jqxGrid widget." />
<title>jqxGrid API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties</h2>
<table class="documentation-table">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>Appearance
</th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>altrows</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the alternating rows.
</p>
<h4>Code example</h4>
<p>
Set the <code>altrows</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ altrows: false}); </code></pre>
<p>
Get the <code>altrows</code> property.
</p>
<pre><code>var altrows = $('#jqxGrid').jqxGrid('altrows'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4zAHJ/">altrows is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>altstart</span>
</td>
<td>
<span>Number</span>
</td>
<td>1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This property specifies the first alternating row.
</p>
<h4>Code example</h4>
<p>
Set the <code>altstart</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ altstart: 2}); </code></pre>
<p>
Get the <code>altstart</code> property.
</p>
<pre><code>var altstart = $('#jqxGrid').jqxGrid('altstart'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VRYVU/">altstart is set to 2</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>altstep</span>
</td>
<td>
<span>Number</span>
</td>
<td>1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the alternating step
</p>
<h4>Code example</h4>
<p>
Set the <code>altstep</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ altstep: 2}); </code></pre>
<p>
Get the <code>altstep</code> property.
</p>
<pre><code>var altstep = $('#jqxGrid').jqxGrid('altstep'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QucxJ/">altstep is set to 2</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span199'>autoshowloadelement</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether the loading image should be displayed until the Grid's data is loaded.
</p>
<h4>Code example</h4>
<p>
Set the <code>autoshowloadelement</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ autoshowloadelement: false}); </code></pre>
<p>
Get the <code>autoshowloadelement</code> property.
</p>
<pre><code>var autoshowloadelement = $('#jqxGrid').jqxGrid('autoshowloadelement'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HgU6P/">autoshowloadelement is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span146'>autoshowfiltericon</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>(requires jqxgrid.filter.js)</p>
<p>
Displays the filter icon only when the column is filtered. When the value of this property is set to false, all grid columns will display a filter icon when the filtering is enabled.
</p>
<h4>Code example</h4>
<p>
Set the <code>autoshowfiltericon</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ autoshowfiltericon: false}); </code></pre>
<p>
Get the <code>autoshowfiltericon</code> property.
</p>
<pre><code>var autoshowfiltericon = $('#jqxGrid').jqxGrid('autoshowfiltericon'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cUaH7/">autoshowfiltericon is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span107'>autoshowcolumnsmenubutton</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>(requires jqxmenu.js)</p>
<p>
Sets or gets whether the columns menu button will be displayed only when the mouse cursor is over a columns header or will be always displayed.
</p>
<h4>Code example</h4>
<p>
Set the <code>autoshowcolumnsmenubutton</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ autoshowcolumnsmenubutton: false}); </code></pre>
<p>
Get the <code>autoshowcolumnsmenubutton</code> property.
</p>
<pre><code>var autoshowcolumnsmenubutton = $('#jqxGrid').jqxGrid('autoshowcolumnsmenubutton'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PmqY7/ ">autoshowcolumnsmenubutton is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span92'>clipboard</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the clipboard operations
</p>
<h4>Code example</h4>
<p>
Set the <code>clipboard</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ clipboard: false}); </code></pre>
<p>
Get the <code>clipboard</code> property.
</p>
<pre><code>var clipboard = $('#jqxGrid').jqxGrid('clipboard'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Dp5tA/">clipboard is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>closeablegroups</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>(requires jqxgrid.grouping.js)</p>
<p>
When the value of this property is true, a close button is displayed in each grouping column.
</p>
<h4>Code example</h4>
<p>
Set the <code>closeablegroups</code> property specified.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ closeablegroups: false}); </code></pre>
<p>
Get the <code>closeablegroups</code> property.
</p>
<pre><code>var closeablegroups = $('#jqxGrid').jqxGrid('closeablegroups'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7UCsH/">closeablegroups is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span40'>columnsmenuwidth</span>
</td>
<td>
<span>Number</span>
</td>
<td>15
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>(requires jqxmenu.js)</p>
<p>
Sets or gets the columns menu width.
</p>
<h4>Code example</h4>
<p>
Set the <code>columnsmenuwidth</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ columnsmenuwidth: 20}); </code></pre>
<p>
Get the <code>columnsmenuwidth</code> property.
</p>
<pre><code>var columnsmenuwidth = $('#jqxGrid').jqxGrid('columnsmenuwidth'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zLunZ/ ">columnsmenuwidth is set to 40</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span223'>columnmenuopening</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.
</p>
<h4>Code example</h4>
<p>
Set the <code>columnmenuopening</code> property.
</p>
<pre><code>
$('#jqxGrid').jqxGrid({ columnmenuopening: function (menu, datafield, height) {
var column = $("#jqxgrid").jqxGrid('getcolumn', datafield);
if (column.filtertype === "custom") {
menu.height(155);
}
else menu.height(height);
}});
</code></pre>
<p>
Get the <code>columnmenuopening</code> property.
</p>
<pre><code>var columnmenuopening = $('#jqxGrid').jqxGrid('columnmenuopening'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zhprkz7s/">columnmenuopening is set to custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span224'>columnmenuclosing</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback called when a column menu is closing. Three params are passed - menu, datafield and menu's height. If you return false, the closing will be cancelled.
</p>
<h4>Code example</h4>
<p>
Set the <code>columnmenuclosing</code> property.
</p>
<pre><code>
$('#jqxGrid').jqxGrid({ columnmenuclosing: function (menu, datafield, height) {
}});
</code></pre>
<p>
Get the <code>columnmenuclosing</code> property.
</p>
<pre><code>var columnmenuclosing = $('#jqxGrid').jqxGrid('columnmenuclosing'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zhprkz7s/">columnmenuclosing is set to custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span227'>cellhover</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback called when a cell is hovered.
</p>
<h4>Code example</h4>
<p>
Set the <code>cellhover</code> property.
</p>
<pre><code>
$('#jqxGrid').jqxGrid({ cellhover: function (cellhtmlElement, x, y) {
}});
</code></pre>
<p>
Get the <code>cellhover</code> property.
</p>
<pre><code>var cellhover = $('#jqxGrid').jqxGrid('cellhover'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tguhan39/">cellhover is set to custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span110'>enablekeyboarddelete</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the delete of a cell/row values by using the "delete" key. The property has effect when <code>editable</code> property is set to true, a row or cell is selected and the user presses the Del key.
</p>
<h4>Code example</h4>
<p>
Set the <code>enablekeyboarddelete</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ enablekeyboarddelete: false}); </code></pre>
<p>
Get the <code>enablekeyboarddelete</code> property.
</p>
<pre><code>var enablekeyboarddelete = $('#jqxGrid').jqxGrid('enablekeyboarddelete'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cqrnt/">enablekeyboarddelete is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span180'>enableellipsis</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether ellipsis will be displayed, if the cells or columns content overflows.
</p>
<h4>Code example</h4>
<p>
Set the <code>enableellipsis</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ enableellipsis: false}); </code></pre>
<p>
Get the <code>enableellipsis</code> property.
</p>
<pre><code>var enableellipsis = $('#jqxGrid').jqxGrid('enableellipsis'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QBxfk/ ">enableellipsis is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span213'>enablemousewheel</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether mousewheel scrolling is enabled.
</p>
<h4>Code example</h4>
<p>
Set the <code>enablemousewheel</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ enablemousewheel: false}); </code></pre>
<p>
Get the <code>enablemousewheel</code> property.
</p>
<pre><code>var enablemousewheel = $('#jqxGrid').jqxGrid('enablemousewheel'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QLt6b/ ">enablemousewheel is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span43'>enableanimations</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the grid animations.
</p>
<h4>Code example</h4>
<p>
Set the <code>enableanimations</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ enableanimations: false}); </code></pre>
<p>
Get the <code>enableanimations</code> property.
</p>
<pre><code>var enableanimations = $('#jqxGrid').jqxGrid('enableanimations'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sDC74/">enableanimations is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span44'>enabletooltips</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the grid tooltips.
</p>
<h4>Code example</h4>
<p>
Set the <code>enabletooltips</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ enabletooltips: false}); </code></pre>
<p>
Get the <code>enabletooltips</code> property.
</p>
<pre><code>var enabletooltips = $('#jqxGrid').jqxGrid('enabletooltips'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n8Q3z/">enabletooltips is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span45'>enablehover</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the grid rows hover state.
</p>
<h4>Code example</h4>
<p>
Set the <code>enablehover</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ enablehover: false}); </code></pre>
<p>
Get the <code>enablehover</code> property.
</p>
<pre><code>var enablehover = $('#jqxGrid').jqxGrid('enablehover'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nA66a/">enablehover is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span197'>enablebrowserselection</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables the text selection of the browser.
</p>
<h4>Code example</h4>
<p>
Set the <code>enablebrowserselection</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ enablebrowserselection: true}); </code></pre>
<p>
Get the <code>enablehover</code> property.
</p>
<pre><code>var enablebrowserselection = $('#jqxGrid').jqxGrid('enablebrowserselection'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pRQLd/">enablebrowserselection is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span208'>everpresentrowposition</span>
</td>
<td>
<span>String</span>
</td>
<td>'top'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the position of the ever present row. Possible values: "top", "bottom", "topAboveFilterRow".
</p>
<h4>Code example</h4>
<p>
Set the <code>everpresentrowposition</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ everpresentrowposition: 'bottom'}); </code></pre>
<p>
Get the <code>everpresentrowposition</code> property.
</p>
<pre><code>var everpresentrowposition = $('#jqxGrid').jqxGrid('everpresentrowposition'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/x7p4dfy5/">everpresentrowposition is set to 'bottom'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span220'>everpresentrowheight</span>
</td>
<td>
<span>Number</span>
</td>
<td>30
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the height of the ever present row.
</p>
<h4>Code example</h4>
<p>
Set the <code>everpresentrowheight</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ everpresentrowheight: 35}); </code></pre>
<p>
Get the <code>everpresentrowheight</code> property.
</p>
<pre><code>var everpresentrowheight = $('#jqxGrid').jqxGrid('everpresentrowheight'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c3jsogjs/">everpresentrowheight is set to 32</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span221'>everpresentrowactions</span>
</td>
<td>
<span>String</span>
</td>
<td>"add reset"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the actions of the ever present row. Possible values: "add", "reset", "update", "delete".
Instead of "add", you can also use "addBottom" which is the same as "add", but adds the new row to the bottom of the Grid.
</p>
<h4>Code example</h4>
<p>
Set the <code>everpresentrowactions</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ everpresentrowactions: "add update delete reset"}); </code></pre>
<p>
Get the <code>everpresentrowactions</code> property.
</p>
<pre><code>var everpresentrowactions = $('#jqxGrid').jqxGrid('everpresentrowactions'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vkLvyn69/">everpresentrowactions is set to "add update delete reset"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span222'>everpresentrowactionsmode</span>
</td>
<td>
<span>String</span>
</td>
<td>"popup"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the actions display mode. By default they are displayed in a popup. You can set the property to "columns" and define columns with datafields - addButtonColumn, resetButtonColumn, updateButtonColumn and deleteButtonColumn to display the actions in columns.
</p>
<h4>Code example</h4>
<p>
Set the <code>everpresentrowactionsmode</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ everpresentrowactionsmode: "add update delete reset"}); </code></pre>
<p>
Get the <code>everpresentrowactionsmode</code> property.
</p>
<pre><code>var everpresentrowactionsmode = $('#jqxGrid').jqxGrid('everpresentrowactionsmode'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/0dmvm9vj/">everpresentrowactionsmode is set to "columns"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span81'>filterrowheight</span>
</td>
<td>
<span>Number</span>
</td>
<td>31
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the filter row's height.
</p>
<h4>Code example</h4>
<p>
Initialize a Grid with the <code>filterrowheight</code> property specified.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ filterrowheight: 30}); </code></pre>
<p>
Get the <code>filterrowheight</code> property.
</p>
<pre><code>var filterrowheight = $('#jqxGrid').jqxGrid('filterrowheight'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Td3Qn/">filterrowheight is set to 35</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span219'>filtermode</span>
</td>
<td>
<span>String</span>
</td>
<td>"default"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>(requires jqxgrid.filter.js)</p>
<p>
The property specifies the type of rendering of the Filter Menu. Possible values: "default" and "excel". In "excel" mode, the Filter Menu displays a ListBox with Checkboxes with all unique cell values.
</p>
<h4>Code example</h4>
<p>
Set the <code>filtermode</code> property.
</p>
<pre><code>$('#jqxGrid').jqxGrid({ filtermode: 'excel'}); </code></pre>
<p>
Get the <code>filtermode</code> property.
</p>
<pre><code>var filtermode = $('#jqxGrid').jqxGrid('filtermode'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LYLvA/">filtermode is set to 'excel'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>groupsrenderer</span>
</td>
<td>
<span>function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>(requires jqxgrid.grouping.js)</p>
<p>
This function is called when a group is rendered. You can use it to customize the default group rendering.
</p>
<h4>Code example</h4>
<p>
Set the <code>groupsrenderer</code> function.
</p>
<pre><code>
var groupsrenderer = function (text, group, expanded) {
return "<span>" + group + "</span>";
}
$("#jqxGrid").jqxGrid(
{
source: source,
groupsrenderer: groupsrenderer,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry' }
],
groupable: true,
groups: ['ShipCity']
});
</code></pre>
<p>
Get the <code>groupsrenderer</code> function.
</p>
<pre><code>var groupsrenderer = $('#jqxGrid').jqxGrid('groupsrenderer'); </code></pre>
<div style="padding-bottom: 5