Generate a grid from JSON response ?

[walker1234Participant]

Is there a way I could generate a grid from the JSON data received from an Ajax call ? Is there any example related to this?

I am wondering how the source would be defined because while defining datafields, I have seen that we usually hard code these things while defining the source, for example:

`datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ }
]`

What if the name and type could change depending upon the data I get in the JSON response. I mean, say for example, if the type is a date and not string for one ajax call and it’s something else
for another JSON call.

And then, similar thing is needed while initializing the grid when we define the columns section. For example :

`columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 100 },
{ text: ‘Product’, datafield: ‘productname’, width: 180 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 100, cellsalign: ‘right’ },
{ text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total’, datafield: ‘total’, width: 100, cellsalign: ‘right’, cellsformat: ‘c2’ }
]`

Took some of the above code snippets from this example

[HristoParticipant]

Hello walker1234,

You match particular records fields with specific fields that you will use in the jqxGrid (or another widget).
It is not necessarily to determinate the type of fields in the DataAdapter’s source. The DataAdapter could define them automatically.
If it does not happen you should do it. For this reason, it will be better to determinate it by default if you know.
In common case when using ‘date’ it is better to include type: 'date'.

Also, it is possible to use map option – { datafield: 'fname', map: 'firstname', type: 'string' }
More information you could find into the API Documentation.
You could find this will be useful – the jqxDataAdapter demo section, too.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts