Open GoogleCodeExporter opened 8 years ago
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 :)
Original comment by shirishi...@gmail.com
on 9 Mar 2011 at 8:07
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>
Original comment by gordon.r...@offutt.af.mil
on 9 Mar 2011 at 2:31
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.
Original comment by jni.vi...@gmail.com
on 15 Mar 2011 at 6:50
[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
Original comment by alifida...@gmail.com
on 22 Apr 2011 at 9:56
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!)
Original comment by richie.d...@gmail.com
on 7 Jul 2011 at 10:23
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.
Original comment by coffeemi...@gmail.com
on 8 Sep 2011 at 5:18
[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
Original comment by the...@gmail.com
on 30 Nov 2011 at 5:05
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.
Original comment by austin.g...@gmail.com
on 7 Dec 2011 at 2:43
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 :(
Original comment by branw...@googlemail.com
on 23 Dec 2011 at 10:35
Hi all
I'm using jQuery 1.7.1 and Flexigrid is working fine...
May I help ?
Original comment by mcf...@gmail.com
on 9 Feb 2012 at 2:42
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!
Original comment by rohitsz...@gmail.com
on 17 Feb 2012 at 6:40
[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..
Original comment by alecsan...@transcendent.com.br
on 1 Mar 2012 at 5:42
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...
Original comment by alecsan...@transcendent.com.br
on 1 Mar 2012 at 7:43
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
});
})
})
;
Original comment by gdio...@gmail.com
on 12 Apr 2012 at 2:54
i am using jquery 1.7.2
Original comment by gdio...@gmail.com
on 12 Apr 2012 at 2:55
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
Original comment by Maity.n...@gmail.com
on 22 Aug 2012 at 7:04
Im with the same problem. Someone got any solution ?
Original comment by paulo.or...@gmail.com
on 28 Aug 2012 at 10:00
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","$"]}
]
}
Original comment by Msl.C...@gmail.com
on 15 Sep 2012 at 5:09
Original issue reported on code.google.com by
gordon.r...@offutt.af.mil
on 8 Mar 2011 at 8:20