Loading Flexigrid For Jquery With Json String

I am trying to load the Flexigrid by using a JSON String which is returned by a WCF Service. My Service has a public string GetContacts(string CustomerID) method and it returns a J

Solution 1:

Flexigrid requires a format as follows in json

EDIT Thanks to EAMann for the format update.

total:(noofrec)page :(pageno)rows : [{cell: [ (col1value) , (col2value) ,.. ] },
        {cell: [ (col1value) , (col2value) ,.. ] }]

in order to bind the data to the grid i prefer sending the data across the wire and then formatting it on the client, but thats just me heres an example

functionformatCustomerResults(Customers) {
  var rows = Array();

  for (i = 0; i < Customers.length; i++) {
    var item = Customers[i];
    //Do something here with the linkvar link = "alert('opening item " + item.DealGuid + "');"

    rows.push({
      cell: [item.DealId,
        item.Created,
        item.CurrentStatus,
        item.LastNote,
        '<a href="javascript:void(0);" onclick="' + link + '" >view</a>'
      ]
    });
  }

  return {
    total: Customers.length,
    page: 1,
    rows: rows
  };
}

and then all you need is

$("#FlexTable").flexAddData(formatCustomerResults(eval(data)));

ps this last bit is jquery syntax

Solution 2:

almog.ori's answer is almost perfect. In fact, that's just about how I had built things before trying to Google the solution. One exception, though.

The JSON object should be:

total:(noofrec),page :(pageno),rows : [{cell: [ (col1value) , (col2value) ,.. ] },
        {cell: [ (col1value) , (col2value) ,.. ] }]

If you neglect the array format of the rows element, you'll end up choking Flexigrid and throwing all sorts of errors. But I've verified that this works flawlessly as long as you remember which parts of the script take JSON objects and which parts take arrays of JSON objects.

Solution 3:

This is an older post but I thought I would add another way to use the excellent script provided by almog.ori.

The OP said that his data was being returned from a WCF service. If you mark the operation contract body style as bare you can use the preProcess property to add your formatCustomerResults (or other function) function to initially load the grid.

Like this:

$("#gridContainer").flexigrid({
url: '/YourService.svc/..',
method: 'GET',
dataType: 'json',
preProcess: formatCustomerResults,
...
});
functionformatCustomerResults(data){
...

Hope this helps someone.

Solution 4:

Make sure also that you are using the correct HTTP method, default is POST

To use GET:

 $("#gridContainer").flexigrid({
    url: '/json/files.json',
    method: 'GET',
    dataType: 'json',

...

Solution 5:

preProcess solution by nameEqualsPNamePrubeGoldberg works perfect.

This is how my custom function for preProcess looks like.

var rows = Array();
$.each(data.rows,function(i,row){
    rows.push({id:row.val1, cell:[row.val2,row.val3]});
});

return {
      total:data.total,
      page:data.page,
      rows:rows
};