data not rendering in table about flexigrid HOT 21 OPEN

I have the same issue. Here the problem in detail

jQuery FlexGrid expects JSON data in the following format

 total: (no of rec) //total number of rows for sourceAsset in the db. you might just retrieving 10 of 100 say
 page : (page no) //page number you are on. this is posted in the data to the web layer
 rows : [{cell: [ (col1 value) , (col2 value) ,.. ] },
        {cell: [ (col1 value) , (col2 value) ,.. ] }]

Your JSON string does not have page,total and data inside cell array. The 
probable solution would be to write a JSON data builder in the web layer and 
provide FlexGrid with the expected format.
You can also get the JSON response back from the web layer and then create the 
required format using JavaScript. Add the formatted data to the grid using
$('#flextable').flexAddData(//your formatted data goes here)

Hope this helps :)

I added the format from above to the java code that returns the json string.  
Flexigrid calls the url that I list, but the progress spinner just spins and no 
data.   I also am getting some funny background colors in the table.  When I 
add .flexAddData and hard coded the json, I get a javascript error.  Why do I 
need .flexAddData when flexigrid calls the url?

Following is my current flexigrid and flexAddData:

<script type="text/javascript">
            $("#flex1").flexigrid
            (
            {
            url: 'event/getList',
            dataType: 'json',
            colModel : [
                {display: 'sourceAsset', name : 'sourceAsset', width : 150, sortable : true, align: 'left'},
                {display: 'host', name : 'host', width : 100, sortable : true, align: 'left'},
                {display: 'Port', name : 'port', width : 100, sortable : true, align: 'left'},
                {display: 'statusCode', name : 'statusCode', width : 150, sortable : true, align: 'left'},
                {display: 'data', name : 'data', width : 100, sortable : true, align: 'left'},
                {display: 'dataType', name : 'dataType', width : 100, sortable : true, align: 'left'},
                {display: 'timestamp', name : 'timestamp', width : 200, sortable : true, align: 'right'}
                ],
            searchitems : [
                {display: 'sourceAsset', name : 'sourceAsset'},
                {display: 'statusCode', name : 'statusCode', isdefault: true}
                ],
            sortname: "sourceAsset",
            sortorder: "asc",
            usepager: true,
            title: 'xyz',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            width: 1000,
            height: 200
            }
            );
$('#flex1').flexAddData('{total: 2, page: 1, rows: [{cell:["test" , "localhost" 
, 8080 , "ERROR" , 0.0 , "NA" , 1298986463617]},{cell:["drew" , "localhost" , 
8080 , "UNKNOWN" , 0.0 , "NA" , 1299089866673]}]}');
</script>

I stumbled on this while looking why my data wasn't loading. Turns out it was a 
PHP error in my code and no json was sent (duh). But anyways, just dropped by 
to say that the javascript error you get from flexAddData is because you give 
it a string, when it's expecting an object. Remove the first and last single 
quote ' from your argument and it will work.

$('#flex1').flexAddData({total: 2, page: 1, rows: [{cell:["test" , "localhost" 
, 8080 , "ERROR" , 0.0 , "NA" , 1298986463617]},{cell:["drew" , "localhost" , 
8080 , "UNKNOWN" , 0.0 , "NA" , 1299089866673]}]});

You don't need to do it manually, if your AJAX call works, it will load it 
automatically when page loads, but you should really wrap your table loading in 
$(document).ready(function() { to make sure it doesn't load on an empty DOM. 
This is probably why it doesn't work for you if your returned JSON is well 
formated.

[deleted comment]

I m having the same issue.. Actually i tried the demo in php it is working fine 
but the same thing when i implemented in my JEE application I m unable to 
display the data in the Flexigrid... i tried a alot but could not get any 
proper solution... But i can see the JSON returned by the server in 
FireBug...Following is my code... plz take a look at the code and point out my 
mistake... THANKS ALOT


<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="/candidtrack/web/theme/css/flexigrid/flexigrid.css"/>
        <script type="text/javascript" src="/candidtrack/web/theme/lib/jquery/jquery.js"></script>
        <script type="text/javascript" src="/candidtrack/web/theme/lib/flexigrid.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#flex1").flexigrid
                (
                {
                    url: '/candidtrack/web/requirement/requirement!gridInJson',
                                       dataType: 'json',
                    colModel : [
                        {display: 'reqId', name : 'reqId', width : 40, sortable : true, align: 'left'},
                        {display: 'reqTitle', name : 'reqTitle', width : 90, sortable : true, align: 'left'},
                        {display: 'Job Type', name : 'Job Type', width : 90, sortable : true, align: 'left'},
                        {display: 'Company', name : 'Company', width : 90, sortable : true, align: 'left'},
                        {display: 'Contact Person', name : 'Contact Person', width : 90, sortable : true, align: 'left'},
                        {display: 'Location', name : 'Location', width : 90, sortable : true, align: 'left'},
                        {display: 'Submission End Date', name : 'Submission End Date', width : 90, sortable : true, align: 'left'},
                        {display: 'Career Level', name : 'Career Level', width : 90, sortable : true, align: 'left'},
                        {display: 'Required Skills', name : 'Required Skills', width : 100, sortable : true, align: 'left'},
                        {display: 'Education Level', name : 'Education Level', width : 90, sortable : true, align: 'left'},
                        {display: 'Residence Status', name : 'Residence Status', width : 95, sortable : true, align: 'left'},
                        {display: 'Bill Rate', name : 'Bill Rate', width : 35, sortable : true, align: 'right'},
                        {display: 'Status', name : 'Status', width : 45, sortable : true, align: 'left'},
                                                {display: 'Action', name : 'Action', width : 35, sortable : true, align: 'center'}
                    ],
                    buttons : [
                        {separator: true},
                        {name: 'A', onpress: sortAlpha},
                        {name: 'B', onpress: sortAlpha},
                        {name: 'C', onpress: sortAlpha},
                        {name: 'D', onpress: sortAlpha},
                        {name: 'E', onpress: sortAlpha},
                        {name: 'F', onpress: sortAlpha},
                        {name: 'G', onpress: sortAlpha},
                        {name: 'H', onpress: sortAlpha},
                        {name: 'I', onpress: sortAlpha},
                        {name: 'J', onpress: sortAlpha},
                        {name: 'K', onpress: sortAlpha},
                        {name: 'L', onpress: sortAlpha},
                        {name: 'M', onpress: sortAlpha},
                        {name: 'N', onpress: sortAlpha},
                        {name: 'O', onpress: sortAlpha},
                        {name: 'P', onpress: sortAlpha},
                        {name: 'Q', onpress: sortAlpha},
                        {name: 'R', onpress: sortAlpha},
                        {name: 'S', onpress: sortAlpha},
                        {name: 'T', onpress: sortAlpha},
                        {name: 'U', onpress: sortAlpha},
                        {name: 'V', onpress: sortAlpha},
                        {name: 'W', onpress: sortAlpha},
                        {name: 'X', onpress: sortAlpha},
                        {name: 'Y', onpress: sortAlpha},
                        {name: 'Z', onpress: sortAlpha},
                        {name: '#', onpress: sortAlpha}
                    ],
                    searchitems : [
                        {display: 'reqId', name : 'reqId'},
                        //                                {display: 'Name', name : 'name', isdefault: true}
                    ],
                    sortname: "reqId",
                    sortorder: "asc",
                    usepager: true,
                    useRp: true,
                    rp: 10,
                    showTableToggleBtn: true,
                    width: 988,
                    height: 400
                }
            );


            });
            function sortAlpha(com)
            {


                jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});
                jQuery("#flex1").flexReload();



            }

            function test(com,grid)
            {
                if (com=='Delete')
                {
                    if($('.trSelected',grid).length>0){
                        if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
                            var items = $('.trSelected',grid);
                            var itemlist ='';
                            for(i=0;i<items.length;i++){
                                itemlist+= items[i].id.substr(3)+",";
                            }
                            $.ajax({
                                type: "POST",
                                dataType: "json",
                                url: "/candidtrack/web/requirement/requirement!gridInJson",
                                data: "items="+itemlist,
                                success: function(data){
                                    alert("Query: "+data.query+" - Total affected rows: "+data.total);
                                    $("#flex1").flexReload();
                                }
                            });
                        }
                    } else {
                        return false;
                    }
                }
                else if (com=='Add')
                {
                    alert('Add New Item Action');

                }
            }

        </script>


    </head>

    <body >



                    <table align="center" id="flex1">

                    </table>


    </body>
</html>
**************************
and the JSON which is returned by server that is displayed on FireBug but could 
not in the Flexigrid. is::



{
page:1 ,
total: 9,
rows: [
{reqId:'1',cell:['1','Title Req1111','Job-ContractToHire','Company 2','Frist 
Name  mid Last','Location 2','2010-12-12','Career Level 2','Dot 
NetJava','Bachelor','TN Visa','1/Y']},
{reqId:'2',cell:['2','title ','Job-ContractToHire','Company 2','Salman 8 
ItsMe','Location 2','2010-12-01','Career Level 1','Dot Net','','Green 
Card','234/H']},
{reqId:'3',cell:['3','t','Job-ContractToHire','Company 2','f m l','Location 
3','2011-01-29','Career Level 1','','','Citizen','23/H']},
{reqId:'4',cell:['4','t','Job-ContractToHire','Company 2','f m l','Locaion 
1','2011-01-11','Career Level 2','','','Green Card','23/H']},
{reqId:'5',cell:['5','t','Job-ContractToHire','Company 2','f m l','Locaion 
1','2011-01-11','Career Level 2','','Bachelor','Green Card','23/H']},
{reqId:'7',cell:['7','t','Job-FullTime','comp4','  ','Location 
2','2011-03-17','Career Level 2','Any Skill','Bachelor','Green Card','3/H']},
{reqId:'8',cell:['8','tt','Job-Contract','comp4','  ','Location 
2','2011-03-23','Career Level 2','Dot Net','','Citizen','3/H']},
{reqId:'9',cell:['9','tt','Job-Contract','comp4','  ','Location 
2','2011-03-23','Career Level 2','Dot Net','','Citizen','3/H']},
{reqId:'10',cell:['10','uuu','Job-Contract','comp4','  ','Location 
2','2011-03-18','Career Level 1','Java','Bachelor','Citizen','12/H']}]
}




Thanks in Advance

I was having difficulty rendering my JSON data too, even though the structure 
was spot-on. It turns out jQuery is making a JSONP request, hence you have to 
wrap the response in a function call named after the "callback" parameter 
passed as part of the URL. 

so for the above example, the actual URL that we GET would look more like this:

GET 
http://127.0.0.1/candidtrack/web/requirement/requirement!gridInJson?callback=jQu
ery983409324057205820435_30944320854325'

...meaning the response must look like this:

jQuery983409324057205820435_30944320854325({
 page:1 ,
 total: 9,
 rows: [
 {reqId:'1',cell:['1','Title Req1111','Job-ContractToHire','Company 2','Frist Name  mid Last','Location 2','2010-12-12','Career Level 2','Dot NetJava','Bachelor','TN Visa','1/Y']},
 {reqId:'2',cell:['2','title ','Job-ContractToHire','Company 2','Salman 8 ItsMe','Location 2','2010-12-01','Career Level 1','Dot Net','','Green Card','234/H']},
 {reqId:'3',cell:['3','t','Job-ContractToHire','Company 2','f m l','Location 3','2011-01-29','Career Level 1','','','Citizen','23/H']},
 {reqId:'4',cell:['4','t','Job-ContractToHire','Company 2','f m l','Locaion 1','2011-01-11','Career Level 2','','','Green Card','23/H']},
 {reqId:'5',cell:['5','t','Job-ContractToHire','Company 2','f m l','Locaion 1','2011-01-11','Career Level 2','','Bachelor','Green Card','23/H']},
 {reqId:'7',cell:['7','t','Job-FullTime','comp4','  ','Location 2','2011-03-17','Career Level 2','Any Skill','Bachelor','Green Card','3/H']},
 {reqId:'8',cell:['8','tt','Job-Contract','comp4','  ','Location 2','2011-03-23','Career Level 2','Dot Net','','Citizen','3/H']},
 {reqId:'9',cell:['9','tt','Job-Contract','comp4','  ','Location 2','2011-03-23','Career Level 2','Dot Net','','Citizen','3/H']},
 {reqId:'10',cell:['10','uuu','Job-Contract','comp4','  ','Location 2','2011-03-18','Career Level 1','Java','Bachelor','Citizen','12/H']}]
})

...Otherwise JQuery will throw an exception (which is handled by flexigrid.js, 
but never displayed!)

i'm not sure, but the reason might be jQuery's version.
flexigrid supports between 1.2 and 1.5 only.
your had better check version of jQuery.

i hope flexigrid supports 1.6.2.

[deleted comment]

Asp.net MVC VB.net working example 
in the View 

<table id="flex1" class="flexme3" style="display: none">    
</table>

<script type="text/javascript">

        $(document).ready(function () {
            $("#flex1").flexigrid
            ({
                dataType: 'json',
                colModel: [
                { display: 'sourceAsset', name: 'sourceAsset', width: 150, sortable: true, align: 'left' },
                { display: 'host', name: 'host', width: 100, sortable: true, align: 'left' },
                { display: 'Port', name: 'port', width: 100, sortable: true, align: 'left' },
                { display: 'statusCode', name: 'statusCode', width: 150, sortable: true, align: 'left' },
                { display: 'data', name: 'data', width: 100, sortable: true, align: 'left' },
                { display: 'dataType', name: 'dataType', width: 100, sortable: true, align: 'left' },
                { display: 'timestamp', name: 'timestamp', width: 200, sortable: true, align: 'right' }
                ],
                searchitems: [
                { display: 'sourceAsset', name: 'sourceAsset' },
                { display: 'statusCode', name: 'statusCode', isdefault: true }
                ],
                sortname: "sourceAsset",
                sortorder: "asc",
                usepager: true,
                title: 'Test For Visual Basic .Net programmers',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 1000,
                height: 200
            });


            $.post("TestGridflex1",
                function (data) {                    
                    var arr = Array();
                    arr = eval("(" + data + ")");                    
                    $('#flex1').flexAddData(arr);                    
                });            
        });


</script>

And in the Controler 
Function TestGridflex1() As String            

            Return "{ total: 2, page: 1, rows: [{ cell: [""test"", ""localhost"" , 8080 , ""ERROR"" , 0.0 , ""NA"" , 1298986463617] }, { cell: [""drew"" , ""localhost"" , 8080 , ""UNKNOWN"" , 0.0 , ""NA"" , 1299089866673]}] }"
End Function

Works ok

Has anyone figured out a solution to this?  I am having the same issue as 
above.  What is the proper structure of the json for the recent versions of 
jQuery to accept it?  I am using jQuery 1.7.1.

Hi People,

if you try to parse json chain, which you posted, you'll see, they are no well 
formed JSON Expression.

You could easy check whether a JSON Expression is well formed with 
http://jsonlint.com/
http://jsonformatter.curiousconcept.com/

You'll be able to deduce, "total" is correct but not total (without double 
quotes).


Now I must solve why a well formed JSON Expression is not shown :(

Hi all

I'm using jQuery 1.7.1 and Flexigrid is working fine...

May I help ?

Hi Can anyone helpout with a detailed example as in how to get/form the json 
data ?? Am using struts, IE7.

Many Thanks in advance!

[deleted comment]

The problem with jQuery 1.7.1 is that the code used for JSON expression has 
that be 
{"page":1,"total":1,"rows":[{"id":"239","cell":["239","ZW","ZIMBABWE","Zimbabwe"
,"ZWE","716"]}]}

and not 

{page: 1,total: 1,rows: 
[{id:'239',cell:'239','ZW','ZIMBABWE','Zimbabwe','ZWE','716']}

this worked for me..

Or not.. :( When the table has a great number of rows, flexigrid freeze if you 
click in next navbar. 
The way is use old version of jquery for not have any compatibily problems.. 
Unfortunately...

Please help me, still not rendering data.
this is my JSON format : 
{"page":1,"total":3,"rows":[{"kode_barang":"JCMK","cell":["JCMK","Jam The Cars 
Merah Kecil"]},{"kode_barang":"JCMB","cell":["JCMB","Jam The Cars Merah 
Besar"]},{"kode_barang":"JSKB","cell":["JSKB","Jam Sponge Bob Kuning Besar"]}]} 

this is my Code :

    $(document).ready(function() {
        $(function(){
            function doAction() {}

            $("#grid1").flexigrid({
                url: 'column_right.php',
                dataType: 'json',
                colModel : [
                    {display: 'Kode', name : 'kode_barang', width : 80, sortable : true, align: 'center'},
                    {display: 'Nama Barang', name : 'nama_barang', width : 400, sortable : true, align: 'left'}
                    ],
                buttons : [
                    {name: 'Add', bclass: 'add', onpress : doAction},
                    {separator: true},
                    {name: 'Delete', bclass: 'delete', onpress : doAction},
                    {separator: true}
                    ],
                searchitems : [
                    {display: 'Kode', name : 'kode_barang'},
                    {display: 'Nama Barang', name : 'nama_barang', isdefault: true}
                    ],
                sortname: "kode_barang",
                sortorder: "asc",
                usepager: true,
                title: 'Table Barang',
                useRp: true,
                rp: 15,
                showTableToggleBtn: false,
                width: 700,
                height: 300,
                singleSelect: true
            });

        }) 

        })

        ;

i am using jquery 1.7.2

Hello every body 
I got the solution of this problem...
if you have a firebug add-on installed in firefox. then you could see an error
"$.cookie() is not a function...."
the problem is jquery cookie plugin hasn't been adden
include jquery.cookie plugin just after the main jQuery library and ta-da..
that's all.
plese search jquery cookie plugin in Google..i'm too lazy to add the link

Im with the same problem. Someone got any solution ?

Hi, i have the same problem to...
the json returned was ok as i view it in firebug, but flegrid is not rendering..
have tried everything, including adding the cookie plugins (this is a must).
It's turn out what alecsan said in comment 15 is working for me..
Double quote everything in your json everybody....

here is my sample of json returned..
{
"page":1,
"total":65,
"rows": [
{"id":"1","cell":["1","0","AED","United Arab Emirates Dirham","DH"]}
,
{"id":"2","cell":["2","0","ARS","Argentine Peso","$"]}
,
{"id":"3","cell":["3","0","AUD","Australian Dollar","$"]}
]
}