## Properties

Appearance |  |
Name | Type | Default
altrows | Boolean | false
Enables or disables the alternating rows. #### Code example Initialize a Grid with the `altrows` property specified.
    $('#grid').jqxGrid({ altrows: false});
altstart | Number | 1
This property specifies the first alternating row. #### Code example Initialize a Grid with the `altstart` property specified.
    $('#grid').jqxGrid({ altstart: 2});
altstep | Number | 1
Sets the alternating step #### Code example Initialize a Grid with the `altstep` property specified.
    $('#grid').jqxGrid({ altstep: 2});
autoshowfiltericon | Boolean | true
(requires jqxgrid.filter.js) 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. #### Code example Initialize a Grid with the `autoshowfiltericon` property specified.
    $('#grid').jqxGrid({ autoshowfiltericon: false});
closeablegroups | Boolean | true
(requires jqxgrid.grouping.js) When the value of this property is true, a close button is displayed in each grouping column. #### Code example Initialize a Grid with the `closeablegroups` property specified.
    $('#grid').jqxGrid({ closeablegroups: false});
enableellipsis | Boolean | true
Determines whether ellipsis will be displayed, if the cells or columns content overflows.. #### Code example Initialize a Grid with the `enableellipsis` property specified.
    $('#grid').jqxGrid({ enableellipsis: false});
columnsmenuwidth | Number | 15
(requires jqxmenu.js) Sets the columns menu width. #### Code example Initialize a Grid with the `columnsmenuwidth` property specified.
    $('#grid').jqxGrid({ columnsmenuwidth: 20});
autoshowcolumnsmenubutton | Boolean | true
(requires jqxmenu.js) Sets whether the columns menu button will be displayed only when the mouse cursor is over a columns header or will be always displayed. #### Code example Initialize a Grid with the `autoshowcolumnsmenubutton` property specified.
    $('#grid').jqxGrid({ autoshowcolumnsmenubutton: false});
enablerowdetailsindent | Boolean | true
When the enablerowdetailsindent is true, the content of a details row is displayed with left offset equal to the width of the row details column. #### Code example Initialize a Grid with the `enablerowdetailsindent` property specified.
    $('#grid').jqxGrid({ enablerowdetailsindent: false});
enableanimations | Boolean | true
Enables or disables the grid animations. #### Code example Initialize a Grid with the `enableanimations` property specified.
    $('#grid').jqxGrid({ enableanimations: false});
enabletooltips | Boolean | false
Enables or disables the grid tooltips. #### Code example Initialize a Grid with the `enabletooltips` property specified.
    $('#grid').jqxGrid({ enabletooltips: false});
enablehover | Boolean | true
Enables or disables the grid rows hover state. #### Code example Initialize a Grid with the `enablehover` property specified.
    $('#grid').jqxGrid({ enablehover: false});
groupsrenderer | function | null
(requires jqxgrid.grouping.js) This function is called when a group is rendered. You can use it to customize the default group rendering. #### Code example Initialize a Grid with a `groupsrenderer` specified.
    var groupsrenderer = function (text, group, expanded) {
        return "" + group + "";
    }

    $("#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']
    });
groupcolumnrenderer | function | null
(requires jqxgrid.grouping.js) Sets a custom renderer for the grouping columns displayed in the grouping header when the grouping feature is enabled. #### Code example Initialize a Grid with a `groupcolumnrenderer` specified.
    var groupcolumnrenderer = function (text) {
    return '<div style="padding: 5px; float: left; color: Blue;">' + text + '</div>';
    }

    $("#jqxgrid").jqxGrid(
    {
        source: source,
        groupcolumnrenderer: groupcolumnrenderer,
        columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry' }
        ],
        groupable: true,
        groups: ['ShipCity']
    });
groupsexpandedbydefault | Boolean | false
(requires jqxgrid.grouping.js) Sets the default state of the grouped rows. #### Code example Initialize a Grid with the `groupsexpandedbydefault` property specified.
    $('#grid').jqxGrid({ groupsexpandedbydefault: true});
pagerrenderer | function | null
(requires jqxgrid.pager.js) The function is called when the Grid Pager is rendered. This allows you to customize the default rendering of the pager. #### Code example Initialize a Grid with a `pagerrenderer` specified.
    var pagerrenderer = function () {
        var element = $("<div style='margin-top: 5px; width: 100%; height: 100%;'></div>");
        var paginginfo = $("#jqxgrid").jqxGrid('getpaginginformation');
        for (i = 0; i < paginginfo.pagescount; i++) {
            var anchor = $("<a style='padding: 5px;' href='#" + i + "'>" + i + "</a>");
            anchor.appendTo(element);
            anchor.click(function (event) {
                var pagenum = parseInt($(event.target).text());
                $("#jqxgrid").jqxGrid('gotopage', pagenum);
            });
        }

        return element;
    }

    $("#jqxgrid").jqxGrid(
    {
        width: 670,
        source: source,
        pagerrenderer: pagerrenderer,
        sortable: true,
        pageable: true,
        autoheight: true,
        columns: [
            { text: 'Ship Name', datafield: 'ShipName', width: 250 },
            { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
            { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
            { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
            { text: 'Ship City', datafield: 'ShipCity', width: 100 },
            { text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
        ]
    });
showfiltercolumnbackground | Boolean | true
(requires jqxgrid.filter.js) When this property is true, the Grid adds an additional visual style to the grid cells in the filter column(s). #### Code example Initialize a Grid with the `showfiltercolumnbackground` property specified.
    $('#grid').jqxGrid({ showfiltercolumnbackground: false});
showpinnedcolumnbackground | Boolean | true
When this property is true, the Grid adds an additional visual style to the grid cells in the pinned column(s). #### Code example Initialize a Grid with the `showpinnedcolumnbackground` property specified.
    $('#grid').jqxGrid({ showpinnedcolumnbackground: false});
showsortcolumnbackground | Boolean | true
(requires jqxgrid.sort.js) When this property is true, the Grid adds an additional visual style to the grid cells in the sort column. #### Code example Initialize a Grid with the `showsortcolumnbackground` property specified.
    $('#grid').jqxGrid({ showsortcolumnbackground: false});
showrowdetailscolumn | Boolean | true
Shows an additional column with expand/collapse toggle buttons when the Row details feature is enabled. #### Code example Initialize a Grid with the `showrowdetailscolumn` property specified.
    $('#grid').jqxGrid({ showrowdetailscolumn: false});
showheader | Boolean | true
Shows or hides the columns header. #### Code example Initialize a Grid with the `showheader` property specified.
    $('#grid').jqxGrid({ showheader: false});
showgroupsheader | Boolean | true
(requires jqxgrid.grouping.js) Shows or hides the groups header area. #### Code example Initialize a Grid with the `showgroupsheader` property specified.
    $('#grid').jqxGrid({ showgroupsheader: true});
showaggregates | Boolean | false
(requires jqxgrid.aggregates.js) Shows or hides the aggregates in the grid's statusbar. #### Code example Initialize a Grid with the `showaggregates` property specified.
    $('#grid').jqxGrid({ showaggregates: true});
showfilterrow | Boolean | false
(requires jqxgrid.filter.js) Shows or hides the filter row. #### Code example Initialize a Grid with the `showfilterrow` property specified.
    $('#grid').jqxGrid({ showfilterrow: true});
The filter row supports the following filter types: 'textbox' - input field. 'checkedlist' - dropdownlist with checkboxes that specify which records should be visible and hidden. 'list' - dropdownlist which specifies the visible records depending on the selection. 'number' - numeric input field. 'checkbox' - filter for boolean data. 'date' - filter for dates.
showemptyrow | Boolean | true
Shows or hides the empty row label when the Grid has no records to display. #### Code example Initialize a Grid with the `showemptyrow` property specified.
    $('#grid').jqxGrid({ showemptyrow: false});
showstatusbar | Boolean | false
Shows or hides the grid's statusbar. #### Code example Initialize a Grid with the `showstatusbar` property specified.
    $('#grid').jqxGrid({ showstatusbar: true});
statusbarheight | Number | 34
Sets the statusbar's height. #### Code example Initialize a Grid with the `statusbarheight` property specified.
    $('#grid').jqxGrid({ statusbarheight: 40});
showtoolbar | Boolean | false
Shows or hides the grid's toolbar. #### Code example Initialize a Grid with the `showtoolbar` property specified.
    $('#grid').jqxGrid({ showtoolbar: true});
toolbarheight | Number | 34
Sets the toolbar's height. #### Code example Initialize a Grid with the `toolbarheight` property specified.
    $('#grid').jqxGrid({ toolbarheight: 40});
selectionmode | String | 'singlerow'
(requires jqxgrid.selection.js) Sets the selection mode to "none", "singlerow", "multiplerows", "multiplerowsextended", "singlecell", "multiplecells", "multiplecellsextended". "none" - disables the selection. "singlerow" - full row selection. "multiplerows" - each click selects a new row. Click on a selected row unselects it. "multiplerowsextended" - multiple rows selection with drag and drop. The selection behavior resembles the selection of icons on your desktop. "singlecell" - single cell selection. "multiplecells" - each click selects a new cell. Click on a selected cell unselects it.. "multiplecellsextended" - The ‘multiplecellsextended’ mode is the most advanced cells selection mode. In this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of icons on your desktop. #### Code example Initialize a Grid with the `selectionmode` property specified.
    $('#grid').jqxGrid({ selectionmode: 'none'});
Layout |  |
Name | Type | Default
height | Number/String | 400
Sets the Grid height. #### Code example Initialize a Grid with the `height` property specified.
    $('#grid').jqxGrid({ height: 250 });
width | Number/String | 600
Sets the Grid width. #### Code example Initialize a Grid with the `width` property specified.
    $('#grid').jqxGrid({ width: 250 });
pagerheight | Number/String | 28
(requires jqxgrid.pager.js) Sets the height of the Grid Pager. #### Code example Initialize a Grid with the `pagerheight` property specified.
    $('#grid').jqxGrid({ pagerheight: 30});
groupsheaderheight | Number/String | 34
(requires jqxgrid.grouping.js) Sets the height of the Grid Groups Header. #### Code example Initialize a Grid with the `groupsheaderheight` property specified.
    $('#grid').jqxGrid({ groupsheaderheight: 40});
rowsheight | Number | 25
Sets the height of the grid rows. #### Code example Initialize a Grid with the `rowsheight` property specified.
    $('#grid').jqxGrid({ rowsheight: 20});
columnsheight | Number | 25
Sets the columns height. #### Code example Initialize a Grid with the `columnsheight` property specified.
    $('#grid').jqxGrid({ columnsheight: 30});
groupindentwidth | Number | 20
(requires jqxgrid.grouping.js) Sets the group indent size. This size is used when the grid is grouped. This is the size of the columns with expand/collapse toggle buttons. #### Code example Initialize a Grid with the `groupindentwidth` property specified.
    $('#grid').jqxGrid({ groupindentwidth: 30});
autoheight | Boolean | false
Sets the height of the grid to be equal to the summary height of the grid rows. This option should be set when the Grid is in paging mode. #### Code example Initialize a Grid with the `autoheight` property specified.
    $('#grid').jqxGrid({ autoheight: true});
scrollbarsize | Number | 15
Sets the scrollbars size. #### Code example Initialize a Grid with the `scrollbarsize` property specified.
    $('#grid').jqxGrid({ scrollbarsize: 17});
Behavior |  |
Name | Type | Default
disabled | Boolean | false
Enables or disables the Grid plugin. #### Code example Initialize a Grid with the `disabled` property specified.
    $("#grid").jqxGrid({ disabled: true});
verticalscrollbarstep | Number | 5
Sets the scrollbar's step when the user clicks the scroll arrows. #### Code example Initialize a Grid with the `verticalscrollbarstep` property specified.
    $("#grid").jqxGrid({ verticalscrollbarstep: 15});
verticalscrollbarlargestep | Number | 400
Sets the scrollbar's large step. This property specifies the step with which the vertical scrollbar's value is changed when the user clicks the area above or below the thumb. #### Code example Initialize a Grid with the `verticalscrollbarlargestep` property specified.
    $("#grid").jqxGrid({ verticalscrollbarlargestep: 50});
horizontalscrollbarstep | Number | 5
Sets the scrollbar's step when the user clicks the scroll arrows. #### Code example Initialize a Grid with the `horizontalscrollbarstep` property specified.
    $("#grid").jqxGrid({ horizontalscrollbarstep: 15});
horizontalscrollbarlargestep | Number | 50
Sets the scrollbar's large step. This property specifies the step with which the horizontal scrollbar's value is changed when the user clicks the area above or below the thumb. #### Code example Initialize a Grid with the `horizontalscrollbarlargestep` property specified.
    $("#grid").jqxGrid({ horizontalscrollbarlargestep: 50});
keyboardnavigation | Boolean | true
(requires jqxgrid.selection.js) Enables or disables the keyboard navigation. #### Code example Initialize a Grid with the `keyboardnavigation` property specified.
    $("#grid").jqxGrid({ keyboardnavigation: false});
pagesize | Number | 10
(requires jqxgrid.pager.js) Sets the number of visible rows per page when the Grid paging is enabled. #### Code example Initialize a Grid with the `pagesize` property specified.
    $('#grid').jqxGrid({ pagesize: 20});
pagesizeoptions | Array | ['5', '10', '20']
(requires jqxgrid.pager.js) Sets the available page size options. #### Code example Initialize a Grid with the `pagesizeoptions` property specified.
    $('#grid').jqxGrid({ pagesizeoptions: ['10', '20', '30']});
rowdetails | Boolean | false
Enables or disables the row details. When this option is enabled, the Grid can show additional information below each grid row. #### Code example Initialize a Grid with the `rowdetails` property specified.
    $('#grid').jqxGrid({ rowdetails: true});
initrowdetails | function | null
This function is called when the user expands the row details and the details are going to be rendered. #### Code example Initialize a Grid with the `initrowdetails` specified.
                            var initrowdetails = function (index) {
                                // your row details initialization code here. The index is the index of the expanded row with details.
                            }
                            $('#grid').jqxGrid({ initrowdetails: initrowdetails});
rowdetailstemplate | Object | null
Determines the template of the row details. The rowdetails field specifies the HTML used for details. The rowdetailsheight specifies the height of the details. #### Code example Initialize a Grid with the `rowdetailstemplate` property specified.

    $('#grid').jqxGrid({ rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 });
ready | function | null
This function is called when the grid is initialized and the binding is complete. #### Code example Initialize a Grid with the `ready`function specified.
    $("#jqxgrid").jqxGrid(
    {
        source: source,
        ready: function()
        {
            $("#jqxgrid").jqxGrid('sortby', 'firstname', 'asc');
        },
        columns: [
            { text: 'First Name', datafield: 'firstname', width: 100 },
            { text: 'Last Name', datafield: 'lastname', width: 100 },
            { text: 'Product', datafield: 'productname', width: 180 },
            { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
            { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
            { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
        ]
    });
pageable | Boolean | false
(requires jqxgrid.pager.js) Enables or disables the Grid Paging feature. When the value of this property is true, the Grid displays a pager below the rows. #### Code example Initialize a Grid with the `pageable` property specified.
    $('#grid').jqxGrid({ pageable: true});
filterable | Boolean | false
(requires jqxgrid.filter.js) Enables or disables the Grid Filtering feature. When the value of this property is true, the Grid displays a filtering panel in the columns popup menus. #### Code example Initialize a Grid with the `filterable` property specified.
    $('#grid').jqxGrid({ filterable: true});
editable | Boolean | false
(requires jqxgrid.edit.js) The editable property enables or disables the Grid editing feature. #### Code example Initialize a Grid with the `editable` property specified.
    $('#grid').jqxGrid({ editable: true});
editmode | String | 'selectedcell'
(requires jqxgrid.edit.js) The editmode property specifies the action that the end-user should make to open an editor. Possible Values: "click", "dblclick", "selectedcell" or "programmatic". - 'click' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value. - 'selectedcell' - Marks the cell as selected. A second click on the selected cell shows the editor. The editor’s value is equal to the cell’s value. - 'dblclick' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value. - 'programmatic' - Cell editors are activated and deactivated only through the API(see begincelledit and endcelledit methods). #### Code example Initialize a Grid with the `editmode` property specified.
    $('#grid').jqxGrid({ editmode: 'click'});
sortable | Boolean | false
(requires jqxgrid.sort.js) The sortable property enables or disables the sorting feature. #### Code example Initialize a Grid with the `sortable` property specified.
    $('#grid').jqxGrid({ sortable: true});
groupable | Boolean | false
(requires jqxgrid.grouping.js) This property enables or disables the grouping feature. #### Code example Initialize a Grid with the `groupable` property specified.
    $('#grid').jqxGrid({ groupable: true});
groups | Array | []
(requires jqxgrid.grouping.js) Sets the Grid groups when the Grouping feature is enabled. #### Code example Initialize a Grid with the `groups` property specified.
    $("#jqxgrid").jqxGrid(
    {
        source: source,
        columns: [
            { text: 'Ship Name', datafield: 'ShipName', width: 250 },
            { text: 'Ship City', datafield: 'ShipCity', width: 100 },
            { text: 'Ship Country', datafield: 'ShipCountry' }
        ],
        groupable: true,
        groups: ['ShipCity']
    });
columns | Array | []
Sets the Grid columns. #### Code example Initialize a Grid with the `columns` property specified.
    $("#jqxgrid").jqxGrid(
    {
        source: source,
        columns: [
            { text: 'Ship Name', datafield: 'ShipName', width: 250 },
            { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
            { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
            { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
            { text: 'Ship City', datafield: 'ShipCity', width: 100 },
            { text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
        ]
    });
- Column Properties: text - sets the column text. datafield - sets the column datafield. sortable - enables or disables the sorting. filterable - enables or disables the filtering. hideable - enables or disables whether the column can be hidden. hidden - hides or shows the column. groupable - sets whether the user can group by this column. menu - sets whether the menu button is displayed when the user moves the mouse cursor over the column header. exportable - determines whether the column will be exported when the Grid's export method is called. renderer - sets a custom column renderer. This can be used for changing the default display of the column header. rendered - callback function that is called when the column is rendered. You can use it to set additional settings to the column's header element.
            rendered: function (columnHeaderElement) {
                // Your code here.
              }
- cellsrenderer - sets a custom rendering function. The cellsrenderer function is called when a cell in the column is rendered.
      { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
            cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                      if (value < 20) {
                          return '' + value + '';
                      }
                      else {
                          return '' + value + '';
                      }
                  }
      }
- columntype - sets the column's type. In this version there are only two additional column types - checkbox and number. validation - sets a custom validation function. The Grid passes 2 parameters to it - edit cell and the cell's value. The function should return true or false, depending on the user's validation logic. It can also return a validation object with 2 fields - "result" - true or false, and "message" - validation string displayed to the users.
      { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
          validation: function (cell, value) {
              if (value < 0 || value > 150) {
                  return { result: false, message: "Quantity should be in the 0-150 interval" };
              }
              return true;
          }
      }
- initeditor - sets a custom function which is called when the cells editor is opened. The Grid passes 3 parameters to it - row index, cell value and the editor element. The function can be used for adding some custom parameters to the editor.
      { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
          initeditor: function (row, cellvalue, editor) {
              editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
          }
      }
- createeditor - sets a custom function which is called when the cells editor is created. The Grid passes 3 parameters to it - row index, cell value and the editor element. The function can be used for adding some custom parameters to the editor.
      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
          createeditor: function (row, cellvalue, editor) {
              var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];
              editor.jqxDropDownList({source: dataSource });
          }
      }
- cellbeginedit - sets a custom function which is called when a cell enters into edit mode. The Grid passes 3 parameters to it - row index, column data field and column type. The function can be used for canceling the editing of a specific Grid cell. To cancel the editing, the function should return false.
      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
          cellbeginedit: function (row, datafield, columntype) {
              if (row == 2)
                  return false;
          }
      }
- cellendedit - sets a custom function which is called when a cell leaves the edit mode. The Grid passes 5 parameters to it - row index, column data field, column type, old cell value, new cell value. The function can be used for canceling the changes of a specific Grid cell. To cancel the changes, the function should return false.
      { text: 'Product', datafield: 'productname',
          cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
              if (newvalue == "My Value")
                  return false;
          }
      }
- cellsformat - sets the formatting of the grid cells. Possible Number strings: "d" - decimal numbers. "f" - floating-point numbers. "n" - integer numbers. "c" - currency numbers. "p" - percentage numbers. For adding decimal places to the numbers, add a number after the formatting string. For example: "c3" displays a number in this format $25.256 Possible built-in Date formats: // short date pattern d: "M/d/yyyy", // long date pattern D: "dddd, MMMM dd, yyyy", // short time pattern t: "h:mm tt", // long time pattern T: "h:mm:ss tt", // long date, short time pattern f: "dddd, MMMM dd, yyyy h:mm tt", // long date, long time pattern F: "dddd, MMMM dd, yyyy h:mm:ss tt", // month/day pattern M: "MMMM dd", // month/year pattern Y: "yyyy MMMM", // S is a sortable format that does not vary by culture S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss" Possible Date format strings: "d"-the day of the month; "dd"-the day of the month; "ddd"-the abbreviated name of the day of the week; "dddd"- the full name of the day of the week; "h"-the hour, using a 12-hour clock from 1 to 12; "hh"-the hour, using a 12-hour clock from 01 to 12; "H"-the hour, using a 24-hour clock from 0 to 23; "HH"- the hour, using a 24-hour clock from 00 to 23; "m"-the minute, from 0 through 59; "mm"-the minutes,from 00 though59; "M"- the month, from 1 through 12; "MM"- the month, from 01 through 12; "MMM"-the abbreviated name of the month; "MMMM"-the full name of the month; "s"-the second, from 0 through 59; "ss"-the second, from 00 through 59; "t"- the first character of the AM/PM designator; "tt"-the AM/PM designator; "y"- the year, from 0 to 99; "yy"- the year, from 00 to 99; "yyy"-the year, with a minimum of three digits; "yyyy"-the year as a four-digit number; "yyyyy"-the year as a four-digit number. aggregates #### Code Example
      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
  Aggregate functions: 'avg' - Average aggregate 'count' - Count aggregate 'min' - Min aggregate 'max' - Max aggregate 'sum' - Sum aggregate 'product' - Product aggregate 'stdev' - Standard deviation on a sample. 'stdevp' - Standard deviation on an entire population. 'varp' - Variance on an entire population. 'var' - Variance on a sample. Custom Aggregate
      aggregates: [{ 'In Stock':
          function (aggregatedValue, currentValue) {
              if (currentValue) {
                  return aggregatedValue + 1;
              }

              return aggregatedValue;
          }
      }
  Custom Aggregate which aggregates values from two columns
      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: [{ 'Total':
                  function (aggregatedValue, currentValue, column, record) {
                      var total = currentValue * parseInt(record['quantity']);
                      return aggregatedValue + total;
                  }
              }]
       }
- 'In Stock' - the aggregate's display name. The function has 2 params - the aggregated value and the current value. It should return an aggregated value. aggregatesrenderer - sets a custom rendering function of the column's aggregates. The function gets passed one parameter - the column's aggregates.
      { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],
          aggregatesrenderer: function (aggregates) {
              var renderstring = "";
              $.each(aggregates, function (key, value) {
                  var name = key == 'min' ? 'Min' : 'Max';
                  renderstring += '' + name + ': ' + value +'';
              });
              return renderstring;
          }
      }
- align - sets the column header's alignment to 'left', 'center' or 'right' cellsalign - sets the cells alignment to 'left', 'center' or 'right'. width - sets the column width. minwidth - sets the column's min width. maxwidth - sets the column's max width. resizable - enables or disables the column resizing. editable - enables or disables the cells editing classname - sets a custom CSS class for the column's header cellclassname - sets a custom CSS class for the column's cells pinned - pins or unpins the column. If the column is pinned, it will be displayed as frozen and will be visible when the user horizontally scrolls the grid contents. filtertype - sets the filter's type in the filter row when the showfilterrow property value is true. 'textbox' - input field. 'checkedlist' - dropdownlist with checkboxes that specify which records should be visible and hidden. 'list' - dropdownlist which specifies the visible records depending on the selection. 'number' - numeric input field. 'checkbox' - filter for boolean data. 'date' - filter for dates.
            $("#jqxgrid").jqxGrid(
                  {
                      width: 670,
                      source: dataAdapter,
                      columnsresize: true,
                      showfilterrow: true,
                      filterable: true,
                      theme: theme,
                      selectionmode: 'singlecell',
                      columns: [
                        { text: 'Name', columntype: 'textbox', datafield: 'name', width: 120 },
                        { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 160 },
                        { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                        { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 180, cellsalign: 'right', cellsformat: 'd' },
                        { text: 'Qty.', datafield: 'quantity', filtertype: 'number', width: 50, cellsalign: 'right' },
                        { text: 'Price', datafield: 'price', filtertype: 'number', cellsalign: 'right', cellsformat: 'c2' }
                      ]
                  });
selectedrowindex | Number | -1
(requires jqxgrid.selection.js) Selects a row at a specified index. #### Code example Initialize a Grid with the `selectedrowindex` property specified.
    $('#grid').jqxGrid({ selectedrowindex: 1});
selectedrowindexes | Array | []
(requires jqxgrid.selection.js) Selects single or multiple rows. #### Code example Initialize a Grid with the `selectedrowindexes` property specified.
    $('#grid').jqxGrid({ selectedrowindexes: [0, 1, 2]});
source | Object | {}
(requires jqxdata.js) Sets the Grid data source. #### Code example Initialize a Grid with the `source` property specified. Bind the Grid to an array. The data member is array.
    // prepare the data
    var data = new Array();

    var firstNames =
    [
        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];

    var lastNames =
    [
        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];

    var productNames =
    [
        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];

    var priceValues =
    [
        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];

    for (var i = 0; i < 1000; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);

        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;

        data[i] = row;
    }

    var source =
    {
        localdata: data,
        datatype: "array"
    };

    $("#jqxgrid").jqxGrid(
    {
        source: source,
        columns: [
            { text: 'First Name', datafield: 'firstname', width: 100 },
            { text: 'Last Name', datafield: 'lastname', width: 100 },
            { text: 'Product', datafield: 'productname', width: 180 },
            { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
            { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
            { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
        ]
    });
Bind the Grid to XML data. In the source initialization, you need to set the following: - url of a xml file. - id field. - root data record. - record - this is the data record which will be displayed as a row in the Grid. - datatype - 'xml' - datafields - the record's member names. You can also specify the mapping to the member's data. Code Example:
    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <feed xml:base="http://services.odata.org/Northwind/Northwind.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
    <title type="text">Customers</title>
    <updated>2011-11-30T11:39:28Z</updated>
    <link rel="self" title="Customers" href="Customers" />
    <entry>
      <title type="text"></title>
      <updated>2011-11-30T11:39:28Z</updated>
      <author>
        <name />
      </author>
      <content type="application/xml">
        <m:properties>
          <d:CustomerID>ALFKI</d:CustomerID>
          <d:CompanyName>Alfreds Futterkiste</d:CompanyName>
          <d:ContactName>Maria Anders</d:ContactName>
          <d:ContactTitle>Sales Representative</d:ContactTitle>
          <d:Address>Obere Str. 57</d:Address>
          <d:City>Berlin</d:City>
          <d:Region m:null="true" />
          <d:PostalCode>12209</d:PostalCode>
          <d:Country>Germany</d:Country>
          <d:Phone>030-0074321</d:Phone>
          <d:Fax>030-0076545</d:Fax>
        </m:properties>
      </content>
    </entry>
    </feed>
    var url = "customers.xml";

    // prepare the data
    var source =
    {
        datatype: "xml",
        datafields: [
            { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
            { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
            { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
            { name: 'City', map: 'm\\:properties>d\\:City' },
            { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
            { name: 'Country', map: 'm\\:properties>d\\:Country' }
        ],
        root: "entry",
        record: "content",
        id: 'm\\:properties>d\\:CustomerID',
        url: url
    };

    // Create jqxGrid
    $("#jqxgrid").jqxGrid(
    {
        width: 670,
        source: source,
        theme: theme,
        sortable: true,
        columns: [
            { text: 'Company Name', datafield: 'CompanyName', width: 250 },
            { text: 'Contact Name', datafield: 'ContactName', width: 150 },
            { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
            { text: 'City', datafield: 'City', width: 120 },
            { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
            { text: 'Country', datafield: 'Country', width: 100 }
        ]
    });
You can also set the datafield's type in the source object initialization. For example:
    var source =
    {
        datatype: "xml",
        datafields: [
            { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
            { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
            { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
            { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
            { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
            { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
        ],
        root: "entry",
        record: "content",
        id: 'm\\:properties>d\\:OrderID',
        url: url,
        sortcolumn: 'ShipName',
        sortdirection: 'asc'
    };
The sortcolumn and sortdirection properties in the above code apply a sorting and a sort order to a Grid column. Binding to JSON data.
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'name'},
            { name: 'type'},
            { name: 'calories'},
            { name: 'totalfat'},
            { name: 'protein'},
        ],
        id: 'id',
        url: url
    };

    $("#jqxgrid").jqxGrid(
    {
        source: source,
        columns: [
            { text: 'Name', datafield: 'name', width: 250},
            { text: 'Beverage Type', datafield: 'type', width: 250 },
            { text: 'Calories', datafield: 'calories', width: 180 },
            { text: 'Total Fat', datafield: 'totalfat', width: 120 },
            { text: 'Protein', datafield: 'protein', width: 120 }
        ]
    });
Additional properties of the source object are: data - Data to be sent to the server sortcomparer - specifies a custom sorting comparer function. filter - specifies a custom filtering function. The function will be called when the filters are applied and should return as a result a filtered array of data records. sort - specifies a custom sorting function. The function will be called when a sorting is applied. Parameters sent to the function are the sort column and sort direction. pager - a callback function called when the page or the page size is changed. Parameters sent to the function are the page number, page size and the old page number. beforeprocessing - a function called when the Grid is bound to XML or JSON data and is called before the data processing. loaderror - a function called when the Grid is trying to bound to XML or JSON data but the binding is not successful. processdata - a function called before a request is sent to the server. You can use this function to add properties to the data be sent to the server. sortcolumn - determines the initial sort column. Expected value is the name of a data field. sortdirection - determines the sort order. Expected value is 'asc' or 'desc'. pagenum - determines the initial displayed page when paging is enabled. pagesize - determines the initial page size when paging is enabled.
updatedelay | Number | 0
Sets the rendering update delay. This could be used for deferred scrolling scenarios. #### Code example Initialize a Grid with the `updatedelay` property specified.
    $('#grid').jqxGrid({ updatedelay: 5});
virtualmode | Boolean | false
Enables or disables the virtual data mode. #### Code example Initialize a Grid with the `virtualmode` property specified.
    $('#grid').jqxGrid({ virtualmode: true});
columnsmenu | Boolean | true
(requires jqxmenu.js) Enables or disables the columns dropdown menu. #### Code example Initialize a Grid with the `columnsmenu` property specified.
    $('#grid').jqxGrid({ columnsmenu: false});
columnsresize | Boolean | false
(requires jqxgrid.columnsresize.js) Enables or disables the columns resizing. #### Code example Initialize a Grid with the `columnsresize` property specified.
    $('#grid').jqxGrid({ columnsresize: false});
rendered | function | null
Callback function which is called when the jqxGrid's render function is called either internally or not. #### Code example Initialize a Grid with the `rendered` property specified.
    $('#grid').jqxGrid({ rendered: function(){//to do}});
renderstatusbar | function | null
Callback function which allows you to customize the rendering of the Grid's statusbar. #### Code example Initialize a Grid with the `renderstatusbar` property specified.
    $('#grid').jqxGrid({ renderstatusbar: function(statusbar){//to do}});
rendertoolbar | function | null
Callback function which allows you to customize the rendering of the Grid's toolbar. #### Code example Initialize a Grid with the `rendertoolbar` property specified.
    $('#grid').jqxGrid({ rendertoolbar: function(toolbar){//to do}});
sorttogglestates | String | 2
(requires jqxgrid.sort.js) Sets the sort toggle states. changes the sort state when the user clickes a column header. 0 - disables toggling. 1 - enables togging. Click on a column toggles the sort direction. 2 - enables remove sorting option. #### Code example Initialize a Grid with the `sorttogglestates` property specified.
    $('#grid').jqxGrid({ sorttogglestates: 1});
rendergridrows | function | null
This is a function called when the grid is used in virtual mode. The function should return an array of rows which will be rendered by the Grid. #### Code example Initialize a Grid with the `rendergridrows` function specified.
    // prepare the data
    var data = new Array();
    var firstNames =
    [
        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];

    var lastNames =
    [
        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];

    var productNames =
    [
        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];

    var priceValues =
    [
        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];

    // generate sample data.
    var generatedata = function (startindex, endindex) {
        var data = {};
        for (var i = startindex; i < endindex; i++) {
            var row = {};
            var productindex = Math.floor(Math.random() * productNames.length);
            var price = parseFloat(priceValues[productindex]);
            var quantity = 1 + Math.round(Math.random() * 10);

            row["id"] = i;
            row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
            row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
            row["productname"] = productNames[productindex];
            row["price"] = price;
            row["quantity"] = quantity;
            row["total"] = price * quantity;

            data[i] = row;
        }
        return data;
    }

    var source =
    {
        datatype: "array",
        localdata: {},
        totalrecords: 1000000
    };

    // load virtual data.
    var rendergridrows = function (params) {
        var data = generatedata(params.startindex, params.endindex);
        return data;
    }
## Events
initialized | Event |
This event is triggered when the Grid is initialized. #### Code example Bind to the initialized event by type: jqxGrid.
    $('#jqxGrid').bind('initialized', function () { // Some code here. });
rowclick | Event |
This event is triggered when a row is clicked. #### Code example Bind to the rowclick event by type: jqxGrid.
    $('#jqxGrid').bind('rowclick', function (event)
    {
        var args = event.args;
        var row = args.rowindex;
    });
rowdoubleclick | Event |
This event is triggered when a row is double clicked. #### Code example Bind to the rowdoubleclick event by type: jqxGrid.
    $('#jqxGrid').bind('rowdoubleclick', function (event)
    {
        var args = event.args;
        var row = args.rowindex;
    });
rowselect | Event |
This event is triggered when a row is selected. #### Code example Bind to the rowselect event by type: jqxGrid.
    $('#jqxGrid').bind('rowselect', function (event)
    {
        var args = event.args;
        var row = args.rowindex;
    });
rowunselect | Event |
This event is triggered when a row is unselected. #### Code example Bind to the rowunselect event by type: jqxGrid.
    $('#jqxGrid').bind('rowunselect', function (event)
    {
        var args = event.args;
        var row = args.rowindex;
    });
rowexpand | Event |
This event is triggered when a row with details is expanded. #### Code example Bind to the rowexpand event by type: jqxGrid.
    $('#jqxGrid').bind('rowexpand', function (event)
    {
        var args = event.args;
        var details = args.details;
        var row = args.rowindex;
    });
rowcollapse | Event |
This event is triggered when a row with details is collapsed. #### Code example Bind to the rowcollapse event by type: jqxGrid.
    $('#jqxGrid').bind('rowcollapse', function (event)
    {
        var args = event.args;
        var details = args.details;
        var row = args.rowindex;
    });
groupexpand | Event |
This event is triggered when a group is expanded. #### Code example Bind to the groupexpand event by type: jqxGrid.
    $("#jqxgrid").bind('groupexpand', function (event) {
        var args = event.args;
        var group = args.group;
        var level = args.level;
    });
groupcollapse | Event |
This event is triggered when a group is collapsed. #### Code example Bind to the groupcollapse event by type: jqxGrid.
    $("#jqxgrid").bind('groupcollapse', function (event) {
        var args = event.args;
        var group = args.group;
        var level = args.level;
    });
sort | Event |
This event is triggered when the Grid is sorted. #### Code example Bind to the sort event by type: jqxGrid.
    $("#jqxgrid").bind("sort", function (event) {
        var sortinformation = event.args.sortinformation;
        var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
    });
filter | Event |
This event is triggered when the Grid is filtered. #### Code example Bind to the filter event by type: jqxGrid.
    $("#jqxgrid").bind("filter", function (event) {
         var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
    });
columnresized | Event |
This event is triggered when a Grid Column is resized. #### Code example Bind to the columnresized event by type: jqxGrid.
    $("#jqxgrid").bind("columnresized", function (event) {
        var args = event.args;
        var column = args.column;
        var newwidth = args.newwidth;
        var oldwidth = args.oldwidth;
    });
columnclick | Event |
This event is triggered when a column is clicked. #### Code example Bind to the columnclick event by type: jqxGrid.
    $("#jqxgrid").bind("columnclick", function (event) {
        var column = event.args.column;
    });
cellclick | Event |
This event is triggered when a cell is clicked. #### Code example Bind to the cellclick event by type: jqxGrid.
    $("#jqxgrid").bind("cellclick", function (event) {
        var column = event.args.column;
        var rowindex = event.args.rowindex;
        var columnindex = event.args.columnindex;
    });
celldoubleclick | Event |
This event is triggered when a cell is double-clicked. #### Code example Bind to the celldoubleclick event by type: jqxGrid.
    $("#jqxgrid").bind("celldoubleclick", function (event) {
        var column = event.args.column;
        var rowindex = event.args.rowindex;
        var columnindex = event.args.columnindex;
    });
cellselect | Event |
This event is triggered when a cell is selected. #### Code example Bind to the cellselect event by type: jqxGrid.
    $("#jqxgrid").bind('cellselect', function (event) {
        var columnheader = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield).text;
        var rowindex = event.args.rowindex;
    });
cellunselect | Event |
This event is triggered when a cell is unselected. #### Code example Bind to the cellunselect event by type: jqxGrid.
    $("#jqxgrid").bind('cellunselect', function (event) {
        var columnheader = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield).text;
        var rowindex = event.args.rowindex;
    });
cellvaluechanged | Event |
This event is triggered when a cell's value is changed. #### Code example Bind to the cellvaluechanged event by type: jqxGrid.
    $("#jqxgrid").bind('cellvaluechanged', function (event) {
       var column = args.datafield;
       var row = args.rowindex;
       var value = args.newvalue;
       var oldvalue = args.oldvalue;
    });
cellbeginedit | Event |
This event is triggered when a cell's editor is displayed. #### Code example Bind to the cellbeginedit event by type: jqxGrid.
    $("#jqxgrid").bind('cellbeginedit', function (event) {
       var column = args.datafield;
       var row = args.rowindex;
       var value = args.value;
    });
cellendedit | Event |
This event is triggered when a cell's edit operation has ended. #### Code example Bind to the cellendedit event by type: jqxGrid.
    $("#jqxgrid").bind('cellendedit', function (event) {
       var column = args.datafield;
       var row = args.rowindex;
       var value = args.value;
       var oldvalue = args.oldvalue;
    });
pagechanged | Event |
This event is triggered when the current page is changed. #### Code example Bind to the pagechanged event by type: jqxGrid.
    $("#jqxgrid").bind("pagechanged", function (event) {
         var args = event.args;
         var pagenum = args.pagenum;
         var pagesize = args.pagesize;
    });
pagesizechanged | Event |
This event is triggered when the page size is changed. #### Code example Bind to the pagesizechanged event by type: jqxGrid.
    $("#jqxgrid").bind("pagesizechanged", function (event) {
         var args = event.args;
         var pagenum = args.pagenum;
         var oldpagesize = args.oldpagesize;
         var pagesize = args.pagesize;
    });
bindingcomplete | Event |
This event is triggered when the binding is completed. #### Code example Bind to the bindingcomplete event by type: jqxGrid.
    $("#jqxgrid").bind("bindingcomplete", function (event) {
     // your code here.
    });
groupschanged | Event |
This event is triggered when a group is added, inserted or removed. #### Code example Bind to the groupschanged event by type: jqxGrid.
    $("#jqxgrid").bind("groupschanged", function (event) {
     // your code here.
    });
## Methods
Common |  |
getcolumn | Method |
Gets a column by datafield value. #### Code example Invoke the getcolumn method.
    // @param String. The column datafield member.
    var column = $('#grid').jqxGrid('getcolumn', 'columndatafield');
setcolumnproperty | Method |
Sets a property of a column. #### Code example Invoke the setcolumnproperty method. Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'
    // @param String. Column data field.
    // @param String. Property Name.
    // @param Object. Property Value.
    $('#grid').jqxGrid('setcolumnproperty', 'firstname', 'width', 100);
getcolumnproperty | Method |
Gets a property of a column. Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth' #### Code example Invoke the getcolumnproperty method.
    // @param String. Column data field.
    // @param String. Property Name.
    var value = $('#grid').jqxGrid('getcolumnproperty', 'firstname', 'width');
hidecolumn | Method |
Hides a column. #### Code example Invoke the hidecolumn method.
    // @param String. The column datafield member.
    $('#grid').jqxGrid('hidecolumn', 'columndatafield');
showcolumn | Method |
Shows a column. #### Code example Invoke the showcolumn method.
    // @param String. The column datafield member.
    $('#grid').jqxGrid('showcolumn', 'columndatafield');
iscolumnvisible | Method |
Gets whether a column is visible. #### Code example Invoke the iscolumnvisible method.
    // @param String. The column datafield member.
    var visible = $('#grid').jqxGrid('iscolumnvisible', 'columndatafield');
iscolumnhideable | Method |
Gets whether a column is hideable. #### Code example Invoke the iscolumnhideable method.
    // @param String. The column datafield member.
    var hideable = $('#grid').jqxGrid('iscolumnhideable', 'columndatafield');
pincolumn | Method |
Pins the column. #### Code example Invoke the pincolumn method.
    // @param String. The column datafield member.
    $('#grid').jqxGrid('pincolumn', 'columndatafield');
unpincolumn | Method |
Unpins the column. #### Code example Invoke the unpincolumn method.
    // @param String. The column datafield member.
    $('#grid').jqxGrid('unpincolumn', 'columndatafield');
iscolumnpinned | Method |
Gets whether a column is pinned. #### Code example Invoke the iscolumnpinned method.
    // @param String. The column datafield member.
    var pinned = $('#grid').jqxGrid('iscolumnpinned', 'columndatafield');
focus | Method |
Sets the keyboard Focus to the jqxGrid widget. #### Code example Invoke the focus method.
    $('#grid').jqxGrid('focus');
setrowdetails | Method |
Sets details to a row. #### Code example Invoke the setrowdetails method.
    // @param Number. The row index.
    // @param String. Row details.
    // @param Number. Height or Row Details.
    // @param Boolean. Hidden state.
    $("#jqxgrid").jqxGrid('beginupdate');
    $("#jqxgrid").jqxGrid('setrowdetails', 0, "<div class='tabs0' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Nancy Davolio</li><li>Notes</li></ul><div class='information0'></div><div class='notes0'></div></div>", 200, false);
    $("#jqxgrid").jqxGrid('setrowdetails', 1, "<div class='tabs1' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Andrew Fuller</li><li>Notes</li></ul><div class='information1'></div><div class='notes1'></div></div>", 200, true);
    $("#jqxgrid").jqxGrid('setrowdetails', 2, "<div class='tabs2' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Janet Leverling</li><li>Notes</li></ul><div class='information2'></div><div class='notes2'></div></div>", 200, true);
    $("#jqxgrid").jqxGrid('setrowdetails', 3, "<div class='tabs3' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Margaret Peacock</li><li>Notes</li></ul><div class='information3'></div><div class='notes3'></div></div>", 200, true);
    $("#jqxgrid").jqxGrid('setrowdetails', 4, "<div class='tabs4' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Steven Buchanan</li><li>Notes</li></ul><div class='information4'></div><div class='notes4'></div></div>", 200, true);
    $("#jqxgrid").jqxGrid('setrowdetails', 5, "<div class='tabs5' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Michael Suyama</li><li>Notes</li></ul><div class='information5'></div><div class='notes5'></div></div>", 200, true);
    $("#jqxgrid").jqxGrid('setrowdetails', 6, "<div class='tabs6' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Robert King</li><li>Notes</li></ul><div class='information6'></div><div class='notes6'></div></div>", 200, true);
    $("#jqxgrid").jqxGrid('setrowdetails', 7, "<div class='tabs7' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Laura Callahan</li><li>Notes</li></ul><div class='information7'></div><div class='notes7'></div></div>", 200, true);
    $("#jqxgrid").jqxGrid('setrowdetails', 8, "<div class='tabs8' style='margin: 10px;'><ul style='margin-left: 30px;'><li>Anne Dodsworth</li><li>Notes</li></ul><div class='information8'></div><div class='notes8'></div></div>", 200, true);
    $("#jqxgrid").jqxGrid('resumeupdate');
getrowdetails | Method |
Gets the rows details. #### Code example Invoke the getrowdetails method.
    // @param Number. The row index.
    var details = $('#grid').jqxGrid('getrowdetails', 1);
showrowdetails | Method |
Shows the details of a row. #### Code example Invoke the showrowdetails method.
    // @param Number. The row index.
    $('#grid').jqxGrid('showrowdetails', 1);
hiderowdetails | Method |
Hides the details of a row. #### Code example Invoke the hiderowdetails method.
    // @param Number. The row index.
    $('#grid').jqxGrid('hiderowdetails', 1);
hiderow | Method |
Hides a row. #### Code example Invoke the hiderow method.
    // @param Number. The row index.
    $('#grid').jqxGrid('hiderow', 1);
showrow | Method |
Shows a row. #### Code example Invoke the showrow method.
    // @param Number. The row index.
    $('#grid').jqxGrid('showrow', 1);
isrowhiddenat | Method |
Gets the hidden state of a row. #### Code example Invoke the isrowhiddenat method.
    // @param Number. The row index.
    var hidden = $('#grid').jqxGrid('isrowhiddenat', 1);
updatebounddata | Method |
Updates the bound data and refreshes the grid. #### Code example Invoke the updatebounddata method.
    $('#grid').jqxGrid('updatebounddata');
refreshdata | Method |
Refreshes the data. #### Code example Invoke the refreshdata method.
    $('#grid').jqxGrid('refreshdata');
refresh | Method |
Repaints the Grid View. #### Code example Invoke the refresh method.
    $('#grid').jqxGrid('refresh');
render | Method |
Renders the Grid contents. The 'render' method completely refreshes the Grid cells, columns, layout and repaints the view. #### Code example Invoke the render method.
    $('#grid').jqxGrid('render');
clear | Method |
Clears the Grid contents. #### Code example Invoke the clear method.
    $('#grid').jqxGrid('clear');
getrowid | Method |
Gets the id of a row. #### Code example Invoke the getrowid method.
    // @param row index.
    var id = $('#grid').jqxGrid('getrowid', 0);
destroy | Method |
Removes the Grid from the document and releases its resources. #### Code example Invoke the destroy method.
    $('#grid').jqxGrid('destroy');
getrowdata | Method |
Gets the data of a row. #### Code example Invoke the getrowdata method.
    // @param row index.
    var data = $('#grid').jqxGrid('getrowdata', 0);
getrenderedrowdata | Method |
Gets the data of a row. #### Code example Invoke the getrenderedrowdata method.
    // @param row render index.
    var data = $('#grid').jqxGrid('getrenderedrowdata', 0);
getrows | Method |
Gets all rows. #### Code example Invoke the getrows method.
    var rows = $('#grid').jqxGrid('getrows');
getdatainformation | Method |
Gets bound data information. #### Code example Invoke the getdatainformation method.
    var datainformation = $('#grid').jqxGrid('getdatainformation');
    var rowscount = datainformation.rowscount;
    var sortinformation = datainformation.sortinformation;
    var sortcolumn = sortinformation.sortcolumn;
    var sortdirection = sortinformation.sortdirection;
    var paginginformation = datainformation.paginginformation;
    var pagenum = paginginformation.pagenum;
    var pagesize = paginginformation.pagesize;
    var pagescount = paginginformation.pagescount;
getsortinformation | Method |
Gets the sort information. #### Code example Invoke the getsortinformation method.
    var sortinformation = $('#grid').jqxGrid('getsortinformation');
    var sortcolumn = sortinformation.sortcolumn;
    var sortdirection = sortinformation.sortdirection;
getpaginginformation | Method |
(requires jqxgrid.pager.js) Gets the paging information. #### Code example Invoke the getpaginginformation method.
    var paginginformation = $('#grid').jqxGrid('getpaginginformation');
    var pagenum = paginginformation.pagenum;
    var pagesize = paginginformation.pagesize;
    var pagescount = paginginformation.pagescount;
localizestrings | Method |
Localizes the grid strings. This method allows you to change the valus of all Grid strings and also to change the cells formatting settings. #### Code example Invoke the localizestrings method.
    var localizationobj = {};
    localizationobj.pagergotopagestring = "Page:";
    localizationobj.pagershowrowsstring = "angezeigten datensätze";
    localizationobj.pagerrangestring = " aus ";
    localizationobj.pagernextbuttonstring = "kommend";
    localizationobj.pagerpreviousbuttonstring = "vorherig";
    localizationobj.sortascendingstring = "aufsteigend sortieren";
    localizationobj.sortdescendingstring = "absteigend sortieren";
    localizationobj.sortremovestring = "entfernen sortierung";

    localizationobj.firstDay = 1;
    localizationobj.percentsymbol = "%";
    localizationobj.currencysymbol = "€";
    localizationobj.currencysymbolposition = "before";
    localizationobj.decimalseparator = ".";
    localizationobj.thousandsseparator = ",";

    var days = {
        // full day names
        names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
        // abbreviated day names
        namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
        // shortest day names
        namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
    };

    localizationobj.days = days;

    var months = {
        // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
        names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
        // abbreviated month names
        namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
    };

    localizationobj.months = months;

    // apply localization.
    $("#jqxgrid").jqxGrid('localizestrings', localizationobj);
scrolloffset | Method |
Scrolls the grid contents. #### Code example Invoke the scrolloffset method.
    //@param Number. Top position.
    //@param Number. Left position.
    $('#grid').jqxGrid('scrolloffset', 10, 20);
beginupdate | Method |
Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once. #### Code example Invoke the beginupdate method.
    .
    $('#grid').jqxGrid('beginupdate');
resumeupdate | Method |
Resumes the update operation. #### Code example Invoke the resumeupdate method.
    $('#grid').jqxGrid('resumeupdate');
updating | Method |
Gets the updating operation state. #### Code example Invoke the updating method.
    var isupdating = $('#grid').jqxGrid('updating');
ensurerowvisible | Method |
Scrolls to a row. #### Code example Invoke the ensurerowvisible method.
    // @param Number. The row index.
    $('#grid').jqxGrid('ensurerowvisible', 100);
setrowheight | Method |
Sets the height of a row. #### Code example Invoke the setrowheight method.
    // @param Number. The row index.
    // @param Number. The new height.
    $('#grid').jqxGrid('setrowheight', 1, 50);
getrowheight | Method |
Gets the height of a row. #### Code example Invoke the getrowheight method.
    // @param Number. The row index.
    var height = $('#grid').jqxGrid('getrowheight', 1);
Sorting(requires jqxgrid.sort.js) |  |
sortby | Method |
Sorts the Grid data. #### Code example Invoke the sortby method.
    $('#grid').jqxGrid('sortby', 'columndatafield', 'asc');
removesort | Method |
Removes the sorting. #### Code example Invoke the removesort method.
    $('#grid').jqxGrid('removesort');
getsortcolumn | Method |
(requires jqxgrid.sort.js) Gets the sort column. #### Code example Invoke the getsortcolumn method.
    var sortcolumn = $('#grid').jqxGrid('getsortcolumn');
Grouping(requires jqxgrid.grouping.js) |  |
addgroup | Method |
Groups by a column. #### Code example Invoke the addgroup method.
    // @param String.
    $('#grid').jqxGrid('addgroup', 'columndatafield');
insertgroup | Method |
Groups by a column. #### Code example Invoke the insertgroup method.
    // @param Number
    // @param String.
    $('#grid').jqxGrid('insertgroup', 1, 'columndatafield');
removegroupat | Method |
Removes a group at specific index. #### Code example Invoke the removegroupat method.
    //@param Number
    $('#grid').jqxGrid('removegroupat', 1);
removegroup | Method |
Removes a group. #### Code example Invoke the removegroup method.
    //@param String
    $('#grid').jqxGrid('removegroup', 'columndatafield');
getrootgroupscount | Method |
Gets the number of root groups. #### Code example Invoke the getrootgroupscount method.
    var groups = $('#grid').jqxGrid('getrootgroupscount');
collapsegroup | Method |
Collapses a group. #### Code example Invoke the collapsegroup method.
    // @param Number. The group index.
    $('#grid').jqxGrid('collapsegroup', 1);
expandgroup | Method |
Expands a group. #### Code example Invoke the expandgroup method.
    // @param Number. The group index.
    $('#grid').jqxGrid('expandgroup', 1);
collapseallgroups | Method |
Collapses all groups. #### Code example Invoke the collapseallgroups method.
    $('#grid').jqxGrid('collapseallgroups');
expandallgroups | Method |
Expands all groups. #### Code example Invoke the expandallgroups method.
    $('#grid').jqxGrid('expandallgroups');
getgroup | Method |
Gets a group. The method returns details about the Group. #### Code example Invoke the getgroup method.
    // @param Number. The group index.
    var group = $('#grid').jqxGrid('getgroup', 0);
iscolumngroupable | Method |
Gets whether the user can group by a column. #### Code example Invoke the iscolumngroupable method.
    // @param String. The column datafield member.
    var groupable = $('#grid').jqxGrid('iscolumngroupable', 'columndatafield');
Filtering(requires jqxgrid.filter.js) |  |
addfilter | Method |
Adds a filter to the Grid. #### Code example Invoke the addfilter method.
    var filtergroup = new $.jqx.filter();
    var filtervalue = 10; // Each cell value is compared with the filter's value.
    // filtertype - numericfilter, stringfilter, datefilter or customfilter.
    // condition
    // possible conditions for string filter: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
    // 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
    // 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'
    // possible conditions for numeric filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
    // possible conditions for date filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
    var filter = filtergroup.createfilter(filtertype, filtervalue, condition);
    var filter2 = filtergroup.createfilter(filtertype, filtervalue2, condition2);
    // To create a custom filter, you need to call the createfilter function and pass a custom callback function as a fourth parameter.
    // If the callback's name is 'customfilter', the Grid will pass 3 params to this function - filter's value, current cell value to evaluate and the condition.
    // operator - 0 for "and" and 1 for "or"
    filtergroup.addfilter(operator, filter);
    filtergroup.addfilter(operator, filter2);
    // datafield is the bound field.
    // adds a filter to the grid.
    $('#grid').jqxGrid('addfilter', datafield, filtergroup);
    // to add and apply the filter, use this:
    $('#grid').jqxGrid('addfilter', datafield, filtergroup, true);
removefilter | Method |
Removes a filter from the Grid. #### Code example Invoke the removefilter method.
    // datafield is the bound field.
    $('#grid').jqxGrid('removefilter', datafield);
    // to remove the filter and refresh the Grid, use this:
    $('#grid').jqxGrid('removefilter', datafield, true);
clearfilters | Method |
Clears all filters from the Grid. #### Code example Invoke the clearfilters method.
    $('#grid').jqxGrid('clearfilters');
applyfilters | Method |
Applies all filters to the Grid. #### Code example Invoke the applyfilters method.
    $('#grid').jqxGrid('applyfilters');
getfilterinformation | Method |
Gets the information about the Grid filters. The returned information includes the filter objects and filter columns. #### Code example Invoke the getfilterinformation method.
    var filtersinfo = $('#grid').jqxGrid('getfilterinformation');
Paging(requires jqxgrid.pager.js) |  |
gotopage | Method |
Navigates to a page when the Grid paging is enabled i.e when the pageable property value is true. #### Code example Invoke the gotopage method.
    //@param Number
    $('#grid').jqxGrid('gotopage', 1);
gotoprevpage | Method |
Navigates to a previous page when the Grid paging is enabled i.e when the pageable property value is true. #### Code example Invoke the gotoprevpage method.
    $('#grid').jqxGrid('gotoprevpage');
gotonextpage | Method |
Navigates to a next page when the Grid paging is enabled i.e when the pageable property value is true. #### Code example Invoke the gotonextpage method.
    $('#grid').jqxGrid('gotonextpage');
Editing(requires jqxgrid.edit.js) |  |
getcell | Method |
Gets a cell. #### Code example Invoke the getcell method.
    // @param Number. The row index.
    // @param String. The column datafield.
    var cell = $('#grid').jqxGrid('getcell', 0, datafield);
getrenderedcell | Method |
Gets a cell. #### Code example Invoke the getrenderedcell method.
    // @param Number. The row render index.
    // @param String. The column datafield.
    var cell = $('#grid').jqxGrid('getrenderedcell', 0, datafield);
getcellatposition | Method |
Gets a cell at specific position. #### Code example Invoke the getcellatposition method.
    // @param Number. The left position.
    // @param Number. The top position.
    var cell = $('#grid').jqxGrid('getcellatposition', left, top);
getcellvalue | Method |
Gets the value of a cell. #### Code example Invoke the getcellvalue method.
    // @param row index.
    // @param column datafield.
    var value = $('#grid').jqxGrid('getcellvalue', 0, "columndatafield");
setcellvalue | Method |
Sets a new value to a cell. #### Code example Invoke the setcellvalue method.
    // @param row index.
    // @param column datafield.
    // @param cell value
     $("#jqxgrid").jqxGrid('setcellvalue', 0, "firstname", "New Value");
begincelledit | Method |
Shows the cell's editor. #### Code example Invoke the begincelledit method.
    // @param row index
    // @param column datafield.
    var editable = $("#jqxgrid").jqxGrid('begincelledit', 0, "firstname");
endcelledit | Method |
Hides the edit cell's editor and saves or cancels the changes. #### Code example Invoke the endcelledit method.
    // @param row index
    // @param column datafield.
    // @param Boolean. - "true" cancels the changes, "false" confirms the changes.
    var editable = $("#jqxgrid").jqxGrid('endcelledit', 0, "firstname", false);
updaterow | Method |
Updates a row. #### Code example Invoke the updaterow method.
    // @param row id.
    // @param row data..
    var value = $('#grid').jqxGrid('updaterow', rowid, newdata);
deleterow | Method |
Deletes a row. #### Code example Invoke the deleterow method.
    // @param row id.
    var value = $('#grid').jqxGrid('deleterow', rowid);
addrow | Method |
Adds a row. #### Code example Invoke the addrow method.
    // @param row id.
    // @param row data.
    var value = $('#grid').jqxGrid('addrow', rowid, newdata);
Selection(requires jqxgrid.selection.js) |  |
selectrow | Method |
The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended' Selects a row. #### Code example Invoke the selectrow method.
    // @param Number. The row index.
    $('#grid').jqxGrid('selectrow', 10);
unselectrow | Method |
The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended' Unselects a row. #### Code example Invoke the unselectrow method.
    // @param Number. The row index.
    $('#grid').jqxGrid('unselectrow', 10);
selectallrows | Method |
The selection mode should be set to: 'multiplerows' or 'multiplerowsextended' Selects all Grid rows. #### Code example Invoke the selectallrows method.
    $('#grid').jqxGrid('selectallrows');
selectcell | Method |
The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended' Selects a cell. #### Code example Invoke the selectcell method.
    // @param Number. The row index.
    // @param String. The column datafield.
    $('#grid').jqxGrid('selectcell', 10, 'firstname');
unselectcell | Method |
The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended' Unselects a cell. #### Code example Invoke the unselectcell method.
    // @param Number. The row index.
    // @param String. The column datafield.
    $('#grid').jqxGrid('unselectcell', 10, 'firstname');
clearselection | Method |
Clears the selection. #### Code example Invoke the clearselection method.
    $('#grid').jqxGrid('clearselection');
getselectedrowindex | Method |
The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended' Gets the index of the selected row. #### Code example Invoke the getselectedrowindex method.
    var rowindex = $('#grid').jqxGrid('getselectedrowindex');
getselectedrowindexes | Method |
The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended' Gets the indexes of the selected rows. #### Code example Invoke the getselectedrowindexes method.
    var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
getselectedcell | Method |
The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended' Gets the selected cell. #### Code example Invoke the getselectedcell method.
    var cell = $('#grid').jqxGrid('getselectedcell');
getselectedcells | Method |
The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended' Gets all selected cells. #### Code example Invoke the getselectedcells method.
    var cells = $('#grid').jqxGrid('getselectedcells');
Aggregates(requires jqxgrid.aggregates.js) |  |
refresheaggregates | Method |
Refreshes the Aggregates in the Grid's status bar. #### Code example Invoke the refresheaggregates method.
    $('#grid').jqxGrid('refresheaggregates');
renderaggregates | Method |
Renders the aggregates in the Grid's status bar. #### Code example Invoke the renderaggregates method.
    $('#grid').jqxGrid('renderaggregates');
getcolumnaggregateddata | Method |
Gets the aggregated data of a Grid column. #### Code example Invoke the getcolumnaggregateddata method.
    var summaryData = $("#jqxGrid").jqxGrid('getcolumnaggregateddata', 'quantity', ['min', 'max']);
Export(requires jqxdata.export.js and jqxgrid.export.js) |  |
exportdata | Method |
Exports the Grid's data to Excel, XML, CSV, TSV, HTML or JSON. The first parameter of the export method determines the export's type - 'xls', 'xml', 'html', 'json', 'tsv' or 'csv'. The second parameter is the file's name. The third parameter is optional and determines whether to export the column's header or not. Acceptable values are - true and false. By default, the exporter exports the columns header. The last parameter is optional and determines the url of the export server. By default, the exporter is hosted on the jQWidgets website. #### Code example Invoke the export method.
     $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');