Loading Flexigrid for jQuery with JSON String

Question

Hello There;

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 Json string. that json string is created from a List object by using System.Web.Script.Serialization.JavaScriptSerializer class. So, my aim is that I would like to bind JSON string to the my flexigrid as objects. I convert the web service result to objects using

var customer = eval("(" + result + ")"); // result is the JSOn string being returned from service.

SO is there any way to bind customer objects to Flexigrid?

I hope it is clear.

Thanks all of you in advance.

Besr Regards.

Answer 1

Hi

Flexigrid requires a format as follows in json

 total: (no of rec)
 page : (page no)
 rows : {cell: [ (col1 value) , (col2 value) ,.. ] },
        {cell: [ (col1 value) , (col2 value) ,.. ] }

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

    function formatCustomerResults(Customers){

        var rows = Array();

        for (i = 0; i < Customers.length; i++) {
            var item = Customers[i];

            //Do something here with the link
            var 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

Answer 2

Can you explain a little more please. I've proved That code and don't work, I've genereted the object and no show anything. Thanks

Answer 3

Make sure you have the dataType option set to json.

$('#gridContainer').flexigrid({ singleSelect: true, showToggleBtn: false, dataType: 'json' });

Answer 4

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: (no of rec),
page : (page no),
rows : [{cell: [ (col1 value) , (col2 value) ,.. ] },
        {cell: [ (col1 value) , (col2 value) ,.. ] }]

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.