JQXGrid lists all json data under first column

Question

// I am using a JQXGrid, and while populating the grid with valid JSON string (I checked) it forms the columns perfectly (headers, footers, pageing, etc) but all the data is listed under the first column. I have been trying different settings for the last while and possibly a second set of eyes can see the error.

// Configure data source for data grid,...
var LocationDataSource =
    {
        datatype: "json",
        datafields: [
            { name: 'Date' },
            { name: 'ProductCode' },
            { name: 'StoreNum' },                                
            { name: 'ProductQty', type: 'int' }
        ],
        localdata: LocationData
    };

// Configure Data Adapter and apply JSON data to it,...
var LocationDataAdapter = new $.jqx.dataAdapter(LocationDataSource);

// Apply data source to grid,...

$("#jqxLocationGrid").jqxGrid(
{
    width: 900,
    source: LocationDataAdapter,
    pageable: true,
    rowsheight: 50,
    autoheight: true,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    selectionmode: 'multiplecellsadvanced',
    columns: [
      { text: 'Date', datafield: 'Date', width: 250 },
      { text: 'Product Code', datafield: 'ProductCode', width: 250 },
      { text: 'Store Number', datafield: 'StoreNum', width: 250 },                          
      { text: 'Product Qty', datafield: 'ProductQty', width: 250 }
    ]
});

Answer 1

I had the same issue and i fixed it, I forgot to add jqx.base.css to the default.aspx.