How does flexigrid work with arrays?

Question

I have an xml database and I would like to insert it into a flexigrid. Since the ajax request of flexigrids only reads files formatted in a certain way , and I cannot modify my database, I would like to know if making an external ajax request, and putting all the data in an associative array I can fill my flexigrid; if yes, how ? I tried to create a table and apply flexigrid as a method, but the grid I obtain doesn't work ( the columns aren't properly aligned, I can't sort them etc...) . My associative array is as follows:

    MyArray[i] = {'Name': name, 'Address': address, 'Category': category}

Answer 1

Flexigrid works on either Json format or XML format. For both types, they have to be in a certain format.

The XML format has to be exactly like this:

<rows>
    <page>1</page>
    <total>2</total>
    <row id="reg1">
        <cell>reg1-cell1</cell>
        <cell>reg1-cell2</cell>
    </row>
    <row id="reg2">
        <cell>reg2-cell1</cell>
        <cell>reg2-cell2</cell>
    </row>
</rows>

In your server-side you have to parse the original XML file and re-produce this particular XML format.

Regarding the sorting issue: After clicking one of the columns, flexigrid sends a few parameters to a defined url as below:

 $("#flex1").flexigrid({
                url: 'staff.php'
             });

It sends the sorted column, the order and more. In there server-side you'll grab the passed parameters to re-sort your rows.

Please check the Documentation page for more information.

Update: Let's say that you have an array ( Customers ) that holds your data. In this case we will create an object which will hold that your data but in Json format as follow:

function formatCustomerResults(Customers){

     var rows = Array();

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

         rows.push({ cell: [item.CustomerId,
                            item.Name,
                            item.Phone,
                            item.Address]
     });
     }

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

Then you'll call your function:

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