jqxGrid Basics

Here are some workarounds for jqxGrid.

(A) For columns to customize below are some of the customized workaround
(1) To set customized header of column
renderer: columnrenderer

var columnrenderer = function (value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }

(2) To set customized cell value for items
cellsrenderer: cellsrenderer

var cellsrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }

(3) To give class to cell row
cellclassname: "verticalAlign"

.verticalAlign{
      vertical-align: middle;
   }

(4) To have column of type of checkbox,
columntype: "checkbox"
- in this case, the field associated with column must be a boolean
- there are many column types there like dropdownlist etc.

(5) To have filter type of boolean
filtertype: "bool"

(6) For boolean checkbox to filter
threestatecheckbox: true

(7) To make header text alignment
align: 'center'

(8) To format cell value
cellsformat: "dd/MM/yyyy"

(9) type: 'number' with  
cellsformat: ‘p’
- to view column data in percentage
cellsformat: 'c'
- to view column data in $ sign

(10) To get any cell value
$("#grid").jqxGrid('getcellvalue', rowIndex, 'columnName');

(11) To set any cell value
$("#grid").jqxGrid('setcellvalue', rowIndex, "columnName", value);


(B) Grid Properties
(1) Set row height property of the grid
rowsheight: 30

(2) Set row height to auto height
autorowheight:true & autoheight:true

(3) Set grid column height
columnsheight:50

(4) To resize columns
columnsresize: true

(5) To enable paging for the grid
pageable:true

(6) To enable filter functionality
filterable: true

(7) To enable separate filter row
showfilterrow: false

(8) To enable sort functionality
sortable: true

(9) To enable groupable functionality
groupable: true

(10) To enable separate group row
showgroupsheader: true

(11) columns reordering for grid when there are multiple columns
columnsreorder:true

(12) To edit single cell
selectionmode:'singlecell'

(13) When to edit 
editmode:'dblclick'

(C) Dynamic
(1) set column property dynamically
$("#jqxgrid").jqxGrid('setcolumnproperty', 'columnName', 'width', 300);

(2) show/hide grid column
$("#jqxgrid").jqxGrid('hidecolumn', "columnName");

(3) cell endedit mode
$("#grid").jqxGrid('endcelledit', 'value', 'columnName', false);

(4) set cell value
$("#grid").jqxGrid('setcellvalue', row, "columnName", 'valueToReplace');


(D) Methods
(1) bindingcomplete method will be get called when grid refreshes after loading for first time
$("#jqxgrid").on('bindingcomplete', function (event) {
    alert('bind');
});

(2) cellvaluechanging: this will be an event we can get when grid is having editable cell value and to perform any functionality we can write it out this metho
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
            if (newvalue != oldvalue) {
                // perform any operation here when value get changed from old to new
            }
        }

Have came across to these many properties, methods, events but there are some more that need to investigate and once its done will add those as well.