I am trying to use flexigrid plugin for jquery, the problem is that I also want to use the plugin fancybox, and this plugin uses jQuery 1.4.3, but flexigrid doesn't seem to work with that version of jquery.
When I roll back to the old jquery version that comes with flexigrid the grid does work but fancybox doesn't.
This is the code i am using:
$("#grid1").flexigrid
(
{
url: 'php/get.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
{display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
{display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : doAction},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : doAction},
{separator: true},
{name: 'Activate', bclass: 'activate', onpress : doAction},
{separator: true},
{name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'XXX',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
</script>
And the php response looks like this:
{
page: 1,
total: 3,
rows: [
{id:'28',cell:['28','test','test','test','1']},
{id:'27',cell:['27','test','test','test','1']},
{id:'26',cell:['26','etrer','ter','trt','0']}]
}
I am using firebug and it doesn't show any js error.
Is there a way to use flexigid with jquery 1.4.3?
Try rendering your JSON using double quotes, not single quotes.
Both plugins seems to work with v1.3.2
I think I have both plugins working with jQuery 1.6.1. Obviously it depends on both flexigrid and fancybox jQuery plugins and an example JSON file that I have called flexigrid.json. If you download those plugins and make sure the src and href links to the correct locations for the JavaScript and CSS and create a file called flexigrid.json with the following content:
{
"page": 1,
"total": 3,
"rows": [
{"id":28,"cell":[28,"test","test","test",1]},
{"id":27,"cell":[27,"test","test","test",1]},
{"id":26,"cell":[26,"etrer","ter","trt",0]}]
}
Note: The JSON in your example is not valid (as #Josh pointed out already). You can run in through an online parser to see the errors.
Here is the example page with both plugins:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="flexigrid/js/flexigrid.pack.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="flexigrid/css/flexigrid.pack.css"/>
<script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">
$(function(){
function doAction() {}
$("#grid1").flexigrid({
url: 'flexigrid.json',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
{display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
{display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : doAction},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : doAction},
{separator: true},
{name: 'Activate', bclass: 'activate', onpress : doAction},
{separator: true},
{name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'XXX',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
});
$("a#example1").fancybox({
'titleShow' : false
});
$("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
$("a#example3").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<table id="grid1"><tr><td></td></tr></table>
<p>Different animations - 'fade', 'elastic' and 'none'<br />
<a id="example1" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">
<img alt="example1" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" />
</a>
<a id="example2" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg">
<img alt="example2" src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" />
</a>
<a id="example3" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">
<img alt="example3" src="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a_m.jpg" />
</a>
</p>
</body>
</html>
Note: This will not work locally when testing in Chrome 13 due to the Same origin policy security restriction. You can see the error in the console Origin null is not allowed by Access-Control-Allow-Origin. You will need to serve to the example page and JSON from a proper web server.
Hope this helps.
I am working on the same issue. I found the below links helpful to get started.
Core issue - from groups.google.com
"As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double- quotes. For details on the JSON format, see http://json.org/.
Basically you have to be careful with your json now, and ensure its formatted correctly. I would guess its related to this. Check the json.org site and check your JSON to make sure its correct."
http://simonwillison.net/2006/oct/11/json/
http://jsonformatter.curiousconcept.com/#jsonformatter
Related
Really think this is a simple fix, but after trying other solutions posted on SO I haven't had any luck.
I'm getting an undefined function every time I select or double click on a row and each of those functions fires in the jqGrid. Code and html header below. Error is in onSelectRow and ondblClickRow when events fire.
Error output:
Header load order:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
JS code for jqGrid:
var lastSel;
editParams = {
"successfunc": null,
"url": '/submit/adjustments',
"extraparam": {
UserAdj: function() {
var sel_id = $('#rowed1').jqGrid('getGridParam', 'selrow');
var value = $('#rowed1').jqGrid('getCell', sel_id, 'user_adj_order');
return 'test';
},
arg1 : 'test_it_out'
},
"aftersavefunc": null,
"errorfunc": null,
"afterrestorefunc": null,
"mtype" : "POST"
}
jQuery("#rowed1").jqGrid({
url: base_url + 'get/101/items',
datatype: "json",
jsonReader: {
root: function (obj) { return obj.items; },
id: 'id',
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.items.length; },
},
loadonce: true,
colNames:['Vendor', 'Name', 'Price', 'Last Cost', 'Qty OH', 'Qty OO', 'Wks Selling', 'Str Velocity', 'Fleet Velocity', 'Reccomended Buy', 'User Adjustment'],
colModel:[
{name: 'vendor_name'},
{name: 'name'},
{name: 'price'},
{name: 'cost'},
{name: 'qty_OH', sorttype:'int'},
{name: 'qty_OO', sorttype:'int'},
{name: 'str_wks_selling', sorttype:'int'},
{name: 'velocity', sorttype:'int'},
{name: 'flt_five_wk_vel', sorttype: 'int'},
{name: 'rec_buy', sorttype: 'int'},
{name: 'user_adj_order', editable: true}
],
onSelectRow: function(id){
if(id && id!==lastSel){
$('#rowed1').jqGrid('saveRow', lastSel, editParams);
lastSel=id;
}
},
ondblClickRow: function(id) {
$('#rowed1').jqGrid('editRow', id, true, editParams);
},
rowNum:10,
rowList:[10,20,30],
pager: '#prowed1',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
autowidth: true,
height: '100%',
gridView: true,
'cellSubmit': 'remote',
editurl: '/submit/adjustments',
cellurl: '/submit/adjustments'
});
Have you tried clearing cache? If yes and it is still not working, can you please post your full html code as well. Assuming the JS code is in a separate JS file.
My calendar image is positioned below the text box of my datepicker. How can I solve this misalignment.
This is a screenshot of my screen: ! 1: http://i.stack.imgur.com/3uifN.jpg
See the jsfiddle here: jsfiddle.net/njiterry/yNw3C/8477
This is my jsp code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Country Visibility</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var mydata = [
{ Sel: true, Country : "Germany", Capital : "Berlin", Date: "05-09-2014"},
{ Sel: true, Country : "France", Capital : "Paris", Date: "05-09-2014" },
{ Sel: true, Country : "Cameroon", Capital : "Yaounde", Date: "06-09-2014" },
{ Sel: true, Country : "Gabon", Capital : "Libreville", Date: "06-09-2014" },
{ Sel: true, Country : "Holland", Capital : "Amsterdam", Date: "07-09-2014" },
{ Sel: true, Country : "Japan", Capital : "Tokyo", Date: "08-09-2014" },
{ Sel: true, Country : "Italy", Capital : "Rome" , Date: "09-09-2014"},
{ Sel: true, Country : "Spain", Capital : "Madrid" , Date: "09-09-2014"},
{ Sel: true, Country : "England", Capital : "London" , Date: "10-09-2014"},
{ Sel: true, Country : "US", Capital : "Washington D.C." , Date: "12-09-2014"}
];
var grid = jQuery("#pays_grid");
var initDateWithButton = function (elem) {
if (/^\d+%$/.test(elem.style.width)) {
// remove % from the searching toolbar
elem.style.width = '';
}
// to be able to use 'showOn' option of datepicker in advance searching dialog
// or in the editing we have to use setTimeout
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showOn: 'button',
changeYear: true,
changeMonth: true,
buttonImageOnly: true,
buttonImage: "images/calendar.gif",
buttonText: "Select date",
onSelect: function (dateText, inst) {
if (inst.id.substr(0, 3) === "gs_") {
grid[0].triggerToolbar();
}
else {
// to refresh the filter
$(inst).trigger("change");
}
}
});
$(".ui-datepicker-trigger").css({
position: "relative",
marginLeft: "1px",
marginTop: "0px",
});
}, 100);
};
grid.jqGrid({ //set your grid id
data: mydata, //insert data from the data object we created above
datatype: 'local',
height: 230,
autoheight: true,
width: 800,
rowNum: 10,
rowList: [1, 5, 10],
colNames:['Sel.','Id','Name', 'Date'], //define column names
colModel:[
{name: 'Sel', align: 'center', sortable: false, width: 25, search: false, editable: true, edittype: 'checkbox',
editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
{name:'Country', index:'Country', key: true, width:50, align:'center'},
{name:'Capital', index:'Capital', width:100, align:'center'},
{name: 'Date', index: 'Date', align: 'center', width: 100}
], //define column models
pager: '#pager', //set your pager div id
sortname: 'Country', //the column according to which data is to be sorted; optional
viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
sortorder: "asc", //sort order; optional
sortname: 'Country',
shrinkToFit: true,
forceFit: true,
caption: "Country Overview", //title of grid
loadComplete: function() {
grid.jqGrid('setColProp', 'Date', {
sorttype: 'date', editable: true,
editoptions: { dataInit: initDateWithButton, size: 11 },
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateWithButton,
// size: 8, // for the advanced searching dialog
// attr: {size: 8} // for the searching toolbar
}
});
grid.jqGrid('filterToolbar', {autoSearch: true});
}
}).navGrid('#truck_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true});
});
</script>
</head>
<body>
<table id="pays_grid"></table>
<div id="pager"></div>
</body>
</html>
I've tried looking at similar questions here on Stack Overflow but I can't get the trigger image to appear inline with the input.
It seems to me that you should use
.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select,
.ui-jqgrid .ui-search-table .ui-search-input > img {
vertical-align: middle;
display: inline-block;
}
See http://jsfiddle.net/yNw3C/8486/
add display inline style to your text box that contains date
then adjust the margin-top of your date picker image to make it look nice and aligned with your text box.
check here: http://jsfiddle.net/saxenaabhi6/yNw3C/8479/
#gs_Date{
display:inline
}
Instead of setting
position='relative'
set
position='absolute'
and adjust top and left accordingly. Here's a fiddle:
http://jsfiddle.net/ey170t1z/1/
in the CSS:
.ui-datepicker-trigger {
vertical-align: top;
height: 24px; /* the same of textbox */
}
The buttons on my jqGrid won't show (back, forward, first page, last page, search, etc...).
Image:
Code:
<h3><?php echo $title?></h3>
<?php $lastbids = SchedulesData::GetLatestBids(); print_r($lastbids);?>
<link rel="stylesheet" type="text/css" media="screen" href="website/lib/js/jqgrid/css/ui.jqgrid.css" />
<script src="website/lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="website/lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<table id="grid"></table>
<div id="pager"></div>
<br />
<script type="text/javascript">
$("#grid").jqGrid({
url: 'website/schedules/schedulegrid',
datatype: 'json',
mtype: 'GET',
colNames: ['Code', 'Flight Num', 'Departure', 'Arrival', 'Aircraft', 'Distance', 'Route',
'Bid'],
colModel : [
{index: 'code', name : 'code', width: 40, sortable : true, align: 'center', search: 'true', searchoptions:{sopt:['eq','ne']}},
{index: 'flightnum', name : 'flightnum', width: 65, sortable : true, align: 'center', searchoptions:{sopt:['eq','ne']}},
{index: 'depicao', name : 'depicao', width: 60, sortable : true, align: 'center',searchoptions:{sopt:['eq','ne']}},
{index: 'arricao', name : 'arricao', width: 60, sortable : true, align: 'center',searchoptions:{sopt:['eq','ne']}},
{index: 'a.name', name : 'aircraft', width: 100, sortable : true, align: 'center',searchoptions:{sopt:['in']}},
{index: 'distance', name : 'distance', width: 100, sortable : true, align: 'center', searchoptions:{sopt:['lt','le','gt','ge']}},
{index: 'route', name : 'route', width: 100, sortable : true, align: 'center',searchoptions:{sopt:['in']}},
{index: '', name : '', width: 100, sortable : true, align: 'center', search: false}
],
pager: '#pager', rowNum: 25,
sortname: 'flightnum', sortorder: 'asc',
viewrecords: true, autowidth: true,
height: '100%'
});
jQuery("#grid").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:true,refresh:true},
{}, // edit
{}, // add
{}, //del
{multipleSearch:true} // search options
);
function showroute(schedule_id)
{
$('#jqmdialog').jqm({
ajax:'website/schedules/viewmap?type=schedule&id='+schedule_id
}).jqmShow();
}
function addbid(id)
{
$.post("http://website/schedules/addbid", { id: id },
function()
{
$("#grid").trigger("reloadGrid");
}
);
}
function removebid(id)
{
$.post("http://website/schedules/removebid", { id: id },
function()
{
$("#grid").trigger("reloadGrid");
}
);
}
</script>
I looked at some other posts on stack overflow, but none of them seemed to work for me. How can I get the buttons to show up?
You have to include some jQuery UI CSS file. For example:
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
See example in the documentation.
I have the following grid defined:
$("#list").jqGrid({
url:'listOpenQueryInXML.php',
datatype: 'xml',
colNames:['Id','name1', 'name2', 'status', 'type'],
colModel:[
{name:'id', index:'id', editable: false, formatter:'showlink', formatoptions:{baseLinkUrl:'continue.php'}},
{name:'name1', index:'name1', editable: false},
{name:'name2', index:'name2', editable: false},
{name:'status', index:'status', editable: false},
{name:'type', index:'type', editable: false}
],
autowidth: true,
sortname: 'id',
viewrecords: true,
pager: null,
sortorder: 'id',
loadonce: false,
caption: 'Open Query',
height: '100%',
xmlReader: { root : "rows", row: "row", repeatitems: false, id: "id" },
Now, what I would like to have is to override continue.php to be a different link based on the content of 'id', or 'status' or any field.
So if
status = NEW link="new.php?id="{id}"
status = STUCK link="helper.php?id={id}"
Etc.
I'm running jqGrid 4.3.1 and jQuery 1.8.16.
You should use custom formatter instead of showlink formatter. In the case you have to construct <a> element yourself based on the cellvalue, options and rowObject parameters of the callback function. Because you use datatype: 'xml' the rowObject parameter will be IXMLDOMElement so to get contain of the status you should use find or children jqGrid method.
I don't tested the code below, but I suppose you can do something like the following
$("#list").jqGrid({
url: 'listOpenQueryInXML.php',
colNames: ['Id', 'name1', 'name2', 'status', 'type'],
colModel :[
{name:'id', formatter: function (cellvalue, options, rowObject) {
return '<a href="' +
($(rowObject).children('status').text() === 'NEW' ?
'new.php' : 'helper.php') +
'?id=' + cellvalue + '">' + cellvalue + '</a>';
},
{name:'name1'},
{name:'name2'},
{name:'status'},
{name:'type'}
],
autowidth: true,
gridview: true,
sortname: 'id',
viewrecords: true,
sortorder: 'id',
caption: 'Open Query',
height: '100%',
xmlReader: { repeatitems: false, id: "id" }
});
Its only an example of the formatter. You can place for example other text in the link which will be displayed the user.
I removed from the jqGrid definition which you use many default options and added the gridview: true options which improves the performance of the grid.
Has anyone tried to set a common header text of more than one column in flexigrid?
For example: I would like to label/group second and third columns with text "Received" and fourth and last column wit text "Sent".
<script type="text/javascript">
$("#flex1").flexigrid({
url: 'data.xml',
dataType: 'xml',
colModel : [
{display: 'Ports', name : 'port', width : 40, sortable : true},
{display: 'Bytes', name : 'rx_bytes', width : 40, sortable : true},
{display: 'Packets', name : 'rx_pkts', width : 40, sortable : true},
{display: 'Bytes', name : 'tx_bytes', width : 40, sortable : true},
{display: 'Packets', name : 'tx_pkts', width : 40, sortable : true},
],
usepager: false,
useRp: true,
width: 626,
height: 200
});
Such a functionality is satisfied by AdvancedDataGrid in Flex (e.g. http://livedocs.adobe.com/flex/3/html/images/simpleColumnGroupbwg.png) where you can create GroupColumns. Does anyone know if such a functionality is supported by Flexigrid?
colModel:[]
Sets just the names and the style of the headers.What's important is the data you'll receive from
url: 'data.xml'
So the grid names play no role.
For more information on flexigrid check this http://www.kenthouse.com/blog/2009/07/fun-with-flexigrids