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.