Sets or gets whether the jqxDataTable automatically alternates row colors.

Code examples

Set the altRows property.

$('#dataTable').jqxDataTable({altRows: true}); 

Get the altRows property.

var altRows = $('#dataTable').jqxDataTable('altRows'); 

Sets or gets whether the jqxDataTable automatically calculates the rows height and wraps the cell text.

Code examples

Set the autoRowHeight property.

$('#dataTable').jqxDataTable({autoRowHeight: true}); 

Get the autoRowHeight property.

var autoRowHeight = $('#dataTable').jqxDataTable('autoRowHeight'); 

Sets or gets the height of the aggregates bar. Aggregates bar is displayed after setting showAggregates to true.

Code examples

Set the aggregatesHeight property.

$('#dataTable').jqxDataTable({aggregatesHeight: 50}); 

Get the aggregatesHeight property.

var aggregatesHeight = $('#dataTable').jqxDataTable('aggregatesHeight'); 

Sets or gets whether the loading html element with animated gif is automatically displayed by the widget during the data binding process.

Code examples

Set the autoShowLoadElement property.

$('#dataTable').jqxDataTable({autoShowLoadElement: false}); 

Get the autoShowLoadElement property.

var autoShowLoadElement = $('#dataTable').jqxDataTable('autoShowLoadElement'); 

Sets or gets the height of the columns header.

Code examples

Set the columnsHeight property.

$('#dataTable').jqxDataTable({columnsHeight: 40}); 

Get the columnsHeight property.

var columnsHeight = $('#dataTable').jqxDataTable('columnsHeight'); 

Sets the jqxDataTable's columns.

List of properties:

• text - string property which sets the column header's text.
• dataField - string property which sets the column's bound field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.
• displayField - string property which sets the column's display field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.
• sortable - boolean property which determines whether the column is sortable.
• filterable - boolean property which determines whether the column is filterable.
• hidden - boolean property which determines whether the column is visible or hidden.
• columnGroup - string property which determines the name of the column's parent group. It should point to a valid name defined in the columnGroups.
• autoCellHeight - boolean property which determines whether the cell's data wrapping is enabled. This property is set to true by default. When autoRowHeight is enabled and autoCellHeight is set to false, the cell's data will not be wrapped.
• renderer - callback function for custom rendering of the column's header.

  Code Example

  renderer: function (text, align, height) {
      var checkBox = "<div id='checkbox' style='z-index: 999; margin: 5px; margin-left: 30px; margin-top: 8px; margin-bottom: 3px;'>";
      checkBox += "</div>";
      return checkBox;
  }
  

• rendered - callback function which is called after the column's header rendering is completed.

  Code Example

  rendered: function (element, align, height) {
      element.jqxCheckBox();
      element.on('change', function (event) {
          if (!updatingSelectionFromDataTable) {
              var args = event.args;
              var rows = $("#dataTable").jqxDataTable('getRows');
              updatingSelection = true;
              if (args.checked) {
                  for (var i = 0; i < rows.length; i++) {
                      $("#dataTable").jqxDataTable('selectRow', i);
                  }
              }
              else {
                  $("#dataTable").jqxDataTable('clearSelection');
              }
              updatingSelection = false;
          }
      });
      return true;
  }
  

• cellsRenderer - callback function which is called when a cell is being rendered. The result of that function should be valid and well-formatted HTML String. The cellsRenderer function has 4 parameters passed by jqxDataTable - row's index, column's data field, cell's value, row's data as an Object of Key/Value pairs.

  Code Example

  {
      text: 'Details', align: 'center', dataField: 'lastname',
      // row - row's index.
      // column - column's data field.
      // value - cell's value.
      // rowData - rendered row's object.
      cellsRenderer: function (row, column, value, rowData) {
          var container = '<div style="width: 100%; height: 100%;">'
          var leftcolumn = '<div style="float: left; width: 50%;">';
          var rightcolumn = '<div style="float: left; width: 50%;">';
                        
          var firstname = "<div style='margin: 10px;'><b>First Name:</b> " + rowData.firstname + "</div>";
          var lastname = "<div style='margin: 10px;'><b>Last Name:</b> " + rowData.lastname + "</div>";
          var title = "<div style='margin: 10px;'><b>Title:</b> " + rowData.title + "</div>";
          var address = "<div style='margin: 10px;'><b>Address:</b> " + rowData.address + "</div>";
                              
          leftcolumn += firstname;
          leftcolumn += lastname;
          leftcolumn += title;
          leftcolumn += address;
          leftcolumn += "</div>";
          var postalcode = "<div style='margin: 10px;'><b>Postal Code:</b> " + rowData.postalcode + "</div>";
          var city = "<div style='margin: 10px;'><b>City:</b> " + rowData.city + "</div>";
          var phone = "<div style='margin: 10px;'><b>Phone:</b> " + rowData.homephone + "</div>";
          var hiredate = "<div style='margin: 10px;'><b>Hire Date:</b> " + rowData.hiredate + "</div>";
          rightcolumn += postalcode;
          rightcolumn += city;
          rightcolumn += phone;
          rightcolumn += hiredate;
          rightcolumn += "</div>";
          container += leftcolumn;
          container += rightcolumn;
          container += "</div>";
          return container;
      }
  }
  

• columnType - string property which determines the column's type.
  Possible values:
  • "template" - sets a custom editor as a default editor for the column. The editor should be created in the createEditor callback function. The editor should be synchronized with the cell's value in the initEditor callback. The editor's value should be retrieved in the getEditorValue callback function.
  • "custom" - sets a custom editor as a default editor for a cell. That setting enables you to have different cell editors in the column. The editors should be created in the createEditor callback function which is called for each row when the columnType property is set to "custom". The editors should be synchronized with the cell's value in the initEditor callback. The editor's value should be retrieved in the getEditorValue callback function.
• validation - callback function which is called when the jqxDataTable's edited row needs to be validated. The function has 2 parameters - 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.

  Code Example

  validation: function (cell, value) {
      var date = new Date(value);
      if (date.getFullYear() > 2014 || date.getFullYear() < 1990) {
          return { message: "Shipped Date should be in the 1990 - 2014 interval", result: false };
      }
      return true;
  }
  

• initEditor - callback function which is called when an editor is opened. It has 5 parameters - row's index, cell's value, the editor element, cell's width and cell's height. The function can be used for adding some custom parameters to the editor.

  Code Example

  initEditor: function (row, cellValue, editor, cellText, width, height) {
    // your code here
  }
  

• createEditor - callback function which is called just once when the cells editor is created. It has 5 parameters - row's index, cell's value, the editor element, cell's width and cell's height. The function can be used for adding some custom parameters to the editor.

  Code Example

  createEditor: function (row, cellValue, editor, cellText, width, height) {
    // your code here
  }
  

• getEditorValue - callback function which could be used for overriding the value returned by the editor. It is useful for advanced scenarios with custom editors. It has 3 parameters - row's index, cell's value and the editor element. The result of the function is expected to be the editor's new value.

  Code Example

  getEditorValue: function (row, cellValue, editor) {
    // your code here
  }
  

• cellsFormat - determines the Format string used for formatting the cell values.
  
  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;
  
• aggregates - array property which determines the column aggregates.
  
  

  Code Examples

  { 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 - callback function which could be used for customization of the aggregates rendering. It has 1 parameter - the column's aggregates.

  Code Example

  
  { 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 - string property which determines the alignment of the column's header. Possible values: 'left', 'center' or 'right'
• cellsAlign - string property which determines the alignment of the column's cells. Possible values: 'left', 'center' or 'right'.
• width - numeric property which determines the column's width.
• minWidth - numeric property which determines the column's minimum width. Default value: 25.
• maxWidth - numeric property which determines the column's maximum width.
• resizable - boolean property which determines whether the column is resizable.
• draggable - boolean property which determines whether the column is draggable.
• editable - boolean property which determines whether the column is editable.
• className - string property which sets a custom CSS class for the column's header
• cellClassName - string or function property which sets a custom CSS class for the column's cells. The value could be a "String" or "Function".
  Apply a CSS class to all cells in the column.

  
  text: 'Ship Name', datafield: 'ShipName', width: 150, cellclassname: "yellowCell" 
          

  
  Apply a conditional CSS Class depending on the cell's value.

  
  text: 'Ship Name', dataField: 'ShipName', width: 150,
  cellClassName: function (row, column, value, data) {
      if (value == "Hanari Carnes") {
          return "yellowCell";
      }
  }
          

• pinned - boolean property which determines whether the column is pinned(frozen).

Code examples

Set the columns property.

$("#table").jqxDataTable(
{
    altrows: true,
    sortable: true,
    columns: [
        { text: 'First Name', dataField: 'First Name', width: 100 },
        { text: 'Last Name', dataField: 'Last Name', width: 100 },
        { text: 'Product', dataField: 'Product', width: 180 },
        { text: 'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
        { text: 'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right' }
    ]
});

Sets the jqxDataTable's column groups.

The columnGroups property enables you to create a jqxDataTable with multi column headers. List of properties:

• parentGroup - string property which determines the parent group's name.
• name - string property which determines the group's name.
• align - string property which determines the column header's alignment. Possible values: 'left', 'center' or 'right'.

Code examples

Set the columnGroups property.

// prepare the data
var source =
{
    dataType: "xml",
    dataFields: [
            { name: 'SupplierName', type: 'string' },
            { name: 'Quantity', type: 'number' },
            { name: 'OrderDate', type: 'date' },
            { name: 'OrderAddress', type: 'string' },
            { name: 'Freight', type: 'number' },
            { name: 'Price', type: 'number' },
            { name: 'City', type: 'string' },
            { name: 'ProductName', type: 'string' },
            { name: 'Address', type: 'string' }
    ], 
    url: '../sampledata/orderdetailsextended.xml',
    root: 'DATA',
    record: 'ROW'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {
    }
});
// create jqxDataTable.
$("#dataTable").jqxDataTable(
{
    width: 690,
    height: 400,
    source: dataAdapter,
    pageable: true,
    altRows: true,
    columnsResize: true,
    columns: [
        { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 110 },
        { text: 'Name', columngroup: 'ProductDetails', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 120 },
        { text: 'Quantity', columngroup: 'ProductDetails', dataField: 'Quantity', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
        { text: 'Freight', columngroup: 'OrderDetails', dataField: 'Freight', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 100 },
        { text: 'Order Date', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', cellsFormat: 'd', dataField: 'OrderDate', width: 100 },
        { text: 'Order Address', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', dataField: 'OrderAddress', width: 100 },
        { text: 'Price', columngroup: 'ProductDetails', dataField: 'Price', cellsFormat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
        { text: 'Address', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
        { text: 'City', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'City', width: 80 }
    ],
    columnGroups: 
    [
        { text: 'Product Details', align: 'center', name: 'ProductDetails' },
        { text: 'Order Details', parentGroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
        { text: 'Location', align: 'center', name: 'Location' }
    ]
});

Sets or gets the jqxDataTable's columnsResize.

Code examples

Set the columnsResize property.

$('#dataTable').jqxDataTable({columnsResize: false});

Get the columnsResize property.

var columnsResize = $('#dataTable').jqxDataTable('columnsResize');

Sets or gets the jqxDataTable's columnsReorder.

Code examples

Set the columnsReorder property.

$('#dataTable').jqxDataTable({columnsReorder: false});

Get the columnsReorder property.

var columnsReorder = $('#dataTable').jqxDataTable('columnsReorder');

Sets or gets whether the jqxDataTable is disabled.

Code examples

Set the disabled property.

$('#dataTable').jqxDataTable({ disabled:true }); 

Get the disabled property.

var disabled = $('#dataTable').jqxDataTable('disabled');

Sets or gets whether the jqxDataTable editing is enabled.

Code examples

Set the editable property.

$('#dataTable').jqxDataTable({ editable:true }); 

Get the editable property.

var editable = $('#dataTable').jqxDataTable('editable');

Sets or gets the jqxDataTable's edit settings.

Code examples

Set the editSettings property.

$('#dataTable').jqxDataTable({ editSettings:{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true } }); 

Get the editSettings property.

var editSettings = $('#dataTable').jqxDataTable('editSettings');

Determines the Data Export settings used by jqxDataTable when exportData is called. See also the exportData method.

List of parameters:

• columnsHeader - determines whether to export the column's header.
• hiddenColumns - determines whether to export the hidden columns.
• serverURL - determines the URL of the save-file.php.
• characterSet - determines the char set.
• recordsInView - determines whether to export all records or to take also the filtering and sorting into account.
• fileName - determines the file's name. Set this to null if you want to export the data to a local variable.

Code example

Set the exportSettings property.

$("#dataTable").jqxDataTable({exportSettings:  { columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, recordsInView: true, fileName: "jqxDataTable"}});

Get the exportSettings property.

var exportSettings = $('#dataTable').jqxDataTable('exportSettings');

Sets or gets whether row highlighting is enabled.

Code examples

Set the enableHover property.

$('#dataTable').jqxDataTable({enableHover: false }); 

Get the enableHover property.

var enableHover = $('#dataTable').jqxDataTable('enableHover'); 

Enables or disables the default text selection of the web browser.

Code examples

Set the enableBrowserSelection property.

$('#dataTable').jqxDataTable({enableBrowserSelection: true }); 

Get the enableBrowserSelection property.

var enableBrowserSelection = $('#dataTable').jqxDataTable('enableBrowserSelection'); 

Enables/Disables the filtering feature.

Code examples

Set the filterable property.

$('#dataTable').jqxDataTable({filterable: true}); 

Get the filterable property.

var filterable = $('#dataTable').jqxDataTable('filterable'); 

Sets or gets the Filter Element's height.

Code examples

Set the filterHeight property.

$('#dataTable').jqxDataTable({filterHeight: 40}); 

Get the filterHeight property.

var filterHeight = $('#dataTable').jqxDataTable('filterHeight'); 

Determines the Filter's mode. Possible values: "default", "simple" and "advanced"

Code examples

Set the filterMode property.

$('#dataTable').jqxDataTable({filterMode: "advanced"}); 

Get the filterMode property.

var filterMode = $('#dataTable').jqxDataTable('filterMode'); 

Sets or gets the jqxDataTable's data groups. Set this property if you want to display the data grouped by a set of column(s).

Code examples

Set the groups property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title id="Description">Data Grouping in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can Group Data by using jQWidgets DataTable.">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "xml",
                dataFields: [
                     { name: 'SupplierName', type: 'string' },
                     { name: 'Quantity', type: 'number' },
                     { name: 'OrderDate', type: 'date' },
                     { name: 'OrderAddress', type: 'string' },
                     { name: 'Freight', type: 'number' },
                     { name: 'Price', type: 'number' },
                     { name: 'City', type: 'string' },
                     { name: 'ProductName', type: 'string' },
                     { name: 'Address', type: 'string' }
                ],
                url: '../sampledata/orderdetailsextended.xml',
                root: 'DATA',
                record: 'ROW'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            // create jqxDataTable.
            $("#dataTable").jqxDataTable(
            {
                source: dataAdapter,
                pageable: true,
                altRows: true,
                sortable: true,
                groups: ['SupplierName'],
                width: 660,
                groupsRenderer: function(value, rowData, level)
                {
                    return "Supplier Name: " + value;
                },
                columns: [
                  { text: 'Supplier Name', hidden: true, cellsAlign: 'left', align: 'left', dataField: 'SupplierName', width: 180},
                  { text: 'Product Name', cellsAlign: 'left', align: 'left', dataField: 'ProductName', width: 150 },
                  { text: 'Quantity', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'right', align: 'right', width: 80 },
                  { text: 'Price', dataField: 'Price', cellsformat: 'c2', align: 'right', cellsAlign: 'right', width: 70 },
                  { text: 'Address', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 250 },
                  { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable"></div>
</body>
</html>

Get the groups property.

var groups = $('#dataTable').jqxDataTable('groups'); 

Callback function which allows you to customize the rendering of the group headers.

Code examples

Set the groupsRenderer property.

<!DOCTYPE html>
<html lang="en">
<head>
   <title id="Description">Data Grouping in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can Group Data by using jQWidgets DataTable.">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "xml",
                dataFields: [
                     { name: 'SupplierName', type: 'string' },
                     { name: 'Quantity', type: 'number' },
                     { name: 'OrderDate', type: 'date' },
                     { name: 'OrderAddress', type: 'string' },
                     { name: 'Freight', type: 'number' },
                     { name: 'Price', type: 'number' },
                     { name: 'City', type: 'string' },
                     { name: 'ProductName', type: 'string' },
                     { name: 'Address', type: 'string' }
                ],
                url: '../sampledata/orderdetailsextended.xml',
                root: 'DATA',
                record: 'ROW'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            // create jqxDataTable.
            $("#dataTable").jqxDataTable(
            {
                source: dataAdapter,
                pageable: true,
                altRows: true,
                sortable: true,
                groups: ['SupplierName'],
                width: 660,
                groupsRenderer: function(value, rowData, level)
                {
                    return "Supplier Name: " + value;
                },
                columns: [
                  { text: 'Supplier Name', hidden: true, cellsAlign: 'left', align: 'left', dataField: 'SupplierName', width: 180},
                  { text: 'Product Name', cellsAlign: 'left', align: 'left', dataField: 'ProductName', width: 150 },
                  { text: 'Quantity', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'right', align: 'right', width: 80 },
                  { text: 'Price', dataField: 'Price', cellsformat: 'c2', align: 'right', cellsAlign: 'right', width: 70 },
                  { text: 'Address', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 250 },
                  { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable"></div>
</body>
</html>

Get the groupsRenderer property.

var groupsRenderer = $('#dataTable').jqxDataTable('groupsRenderer'); 

Sets or gets the jqxDataTable's height.

Code examples

Set the height property.

$('#dataTable').jqxDataTable({height:"400px"});

Get the height property.

var height = $('#dataTable').jqxDataTable('height');

Callback function which is used for initialization of the expanded row's details. The function is called just once when the row is expanded for first time.

List of parameters:

• id/key - expanded row's id/key.
• dataRow - the expanded row as a set of Key/Value pairs.
• element - the row's details HTML element as a jQuery selector.
• rowInfo - object which enables you to modify the height of the row details by setting the rowInfo's detailsHeight

If initRowDetails returns false, the row's details would be collapsed and the row's expand/collapse toggle button would be hidden.

Code examples

Set the initRowDetails property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
            var titleofcourtesy = ["Ms.", "Dr.", "Ms.", "Mrs.", "Mr.", "Mr.", "Mr.", "Ms.", "Ms."];
            var birthdate = ["08-Dec-48", "19-Feb-52", "30-Aug-63", "19-Sep-37", "04-Mar-55", "02-Jul-63", "29-May-60", "09-Jan-58", "27-Jan-66"];
            var hiredate = ["01-May-92", "14-Aug-92", "01-Apr-92", "03-May-93", "17-Oct-93", "17-Oct-93", "02-Jan-94", "05-Mar-94", "15-Nov-94"];
            var address = ["507 - 20th Ave. E. Apt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill", "Coventry House", "Miner Rd.", "Edgeham Hollow", "Winchester Way", "4726 - 11th Ave. N.E.", "7 Houndstooth Rd."];
            var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
            var postalcode = ["98122", "98401", "98033", "98052", "SW1 8JR", "EC2 7JR", "RG1 9SP", "98105", "WG2 7LT"];
            var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];
            var homephone = ["(206) 555-9857", "(206) 555-9482", "(206) 555-3412", "(206) 555-8122", "(71) 555-4848", "(71) 555-7773", "(71) 555-5598", "(206) 555-1189", "(71) 555-4444"];
            var notes = ["Education includes a BA in psychology from Colorado State University in 1970.  She also completed 'The Art of the Cold Call.'  Nancy is a member of Toastmasters International.",
                "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.",
                "Janet has a BS degree in chemistry from Boston College (1984).  She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.",
                "Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.",
                "Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London.  He was promoted to sales manager in March 1993.  Mr. Buchanan has completed the courses 'Successful Telemarketing' and 'International Sales Management.'  He is fluent in French.",
                "Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986).  He has also taken the courses 'Multi-Cultural Selling' and 'Time Management for the Sales Professional.'  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.",
                "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company.  After completing a course entitled 'Selling in Europe,' he was transferred to the London office in March 1993.",
                "Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.",
                "Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German."];
            var k = 0;
            for (var i = 0; i < firstNames.length; i++) {
                var row = {};
                row["firstname"] = firstNames[k];
                row["lastname"] = lastNames[k];
                row["title"] = titles[k];
                row["titleofcourtesy"] = titleofcourtesy[k];
                row["birthdate"] = birthdate[k];
                row["hiredate"] = hiredate[k];
                row["address"] = address[k];
                row["city"] = city[k];
                row["postalcode"] = postalcode[k];
                row["country"] = country[k];
                row["homephone"] = homephone[k];
                row["notes"] = notes[k];
                data[i] = row;
                k++;
            }
            var source =
            {
                localData: data,
                dataType: "array"
            };
            // initialize the row details.
            var initRowDetails = function (id, row, element, rowinfo) {
                var tabsdiv = null;
                var information = null;
                var notes = null;
                // update the details height.
                rowinfo.detailsHeight = 200;
                element.append($("<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'>Title</li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>"));
                tabsdiv = $(element.children()[0]);
             
                if (tabsdiv != null) {
                    information = tabsdiv.find('.information');
                    notes = tabsdiv.find('.notes');
                    var title = tabsdiv.find('.title');
                    title.text(row.firstname);
                    var container = $('<div style="margin: 5px;"></div>')
                    container.appendTo($(information));
                    var photocolumn = $('<div style="float: left; width: 15%;"></div>');
                    var leftcolumn = $('<div style="float: left; width: 45%;"></div>');
                    var rightcolumn = $('<div style="float: left; width: 40%;"></div>');
                    container.append(photocolumn);
                    container.append(leftcolumn);
                    container.append(rightcolumn);
                    var photo = $("<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>");
                    var image = $("<div style='margin-top: 10px;'></div>");
                    var imgurl = '../../images/' + row.firstname.toLowerCase() + '.png';
                    var img = $('<img height="60" src="' + imgurl + '"/>');
                    image.append(img);
                    image.appendTo(photo);
                    photocolumn.append(photo);
                    var firstname = "<div style='margin: 10px;'><b>First Name:</b> " + row.firstname + "</div>";
                    var lastname = "<div style='margin: 10px;'><b>Last Name:</b> " + row.lastname + "</div>";
                    var title = "<div style='margin: 10px;'><b>Title:</b> " + row.title + "</div>";
                    var address = "<div style='margin: 10px;'><b>Address:</b> " + row.address + "</div>";
                    $(leftcolumn).append(firstname);
                    $(leftcolumn).append(lastname);
                    $(leftcolumn).append(title);
                    $(leftcolumn).append(address);
                    var postalcode = "<div style='margin: 10px;'><b>Postal Code:</b> " + row.postalcode + "</div>";
                    var city = "<div style='margin: 10px;'><b>City:</b> " + row.city + "</div>";
                    var phone = "<div style='margin: 10px;'><b>Phone:</b> " + row.homephone + "</div>";
                    var hiredate = "<div style='margin: 10px;'><b>Hire Date:</b> " + row.hiredate + "</div>";
                    $(rightcolumn).append(postalcode);
                    $(rightcolumn).append(city);
                    $(rightcolumn).append(phone);
                    $(rightcolumn).append(hiredate);
                    var notescontainer = $('<div style="white-space: normal; margin: 5px;"><span>' + row.notes + '</span></div>');
                    $(notes).append(notescontainer);
                    $(tabsdiv).jqxTabs({ width: 600, height: 170 });
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#dataTable").jqxDataTable(
            {
                width: 632,
                source: dataAdapter,
                pageable: true,
                pageSize: 3,
                rowDetails: true,
                sortable: true,
                ready: function () {
                    // expand the first details.
                    $("#dataTable").jqxDataTable('showDetails', 0);
                },
                initRowDetails: initRowDetails,
                columns: [
                      { text: 'First Name', dataField: 'firstname', width: 100 },
                      { text: 'Last Name', dataField: 'lastname', width: 100 },
                      { text: 'Title', dataField: 'title', width: 180 },
                      { text: 'City', dataField: 'city', width: 100 },
                      { text: 'Country', dataField: 'country'}
                ]
            });
        });
    </script>
</head>
<body class='default'>
      <div id="dataTable"></div>
</body>
</html>

Get the initRowDetails property.

var initRowDetails = $('#dataTable').jqxDataTable('initRowDetails');

Determines whether the incremental search is enabled. The feature allows you to quickly find and select data records by typing when the widget is on focus.

Code examples

Set the incrementalSearch property.

$('#dataTable').jqxDataTable({incrementalSearch:false});

Get the incrementalSearch property.

var incrementalSearch = $('#dataTable').jqxDataTable('incrementalSearch');

Applies a localization to the jqxDataTable's Strings.

Default localization object:

{           
        // separator of parts of a date (e.g. '/' in 11/05/1955)
	'/': "/",
	// separator of parts of a time (e.g. ':' in 05:44 PM)
	':': ":",
	// the first day of the week (0 = Sunday, 1 = Monday, etc)
	firstDay: 0,
	days: {
		// full day names
		names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
		// abbreviated day names
		namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		// shortest day names
		namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
	},
	months: {
		// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
		names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
		// abbreviated month names
		namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
	},
	// AM and PM designators in one of these forms:
	// The usual view, and the upper and lower case versions
	//      [standard,lowercase,uppercase]
	// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
	//      null
	AM: ["AM", "am", "AM"],
	PM: ["PM", "pm", "PM"],
	eras: [
	// eras in reverse chronological order.
	// name: the name of the era in this culture (e.g. A.D., C.E.)
	// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
	// offset: offset in years from gregorian calendar
	{ "name": "A.D.", "start": null, "offset": 0 }
	],
	twoDigitYearMax: 2029,
	patterns: {
		// 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",
		// formatting of dates in MySQL DataBases
		ISO: "yyyy-MM-dd hh:mm:ss",
		ISO2: "yyyy-MM-dd HH:mm:ss",
		d1: "dd.MM.yyyy",
		d2: "dd-MM-yyyy",
		d3: "dd-MMMM-yyyy",
		d4: "dd-MM-yy",
		d5: "H:mm",
		d6: "HH:mm",
		d7: "HH:mm tt",
		d8: "dd/MMMM/yyyy",
		d9: "MMMM-dd",
		d10: "MM-dd",
		d11: "MM-dd-yyyy"
	},
	percentSymbol: "%",
	currencySymbol: "$",
	currencySymbolposition: "before",
	decimalSeparator: '.',
	thousandsSeparator: ',',
	pagerGoToPageString: "Go to page:",
	pagerShowRowsString: "Show rows:",
	pagerRangeString: " of ",
	pagerPreviousButtonString: "previous",
	pagerNextButtonString: "next",
	pagerFirstButtonsSring: "first",
	pagerLastButtonString:"last",
	filterApplyString: "Apply",
	filterCancelString: "Cancel",
	filterClearString: "Clear Filter",
	filterString: "advanced",
	filterSearchString: "Search:",
	filterStringComparisonOperators: ['empty', 'not empty', 'contains', 'contains(match case)',
	   'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
	   'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'],
	filterNumericComparisonOperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
	filterDateComparisonOperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
	filterBooleanComparisoOoperators: ['equal', 'not equal'],
	validationString: "Entered value is not valid",
	emptyDataString: "No data to display",
	filterSelectString: "Select Filter",
	loadText: "Loading...",
	clearString: "Clear",
	todayString: "Today",
	loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxDataTable raises the 'bindingComplete' event when the binding is completed."           
};

Code examples

Set the localization property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(250);
            var source =
            {
                localdata: data,
                dataFields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date'},
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var getLocalization = function () {
                var localizationobj = {};
                localizationobj.pagerGoToPageString = "Gehe zu:";
                localizationobj.pagerShowRowsString = "Zeige Zeile:";
                localizationobj.pagerRangeString = " von ";
                localizationobj.pagerNextButtonString = "voriger";
                localizationobj.pagerFirstButtonString = "first";
                localizationobj.pagerLastButtonString = "last";
                localizationobj.pagerPreviousButtonString = "nächster";
                localizationobj.sortAscendingString = "Sortiere aufsteigend";
                localizationobj.sortDescendingString = "Sortiere absteigend";
                localizationobj.sortRemoveString = "Entferne Sortierung";
                localizationobj.firstDay = 1;
                localizationobj.percentSymbol = "%";
                localizationobj.currencySymbol = "€";
                localizationobj.currencySymbolPosition = "after";
                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", ""]
                };
                var patterns = {
                    d: "dd.MM.yyyy",
                    D: "dddd, d. MMMM yyyy",
                    t: "HH:mm",
                    T: "HH:mm:ss",
                    f: "dddd, d. MMMM yyyy HH:mm",
                    F: "dddd, d. MMMM yyyy HH:mm:ss",
                    M: "dd MMMM",
                    Y: "MMMM yyyy"
                }
                localizationobj.patterns = patterns;
                localizationobj.months = months;
                return localizationobj;
            }
            $("#dataTable").jqxDataTable(
            {
                width: 685,
                source: dataAdapter,
                filterable: true,
                pageable: true,
                editable: true,
                localization: getLocalization(),
                columns: [
                  { text: 'Name', dataField: 'name', width: 115 },
                  { text: 'Produkt', dataField: 'productname', width: 220 },
                  { text: 'Datum', dataField: 'date', width: 210, cellsAlign: 'right', cellsFormat: 'd'},
                  { text: 'Qt.', dataField: 'quantity', cellsAlign: 'right', width: 60 },
                  { text: 'Preis', dataField: 'price', cellsFormat: "c2", cellsAlign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable">
    </div>
</body>
</html>

Get the localization property.

var localization = $('#dataTable').jqxDataTable('localization');

Sets or gets the height of the jqxDataTable's Pager(s). Pager(s) is(are) displayed after setting pageable to true.

Code examples

Set the pagerHeight property.

$('#dataTable').jqxDataTable({ pagerHeight: 35 }); 

Get the pagerHeight property.

var pagerHeight = $('#dataTable').jqxDataTable('pagerHeight'); 

Sets or gets the rows count per page when paging is enabled.

Code examples

Set the pageSize property.

$('#dataTable').jqxDataTable({ pageSize: 20 }); 

Get the pageSize property.

var pageSize = $('#dataTable').jqxDataTable('pageSize'); 

Sets or gets the jqxDataTable's page size options when paging is enabled and the pagerMode property is set to "advanced".

Code examples

Set the pageSizeOptions property.

$('#dataTable').jqxDataTable({ pageSizeOptions: ['15', '20', '30'] }); 

Get the pageSizeOptions property.

var pageSizeOptions = $('#dataTable').jqxDataTable('pageSizeOptions'); 

Determines whether the jqxDataTable is in paging mode.

Code examples

Set the pageable property.

$('#dataTable').jqxDataTable({ pageable:true }); 

Get the pageable property.

var pageable = $('#dataTable').jqxDataTable('pageable'); 

Sets or gets the Pager's position. Possible values: 'top', 'bottom' and 'both'

Code examples

Set the pagerPosition property.

$('#dataTable').jqxDataTable({ pagerPosition:'top' }); 

Get the pagerPosition property.

var hasThreeStates = $('#dataTable').jqxDataTable('pagerPosition'); 

Sets or gets the Pager's mode. Possible values: "default" and "advanced"

Code examples

Set the pagerMode property.

$('#dataTable').jqxDataTable({pagerMode: "advanced" }); 

Get the pagerMode property.

var pagerMode = $('#dataTable').jqxDataTable('pagerMode'); 

Sets or gets the count of the buttons displayed on the Pager when pagerMode is set to "default".

Code examples

Set the pagerButtonsCount property.

$('#dataTable').jqxDataTable({pagerButtonsCount: 10 }); 

Get the pagerButtonsCount property.

var pagerButtonsCount = $('#dataTable').jqxDataTable('pagerButtonsCount'); 

Enables custom rendering of the Pager.

Code examples

Set the pagerRenderer property.

$('#dataTable').jqxDataTable({pagerRenderer: function(){"do something here and return a HTML Element as a result." }); 

Get the pagerRenderer property.

var pagerRenderer = $('#dataTable').jqxDataTable('pagerRenderer'); 

Callback function which is called when the jqxDataTable is rendered and data binding is completed..

Code examples

Set the ready property.

$('#dataTable').jqxDataTable({ready:function(){ // your code here.}});

Get the ready property.

var ready = $('#dataTable').jqxDataTable('ready');

Sets or gets whether the jqxDataTable rows have details and can be expanded/collapsed. See the initRowDetails for initialization of the row details.

Code examples

Set the rowDetails property.

$('#dataTable').jqxDataTable({rowDetails: true});

Get the rowDetails property.

var rowDetails = $('#dataTable').jqxDataTable('rowDetails');

Enables custom rendering of the Toolbar.

Code examples

Set the renderToolbar property.

$('#dataTable').jqxDataTable({renderToolbar: function(toolBar){"toolBar - The jQuery selection of the Toolbar HTML Element" }); 

Get the renderToolbar property.

var renderToolbar = $('#dataTable').jqxDataTable('renderToolbar'); 

Enables custom rendering of the Statusbar.

Code examples

Set the renderStatusbar property.

$('#dataTable').jqxDataTable({renderStatusbar: function(statusBar){"statusBar - The jQuery selection of the Statusbar HTML Element" }); 

Get the renderStatusbar property.

var renderStatusbar = $('#dataTable').jqxDataTable('renderStatusbar'); 

Callback function which is called before the rendering of the jqxDataTable's rows.

Code examples

Set the rendering property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var that = this;
        $(document).ready(function () {
            var orderdetailsurl = "../sampledata/orderdetails.xml";
            var ordersSource =
            {
                dataFields: [
                    { name: 'OrderID', type: 'int' },
                    { name: 'Freight', type: 'float' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                dataType: "xml",
                id: 'OrderID',
                url: orderdetailsurl,
                addRow: function (rowID, rowData, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                updateRow: function (rowID, rowData, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                },
                deleteRow: function (rowID, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(ordersSource, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            this.editrow = -1;
         
            $("#dataTable").jqxDataTable(
            {
                width: 670,
                source: dataAdapter,
                pageable: true,
                sortable: true,
                altrows: true,
                editable: true,
                editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
                // called when jqxDataTable is going to be rendered.
                rendering: function()
                {
                    // destroys all buttons.
                    if ($(".editButtons").length > 0) {
                        $(".editButtons").jqxButton('destroy');
                    }
                    if ($(".cancelButtons").length > 0) {
                        $(".cancelButtons").jqxButton('destroy');
                    }
                },
                // called when jqxDataTable is rendered.
                rendered: function () {
                    if ($(".editButtons").length > 0) {
                        $(".cancelButtons").jqxButton();
                        $(".editButtons").jqxButton();
                        
                        var editClick = function (event) {
                            var target = $(event.target);
                            // get button's value.
                            var value = target.val();
                            // get clicked row.
                            var rowIndex = parseInt(event.target.getAttribute('data-row'));
                            if (isNaN(rowIndex)) {
                                return;
                            }
                            if (value == "Edit") {
                                // begin edit.
                                $("#dataTable").jqxDataTable('beginRowEdit', rowIndex);
                                target.parent().find('.cancelButtons').show();
                                target.val("Save");
                            }
                            else {
                                // end edit and save changes.
                                target.parent().find('.cancelButtons').hide();
                                target.val("Edit");
                                $("#dataTable").jqxDataTable('endRowEdit', rowIndex);
                            }
                        }
                        $(".editButtons").on('click', function (event) {
                            editClick(event);
                        });
                 
                        $(".cancelButtons").click(function (event) {
                            // end edit and cancel changes.
                            var rowIndex = parseInt(event.target.getAttribute('data-row'));
                            if (isNaN(rowIndex)) {
                                return;
                            }
                            $("#dataTable").jqxDataTable('endRowEdit', rowIndex, true);
                        });
                    }
                },
                pagerButtonsCount: 8,
                columns: [
                  { text: 'Order ID', editable: false, dataField: 'OrderID', width: 100 },
                  { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 100 },
                  {
                      text: 'Ship Country', dataField: 'ShipCountry', width: 150,
                      columnType: 'custom',
                      createEditor: function (row, cellValue, editor, width, height) {
                          // create jqxInput editor.
                          var textBox = $("<input style='padding-left: 4px; box-sizing: border-box; -moz-box-sizing: border-box; border: none;'/>").appendTo(editor);;
                          var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
                          textBox.jqxInput({ source: countries, width: '100%', height: '100%' });
                          textBox.val(cellValue);
                      },
                      initEditor: function (row, cellValue, editor) {
                          // set jqxInput editor's initial value.
                          editor.find('input').val(cellValue);
                      },
                      getEditorValue: function (index, value, editor) {
                          // get jqxInput editor's value.
                          return editor.find('input').val();
                      }
                  },
                  { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd', width: 200 },
                  {
                      text: 'Edit', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                          // render custom column.
                          return "<button data-row='" + row + "' class='editButtons'>Edit</button><button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'>Cancel</button>";
                      }
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable">
    </div>
</body>
</html>

Get the rendering property.

var renderer = $('#dataTable').jqxDataTable('renderer'); 

Callback function which is called after the rendering of the jqxDataTable's row.

Code examples

Set the rendered property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var that = this;
        $(document).ready(function () {
            var orderdetailsurl = "../sampledata/orderdetails.xml";
            var ordersSource =
            {
                dataFields: [
                    { name: 'OrderID', type: 'int' },
                    { name: 'Freight', type: 'float' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                dataType: "xml",
                id: 'OrderID',
                url: orderdetailsurl,
                addRow: function (rowID, rowData, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                updateRow: function (rowID, rowData, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                },
                deleteRow: function (rowID, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(ordersSource, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            this.editrow = -1;
         
            $("#dataTable").jqxDataTable(
            {
                width: 670,
                source: dataAdapter,
                pageable: true,
                sortable: true,
                altrows: true,
                editable: true,
                editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
                // called when jqxDataTable is going to be rendered.
                rendering: function()
                {
                    // destroys all buttons.
                    if ($(".editButtons").length > 0) {
                        $(".editButtons").jqxButton('destroy');
                    }
                    if ($(".cancelButtons").length > 0) {
                        $(".cancelButtons").jqxButton('destroy');
                    }
                },
                // called when jqxDataTable is rendered.
                rendered: function () {
                    if ($(".editButtons").length > 0) {
                        $(".cancelButtons").jqxButton();
                        $(".editButtons").jqxButton();
                        
                        var editClick = function (event) {
                            var target = $(event.target);
                            // get button's value.
                            var value = target.val();
                            // get clicked row.
                            var rowIndex = parseInt(event.target.getAttribute('data-row'));
                            if (isNaN(rowIndex)) {
                                return;
                            }
                            if (value == "Edit") {
                                // begin edit.
                                $("#dataTable").jqxDataTable('beginRowEdit', rowIndex);
                                target.parent().find('.cancelButtons').show();
                                target.val("Save");
                            }
                            else {
                                // end edit and save changes.
                                target.parent().find('.cancelButtons').hide();
                                target.val("Edit");
                                $("#dataTable").jqxDataTable('endRowEdit', rowIndex);
                            }
                        }
                        $(".editButtons").on('click', function (event) {
                            editClick(event);
                        });
                 
                        $(".cancelButtons").click(function (event) {
                            // end edit and cancel changes.
                            var rowIndex = parseInt(event.target.getAttribute('data-row'));
                            if (isNaN(rowIndex)) {
                                return;
                            }
                            $("#dataTable").jqxDataTable('endRowEdit', rowIndex, true);
                        });
                    }
                },
                pagerButtonsCount: 8,
                columns: [
                  { text: 'Order ID', editable: false, dataField: 'OrderID', width: 100 },
                  { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 100 },
                  {
                      text: 'Ship Country', dataField: 'ShipCountry', width: 150,
                      columnType: 'custom',
                      createEditor: function (row, cellValue, editor, width, height) {
                          // create jqxInput editor.
                          var textBox = $("<input style='padding-left: 4px; box-sizing: border-box; -moz-box-sizing: border-box; border: none;'/>").appendTo(editor);;
                          var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
                          textBox.jqxInput({ source: countries, width: '100%', height: '100%' });
                          textBox.val(cellValue);
                      },
                      initEditor: function (row, cellValue, editor) {
                          // set jqxInput editor's initial value.
                          editor.find('input').val(cellValue);
                      },
                      getEditorValue: function (index, value, editor) {
                          // get jqxInput editor's value.
                          return editor.find('input').val();
                      }
                  },
                  { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd', width: 200 },
                  {
                      text: 'Edit', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                          // render custom column.
                          return "<button data-row='" + row + "' class='editButtons'>Edit</button><button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'>Cancel</button>";
                      }
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable">
    </div>
</body>
</html>

Get the rendered property.

var rendered = $('#dataTable').jqxDataTable('rendered'); 

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#dataTable').jqxDataTable({rtl : true}); 

Get the rtl property.

var rtl = $('#dataTable').jqxDataTable('rtl'); 

Determines the jqxDataTable's data source. The source property is expected to point to an instance of jqxDataAdapter. For more information about jqxDataAdapter, visit: jquery-data-adapter.htm. To clear the data source, set the source property to null.

Code examples

Set the source property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/customers.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#dataTable").jqxDataTable(
            {
                width: 670,
                source: dataAdapter,
                pageable: true,
                pagerButtonsCount: 10,
                columnsresize: 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 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable"></div>
</body>
</html>

Enables/Disables the sorting feature.

Code examples

Set the sortable property.

$('#dataTable').jqxDataTable({sortable: true}); 

Get the sortable property.

var sortable = $('#dataTable').jqxDataTable('sortable'); 

Determines whether the jqxDataTable's Aggregates bar is visible.

Code examples

Set the showAggregates property.

$('#dataTable').jqxDataTable({showAggregates: true}); 

Get the showAggregates property.

var showAggregates = $('#dataTable').jqxDataTable('showAggregates'); 

Determines whether the jqxDataTable's Toolbar is visible.

Code examples

Set the showToolbar property.

$('#dataTable').jqxDataTable({showToolbar: true}); 

Get the showToolbar property.

var showToolbar = $('#dataTable').jqxDataTable('showToolbar'); 

Determines whether the jqxDataTable's Statusbar is visible.

Code examples

Set the showStatusbar property.

$('#dataTable').jqxDataTable({showStatusbar: true}); 

Get the showStatusbar property.

var showStatusbar = $('#dataTable').jqxDataTable('showStatusbar'); 

Sets or gets the height of the Statusbar. Statusbar is displayed after setting showStatusbar to true.

Code examples

Set the statusBarHeight property.

$('#dataTable').jqxDataTable({statusBarHeight: 40}); 

Get the statusBarHeight property.

var statusBarHeight = $('#dataTable').jqxDataTable('statusBarHeight'); 

Sets or gets the size of the scrollbars.

Code examples

Set the scrollBarSize property.

$('#dataTable').jqxDataTable({scrollBarSize: 15}); 

Get the scrollBarSize property.

var scrollBarSize = $('#dataTable').jqxDataTable('scrollBarSize'); 

Sets or gets the selection mode. Possible values: "multipleRows", "singleRow" and "custom". In the "custom" mode, rows could be selected/unselected only through the API.

Code examples

Set the selectionMode property.

$('#dataTable').jqxDataTable({selectionMode: "singleRow" }); 

Get the enableBrowserSelection property.

var selectionMode = $('#dataTable').jqxDataTable('selectionMode'); 

Sets or gets whether the Paging, Sorting and Filtering are handled by a Server and jqxDataTable sends Ajax requests to a Server and displays the returned data. When the current page, page size, sort order or sort column is changed, jqxDataTable will automatically perform a new data binding with the updated parameters. For server synchronization after adding, removing, updating rows, see the source property documentation.

By default, the jqxDataTable sends the following data to the server:

• sortdatafield - the sort column's datafield.
• sortorder - the sort order - 'asc', 'desc' or ''.
• pagenum - the current page's number when the paging feature is enabled.
• pagesize - the page's size which represents the number of rows displayed in the view.
• filterscount - the number of filters applied to the jqxDataTable.
• filtervalue - the filter's value. The filtervalue name for the first filter is "filtervalue0", for the second filter is "filtervalue1" and so on.
• filtercondition - the filter's condition. The condition can be any of these: "CONTAINS", "DOES_NOT_CONTAIN", "EQUAL", "EQUAL_CASE_SENSITIVE", NOT_EQUAL","GREATER_THAN", "GREATER_THAN_OR_EQUAL", "LESS_THAN", "LESS_THAN_OR_EQUAL", "STARTS_WITH", "STARTS_WITH_CASE_SENSITIVE", "ENDS_WITH", "ENDS_WITH_CASE_SENSITIVE", "NULL", "NOT_NULL", "EMPTY", "NOT_EMPTY".
• filterdatafield - the filter column's datafield.
• filteroperator - the filter's operator - 0 for "AND" and 1 for "OR".

Code examples

Set the serverProcessing property.

$('#dataTable').jqxDataTable({serverProcessing: true }); 

jqxDataTable Server Paging & Filtering

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'Freight', type: 'number' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: 'value',
                url: "http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json"
            };
            var filterChanged = false;
            var dataAdapter = new $.jqx.dataAdapter(source, 
                {
                    formatData: function (data) {
                        if (data.sortdatafield && data.sortorder) {
                            // update the $orderby param of the OData service.
                            // data.sortdatafield - the column's datafield value(ShipCountry, ShipCity, etc.).
                            // data.sortorder - the sort order(asc or desc).
                            data.$orderby = data.sortdatafield + " " + data.sortorder;
                        }
                        if (data.filterslength) {
                            filterChanged = true;
                            var filterParam = "";
                            for (var i = 0; i < data.filterslength; i++) {
                                // filter's value.
                                var filterValue = data["filtervalue" + i];
                                // filter's condition. For the filterMode="simple" it is "CONTAINS".
                                var filterCondition = data["filtercondition" + i];
                                // filter's data field - the filter column's datafield value.
                                var filterDataField = data["filterdatafield" + i];
                                // "and" or "or" depending on the filter expressions. When the filterMode="simple", the value is "or".
                                var filterOperator = data[filterDataField + "operator"];
                                var startIndex = 0;
                                if (filterValue.indexOf('-') == -1) {
                                    if (filterCondition == "CONTAINS") {
                                        filterParam += "substringof('" + filterValue + "', " + filterDataField + ") eq true";
                                        filterParam += " " + filterOperator + " ";
                                    }
                                }
                                else {
                                    if (filterDataField == "ShippedDate") {
                                        var dateGroups = new Array();
                                        var startIndex = 0;
                                        var item = filterValue.substring(startIndex).indexOf('-');
                                        while (item > -1) {
                                            dateGroups.push(filterValue.substring(startIndex, item + startIndex));
                                            startIndex += item + 1;
                                            item = filterValue.substring(startIndex).indexOf('-');
                                            if (item == -1) {
                                                dateGroups.push(filterValue.substring(startIndex));
                                            }
                                        }
                                        if (dateGroups.length == 3) {
                                            filterParam += "year(ShippedDate) eq " + parseInt(dateGroups[0]) + " and month(ShippedDate) eq " + parseInt(dateGroups[1]) + " and day(ShippedDate) eq " + parseInt(dateGroups[2]);
                                        }
                                        filterParam += " " + filterOperator + " ";
                                    }
                                }
                            }
                            // remove last filter operator.
                            filterParam = filterParam.substring(0, filterParam.length - filterOperator.length - 2);
                            data.$filter = filterParam;
                            source.totalRecords = 0;
                        }
                        else {
                            if (filterChanged) {
                                source.totalRecords = 0;
                                filterChanged = false;
                            }
                        }
                        if (source.totalRecords) {
                            // update the $skip and $top params of the OData service.
                            // data.pagenum - page number starting from 0.
                            // data.pagesize - page size
                            data.$skip = data.pagenum * data.pagesize;
                            data.$top = data.pagesize;        
                        }
                        return data;
                    },
                    downloadComplete: function (data, status, xhr) {
                        if (!source.totalRecords) {
                            source.totalRecords = data.value.length;
                        }
                    }
                }
            );
            $("#dataTable").jqxDataTable(
            {
                width: 670,
                pageable: true,
                pagerButtonsCount: 10,
                serverProcessing: true,
                source: dataAdapter,
                altRows: true,
                filterable: true,
                filterMode: 'simple',
                sortable: true,
                columnsResize: true,
                columns: [
                    { text: 'Ship Name', dataField: 'ShipName', width: 200 },
                    { text: 'Ship Country', dataField: 'ShipCountry', width: 200 },
                    { text: 'Ship City', dataField: 'ShipCity', width: 200 },
                    { text: 'Ship Address', dataField: 'ShipAddress', width: 200 },
                    { text: 'Ship Date', dataField: 'ShippedDate', width: 200, cellsFormat: 'yyyy-MM-dd' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <h3 style="font-size: 16px; font-family: Verdana;">Data Source: "http://services.odata.org"</h3>
    <div id="dataTable"></div>
</body>
</html>

Get the serverProcessing property.

var serverProcessing = $('#dataTable').jqxDataTable('serverProcessing'); 

Sets or gets the jqxDataTable's columns visibility.

Code examples

Set the showHeader property.

$('#dataTable').jqxDataTable({showHeader: false});

Get the showHeader property.

var showHeader = $('#dataTable').jqxDataTable('showHeader');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets the height of the Toolbar. Toolbar is displayed after setting showToolbar to true.

Code examples

Set the toolbarHeight property.

$('#dataTable').jqxDataTable({toolbarHeight: 40}); 

Get the toolbarHeight property.

var toolbarHeight = $('#dataTable').jqxDataTable('toolbarHeight'); 

Sets or gets the jqxDataTable's width.

Code examples

Set the width property.

$('#dataTable').jqxDataTable({width:"200px"});

Get the width property.

var width = $('#dataTable').jqxDataTable('width');

This event is triggered when the jqxDataTable binding is completed. *Bind to that event before the jqxDataTable's initialization. Otherwise, if you are populating the widget from a local data source and bind to bindingComplete after the initialization, the event could be already raised when you attach an event handler to it.

Code examples

Bind to the bindingComplete event by type: jqxDataTable.

$('#dataTable').on('bindingComplete', function (event) { // Some code here. }); 

This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellBeginEdit event by type: jqxDataTable.

$('#dataTable').on('cellBeginEdit', 
function (event)
{
    var args = event.args;
    // row key
    var rowKey = args.key;
    // row's index.
    var rowIndex = args.index;
    // row's data.
    var row = args.row;
    // row's index in the data source.
    var rowBoundIndex = args.boundIndex;
    // column's data field.
    var columnDataField = args.dataField;
    // column's display field.
    var columnDisplayField = args.displayField;
    // cell's value.
    var value = args.value;
});
                         

This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellEndEdit event by type: jqxDataTable.

$('#dataTable').on('cellEndEdit', 
function (event)
{
    var args = event.args;
    // row key
    var rowKey = args.key;
    // row's index.
    var rowIndex = args.index;
    // row's data.
    var row = args.row;
    // row's index in the data source.
    var rowBoundIndex = args.boundIndex;
    // column's data field.
    var columnDataField = args.dataField;
    // column's display field.
    var columnDisplayField = args.displayField;
    // cell's value.
    var value = args.value;
});
                         

This event is triggered when a cell value is changed.

Code examples

Bind to the cellValueChanged event by type: jqxDataTable.

$('#dataTable').on('cellValueChanged', 
function (event)
{
    // event args.
    var args = event.args;
    // cell value.
    var value = args.value;
    // old cell value.
    var oldValue = args.oldValue;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex;
    // row key.
    var rowKey = args.key;
    // column data field.
    var dataField = args.dataField;
});
                         

This event is triggered when a column is resized.

Code examples

Bind to the columnResized event by type: jqxDataTable.

$('#dataTable').on('columnResized', 
function (event)
{
    // event args.
    var args = event.args;
    // column data field.
    var dataField = args.dataField;
    // old width.
    var oldWidth = args.oldWidth;
    // new width.
    var newWidth = args.newWidth;
});
                         

This event is triggered when the column's order is changed.

Code examples

Bind to the columnReordered event by type: jqxDataTable.

$('#dataTable').on('columnReordered', 
function (event)
{
    // event args.
    var args = event.args;
    // column data field.
    var dataField = args.dataField;
    // old index.
    var oldIndex = args.oldIndex;
    // new index.
    var newIndex = args.newIndex;
});
                         

This event is triggered when the jqxDataTable sort order or sort column is changed.

Code examples

Bind to the sort event by type: jqxDataTable.

$('#dataTable').on('sort', function (event) { 
    var args = event.args; 
    // column's data field.
    var sortcolumn = args.sortcolumn; 
    // sort order.  { 'ascending': true or false, 'descending': true or false }
    var sortdirection = args.sortdirection;
});
                        

This event is triggered when the jqxDataTable's rows filter is changed.

Code examples

Bind to the filter event by type: jqxDataTable.

$('#dataTable').on('filter',
function (event)
{
    var args = event.args;
    // array of filters. Each filter in that array has 2 members - "datafield" and "filter". "datafield" is the filter column's bound field, 
    // "filter" is an object with key/value pairs which represents a filter group applied to a column. It has a "getfilters" method which returns an Array of the individual filters.
    // each individual filter has the following members: "condition", "value", "type" and "operator".
    // For more information about "condition" see the "localization" property. 
    // "type" could be "stringfilter", "numberfilter", "datefilter" or "booleanfilter".
    // "operator" could be "0" or "1" depending on the relation between the filter with the other filters within the filter group. 
    // "value" represents the filter's value.
    var filters = args.filters;
});
                         

This is triggered when the jqxDataTable's current page is changed.

Code examples

Bind to the pageChanged event by type: jqxDataTable.

$('#dataTable').on('pageChanged', 
function (event)
{
    // event args.
    var args = event.args;
    // page num.
    var pageNum = args.pagenum;
    // old page num.
    var oldPageNum = args.oldpagenum;
    // page size.
    var pageSize = args.pagesize;
});
                         

This is triggered when the jqxDataTable's page size is changed.

Code examples

Bind to the pageSizeChanged event by type: jqxDataTable.

$('#dataTable').on('pageSizeChanged', 
function (event)
{
    // event args.
    var args = event.args;
    // page num.
    var pageNum = args.pagenum;
    // old page size.
    var oldPageSize = args.oldpagesize;
    // page size.
    var pageSize = args.pagesize;
});
                         

This is triggered when a row is clicked.

Code examples

Bind to the rowClick event by type: jqxDataTable.

$('#dataTable').on('rowClick', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex; 
    // row key.
    var key = args.key;
    // data field
    var dataField = args.dataField;
    // original click event.
    var clickEvent = args.originalEvent;
});
                         

This is triggered when a row is double-clicked.

Code examples

Bind to the rowDoubleClick event by type: jqxDataTable.

$('#dataTable').on('rowDoubleClick', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex; 
    // row key.
    var key = args.key;
    // data field
    var dataField = args.dataField;
    // original double click event.
    var clickEvent = args.originalEvent;
});
                         

This is triggered when a row is selected.

Code examples

Bind to the rowSelect event by type: jqxDataTable.

$('#dataTable').on('rowSelect', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex;
    // row key.
    var key = args.key;
});
                         

This is triggered when a row is unselected.

Code examples

Bind to the rowUnselect event by type: jqxDataTable.

$('#dataTable').on('rowUnselect', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex;
    // row key.
    var key = args.key;
});
                         

This is triggered when a row edit begins.

Code examples

Bind to the rowBeginEdit event by type: jqxDataTable.

$('#dataTable').on('rowBeginEdit', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex; 
    // row key.
    var key = args.key;
});
                         

This is triggered when a row edit ends.

Code examples

Bind to the rowEndEdit event by type: jqxDataTable.

$('#dataTable').on('rowEndEdit', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex;
    // row key.
    var key = args.key;
});
                         

This is triggered when a row is expanded.

Code examples

Bind to the rowExpand event by type: jqxDataTable.

$('#dataTable').on('rowExpand', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex; 
    // row key.
    var key = args.key;
});
                         

This is triggered when a row is collapsed.

Code examples

Bind to the rowCollapse event by type: jqxDataTable.

$('#dataTable').on('rowCollapse', 
function (event)
{
    // event args.
    var args = event.args;
    // row data.
    var row = args.row;
    // row index.
    var index = args.index;
    // row's data bound index.
    var boundIndex = args.boundIndex; 
    // row key.
    var key = args.key;
});
                         

Adds a new row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.

Code example

Invoke the addRow method.

$("#dataTable").jqxDataTable('addRow', null, {});

Adds a new filter.

• Data Field - column's data field.
• filterGroup
  
  Definitions:
  
  
  • filterGroup - The filter group represents a group of one or more filters.

    Code Example

    // creates a new filter group. var filterGroup = new $.jqx.filter();
  • filter - a filter added to the filter group. Each filter has value and condition. The filter condition specifies the way the filter will evaluate each value with the filter's value. The filter condition depends on the filter’s type. To create a filter, use the createfilter method of the filterGroup. It has 3 parameters - filter type("stringfilter", "datefilter", "booleanfilter" and "numericfilter"), filter value and filter's condition.

    Code Example

    
    var filtervalue = 'Beate';
    var filtercondition = 'contains';
    // 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 filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtervalue = 'Andrew';
    filtercondition = 'starts_with';
    var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    

  • filter operator - determines the relation between filters within a filter group. The operator could be 0(AND) or 1(OR). In the code example below, we added two filters to a filter group with operator ‘or’. By doing that, each value will be evaluated by filter1 and filter2 and the evaluation result will be true, if the filter1 evaluation result is true or filter2 evaluation result is true.

    
    var filter_or_operator = 1;
    filtergroup.addfilter(filter_or_operator, filter1);
    filtergroup.addfilter(filter_or_operator, filter2);
    

  Parameter	Type	Description
  dataField	String
  filerGroup	Object

  Return Value
  None

  Code example

  Invoke the addFilter method.

  
  var filtertype = 'stringfilter';
  // create a new group of filters.
  var filtergroup = new $.jqx.filter();
  var filter_or_operator = 1;
  var filtervalue = "Empty";
  var filtercondition = 'equal';
  var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
  filtergroup.addfilter(filter_or_operator, filter);
  // add the filters.
  $("#dataTable").jqxDataTable('addFilter', dataField, filtergroup);
  // apply the filters.
  $("#dataTable").jqxDataTable('applyFilters');
  

  Try it: adds a new filter in the jqxDataTable.

Applies the added/removed filters.

Code example

Invoke the applyFilters method.

$("#dataTable").jqxDataTable('applyFilters');

Begins an update and stops all refreshes.

Code example

Invoke the beginUpdate method.

$("#dataTable").jqxDataTable('beginUpdate');

Begins a row edit operation when editable is set to true.

Code example

Invoke the beginRowEdit method.

$("#dataTable").jqxDataTable('beginRowEdit',0);

Begins a cell edit operation when editable is set to true.

Code example

Invoke the beginCellEdit method.

$("#dataTable").jqxDataTable('beginCellEdit',0, 'FirstName');

Clears the selection.

Code example

Invoke the clearSelection method.

$("#dataTable").jqxDataTable('clearSelection');

Clears the filters.

Code example

Invoke the clearFilters method.

$("#dataTable").jqxDataTable('clearFilters');

Clears the jqxDataTable.

Code example

Invoke the clear method.

$("#dataTable").jqxDataTable('clear');

Destroys jqxDataTable and removes it from the DOM.

Code example

Invoke the destroy method.

$("#dataTable").jqxDataTable('destroy');

Deletes a row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.

Code example

Invoke the deleteRow method.

$("#dataTable").jqxDataTable('deleteRow', 0);

Ends the update and resumes all refreshes.

Code example

Invoke the endUpdate method.

$("#dataTable").jqxDataTable('endUpdate');

Moves the vertical scrollbar to a row index.

Code example

Invoke the ensureRowVisible method.

$("#dataTable").jqxDataTable('ensureRowVisible', 20);

Ends a row edit when editable is set to true.

Code example

Invoke the endRowEdit method.

$("#dataTable").jqxDataTable('endRowEdit', 0);

Invoke the endRowEdit method and cancel changes.

$("#dataTable").jqxDataTable('endRowEdit', 0, true);

Ends a cell edit operation when editable is set to true.

Code example

Invoke the endCellEdit method.

$("#dataTable").jqxDataTable('endCellEdit',0, 'FirstName');

Exports jqxDataTable's data to Excel, HTML, XML, JSON, CSV or TSV. See also the exportSettings property

Code example

Invoke the exportData method.

$("#dataTable").jqxDataTable('exportData','xls');

Export to Excel works with the ExcelML format. ExcelML is XML-based file format. It complies to the Microsoft XMLSS specification and is supported in Microsoft Office 2003 and later.
* When you open export to Excel, you may receive the following message: "The file you are trying to open, 'file_name.xls', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening this file. Do you want to open the file now?"
The reason of this warning message is explained in details in the following post: excel-2007-extension-warning.aspx

Focus jqxDataTable.

Code example

Invoke the focus method.

$("#dataTable").jqxDataTable('focus');

Gets a property value of a column.

Code example

Invoke the getColumnProperty method.

var value = $("#dataTable").jqxDataTable('getColumnProperty', 'firstName', 'width');

Navigates to a page when pageable is set to true.

Code example

Invoke the goToPage method.

$("#dataTable").jqxDataTable('goToPage', 2);

Navigates to a previous page when pageable is set to true.

Code example

Invoke the goToPrevPage method.

$("#dataTable").jqxDataTable('goToPrevPage');

Navigates to a next page when pageable is set to true.

Code example

Invoke the goToNextPage method.

$("#dataTable").jqxDataTable('goToNextPage');

Returns an array of selected rows.

Code example

Invoke the getSelection method.

$("#dataTable").jqxDataTable('getSelection');

Invoke the getSelection and loop through the selected rows

var selection = $("#table").jqxDataTable('getSelection');
for (var i = 0; i < selection.length; i++) {
    // get a selected row.
	var rowData = selection[i];
}
                         

Returns an array of all rows loaded in the widget.

Code example

Invoke the getRows method.

$("#dataTable").jqxDataTable('getRows');

Invoke the getRows and loop through the rows

var rows = $("#table").jqxDataTable('getRows');
for (var i = 0; i < rows.length; i++) {
    // get a row.
	var rowData = rows[i];
}
                         

Returns an array of all rows displayed in the view. This method takes into account the Sorting Order and returns the Filtered Set of Rows, if Filtering is applied. The method is different from getRows, because getRows returns a Rows array in their data binding order and that array is not affected by filtering and sorting.

Code example

Invoke the getView method.

$("#dataTable").jqxDataTable('getView');

Invoke the getView and loop through the rows

var rows = $("#table").jqxDataTable('getView');
for (var i = 0; i < rows.length; i++) {
    // get a row.
	var rowData = rows[i];
}
                         

Returns a value of a cell.

Code example

Invoke the getCellValue method.

var value = $("#dataTable").jqxDataTable('getCellValue', 0, 'firstName');

Hides a column.

Code example

Invoke the hideColumn method.

$("#dataTable").jqxDataTable('hideColumn','firstName');

Hides the details of a row.

Code example

Invoke the hideDetails method.

$("#dataTable").jqxDataTable('hideDetails', 0);

Returns whether the binding is completed and if the result is true, this means that you can invoke methods and set properties. Otherwise, if the binding is not completed and you try to set a property or invoke a method, the widget will throw an exception.

Code example

Invoke the isBindingCompleted method.

var isCompleted = $("#dataTable").jqxDataTable('isBindingCompleted');

Locks a row i.e editing of the row would be disabled.

Code example

Invoke the lockRow method.

$("#dataTable").jqxDataTable('lockRow', 0);

Performs a layout and updates the HTML elements position and size.

Code example

Invoke the refresh method.

$("#dataTable").jqxDataTable('refresh');

Renders jqxDataTable.

Code example

Invoke the render method.

$("#dataTable").jqxDataTable('render');

Removes a filter.

Code example

Invoke the removeFilter method.

$("#dataTable").jqxDataTable('removeFilter','firstName');

Scrolls to a position.

Code example

Invoke the scrollOffset method.

$("#dataTable").jqxDataTable('scrollOffset', 10, 10);

Get the scroll position.

var offset = $("#dataTable").jqxDataTable('scrollOffset');
var left = offset.left;
var top = offset.top;                                                        
                        

Sets a property of a column. See the columns property for more information.

Code example

Invoke the setColumnProperty method.

$("#dataTable").jqxDataTable('setColumnProperty', 'firstName', 'width', 200);

Shows a column.

Code example

Invoke the showColumn method.

$("#dataTable").jqxDataTable('showColumn', 'firstName');

Selects a row.

Code example

Invoke the selectRow method.

$("#dataTable").jqxDataTable('selectRow', 0);

Shows a row details.

Code example

Invoke the showDetails method.

$("#dataTable").jqxDataTable('showDetails', 0);

Sets a value of a cell.

Code example

Invoke the setCellValue method.

$("#dataTable").jqxDataTable('setCellValue', 0, 'firstName', 'New Value');

Sorts a column, if sortable is set to true.

Code example

Invoke the sortBy method.

$("#dataTable").jqxDataTable('sortBy', 'firstName', 'asc');

Gets a boolean value which determines whether jqxDataTable is in update state i.e the beginUpdate method was called and the endUpdate method is not called yet.

Code example

Invoke the updating method.

var isUpdating = $("#dataTable").jqxDataTable('updating');

Performs a data bind and updates jqxDataTable with the new data.

Code example

Invoke the updateBoundData method.

$("#dataTable").jqxDataTable('updateBoundData');

Unselects a row.

Code example

Invoke the unselectRow method.

$("#dataTable").jqxDataTable('unselectRow', 0);

Updates the row's data. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.

Code example

Invoke the updateRow method.

$("#dataTable").jqxDataTable('updateRow', 0, {firstName: "New First Name", lastName: "New Last Name"});

Unlocks a row.

Code example

Invoke the unlockRow method.

$("#dataTable").jqxDataTable('unlockRow', 0);