jqxGrid APIs

Here are some commands & events that are used for jqxGrid processing. Below are the list of commands that may useful.

(1) $('#jqxGrid').jqxGrid('showrowdetails', 2);
- shows details grid of index 2

(2) $('#jqxGrid').jqxGrid('hiderowdetails', 2);
- hides details grid of index 2

(3) $('#jqxGrid').jqxGrid('expandallgroups');
- expand all groups of grid

(4) $('#jqxGrid').jqxGrid('refreshdata');
- refreshes grid data

(5) $("#jqxGrid").trigger("reloadGrid")
- triggers reload event of jqxgrid

(6) $('#jqxGrid').jqxGrid('destroy');
- destroys grid

(7) $('#jqxGrid').jqxGrid('getrows')
- gets rows of jqxgrid

(8) $('#jqxGrid').jqxGrid('clearselection');
- clears selection of any row in grid

(9) $('#jqxGrid').jqxGrid('updatebounddata', 'cells');
- updates bound data of cell

(10) $("#jqxGrid").jqxGrid('cleargriddata');
- clears grid data

(11) $("#jqxGrid").jqxGrid('updatebounddata');
- update bound data

(12) $("#jqxGrid").jqxGrid('refresh');
- refreshes grid

(13) $('#jqxGrid').jqxGrid('getrowdetails', index);
- gets row details of specified "index"

(14) $("#jqxGrid").jqxGrid('getrowdata', $("#jqxGrid").jqxGrid('getselectedrowindex'));
- gets rowdata of the selected row

(15) $('#jqxGrid').jqxGrid('getselectedrowindex');
- gets row index of he selected row

(16) $("#jqxGrid").jqxGrid('setcellvalue', currRow, colName, newVal);
- sets cell value for the specified row and column with new value

(17) var position = $.jqx.position(event.args);
var cell = $("#jqxGrid").jqxGrid('getcellatposition', position.left,
position.top);
- gets cell position in grid

(18) $("#jqxGrid").jqxGrid('addrow', parseInt(newID + 1), row);
- adds new row to grid

(19) $("#jqxGrid").on("cellvaluechanged", function (event) {});
- cell value changed event

(20) $('#jqxGrid').jqxGrid('getrows').splice(1, 0, newrowdata);
- adds new row at position 1

(21) $("#jqxGrid").jqxGrid('autoresizecolumns');
- sets all column to auto resize

(22) $("#jqxGrid").jqxGrid('showcolumn', 'columnName');
- shows any column which is hidden

(23) $("#jqxGrid").jqxGrid("showcolumn", 'columnname')
- hides any column which is hidden

(24) $("#jqxGrid").jqxGrid('columns')
- fetches all column of the grid

(25) $('#jqxGrid').jqxGrid('getcolumn', 'columnname');
- gets specified column from the grid

(26) $("#jqxGrid").jqxGrid('endupdate');
- grid will have end update

(27) $('#jqxGrid').jqxGrid('getdisplayrows')
- gets display row of the grid

(28) $('#jqxGrid').on('rowselect', function (event) {});
- row select function

(29) $("#jqxGrid").on('cellendedit', function (event) {});
- cell end edit event of the grid

(30) $("#jqxGrid").jqxGrid('clearfilters');
- clears the filters of the grid

(31) $('#jqxGrid').jqxGrid('getdatainformation')
- gets data information of the grid

(32) $("#jqxGrid").jqxGrid('beginupdate');
- for the grid begin update when we want to change anything

(33) $('#jqxGrid').jqxGrid('getboundrows')
- gets bound rows in grid

(34) $('#jqxGrid').jqxGrid('selectrow', 1);
- selects row number 1 in grid

(35) $("#jqxGrid").jqxGrid('getcellvalue', row, 'columnName');
- gets cell value of any row

(36) var filtergroup = new $.jqx.filter();
var filtervalue = value to filter;
var filtercondition = 'equal';
var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
- to create filter group in grid

(37) $('#jqxGrid').jqxGrid('unselectrow', rowBoundIndex);
- used to unselect selected row

(38) $("#jqxgrid").jqxGrid('showgroupsheader', false);
- To hide the grouping panel, set the 'showgroupsheader' property to false.

(39) $("#jqxgrid").jqxGrid('addgroup', 'lastname');

- The 'addgroup', 'insertgroup', 'removegroup' and 'removegroupat' functions enable groups manipulation with the Grid API. 

These API may used for some small operations we are performing for specific purpose. Some of the commands are pretty straight forward but some of them require some more information.

For more APIs Click Here

Bind jqxGrid With Static Data

Here is code to bind jqxGrid with static data. Static data means you have locally some data available and you want to bind it without interacting with service url.

I assume that already have necessary files for jqxGrid to work/load properly.

Html:

Script: 

//Data fields are responsible for columns and its type
var datafields = [
    { name: 'Column 1', type: 'string' },
    { name: 'Column 2', type: 'string' }
];

//Column Items are columns with their look and feel 
var columnItems = [
    { text: 'Column 1', datafield: 'Column 1' },
    { text: 'Column 2', datafield: 'Column 2' }
];

//Data which holds local data that you want to bind
var data = [];

//Source contains data type and datafields along with local data
var source =
{
    datatype: "xml",
    datafields: datafields,
    localdata: data
};

//Adapter holds source which contains necessary information to load data
var adapter = new $.jqx.dataAdapter(source,
{
    loadError: function (xhr, st, err) {
        ErrorMsg("Technical error occured.");
    }
});

//jqxGrid which holds above information to bind grid and show the data
$("#jqxGrid").jqxGrid(
{
    width: '100%',
    source: adapter,
    filterable: true,
    showfilterrow: true,
    sortable: true,
    pageable: false,
    autoheight: false,
    columnsresize: true,
    columnsreorder: false,
    editable: true,
    autoshowfiltericon: true,
    selectionmode: 'none',
    columns: columnItems
});

Here in source localdata is responsible for binding local data and if case of you want to fetch data from any service then just remove "localdata: data" and add "url:serviceurl" which returns dynamic data.