Forum
Log In
Home
Topic RSS
Related Topics
19:45
16/11/2010
Offline
We were using jqGrid 3.6.5 version with local data, sorting and using setCell function.
Example code (save as html, add library files, open and try to sort by clicking on column headers):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.5.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jqgrid.3.6.5/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid.3.6.5/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="myTable"></table>
<script type="text/javascript">
var $table = $('#myTable');
$(document).ready(function(){
$table.jqGrid({
datatype : 'clientSide',
width : 300,
height : 250,
sortable : true,
colNames : ['Rank', 'ID', 'Product Description'],
colModel : [
{ name: 'id', index: 'id', sorttype: 'int', sortable: true },
{ name: 'productID', index: 'productID', sortable: true },
{ name: 'productTitle', index: 'productTitle', sortable: true }
],
jsonReader: {repeatitems: false}
});
var rows = [
{id: '1', productID: '1', productTitle: 'A test product 1'},
{id: '2', productID: '2', productTitle: 'A test product 2'},
{id: '3', productID: '3', productTitle: 'A test product 3'},
{id: '4', productID: '4', productTitle: 'A test product 4'},
{id: '5', productID: '5', productTitle: 'A test product 5'},
{id: '6', productID: '6', productTitle: 'A test product 6'},
{id: '7', productID: '7', productTitle: 'A test product 7'},
{id: '8', productID: '8', productTitle: 'A test product 8'},
{id: '9', productID: '9', productTitle: 'A test product 9'},
{id: '10', productID: '10', productTitle: 'A test product 10'}
];
$table.setGridParam({ rowNum: rows.length });
$table[0].addJSONData({records: rows.length, rows: rows, page: 0, total: 10});
colorCells($table, rows, 'productID');
});
function colorCells($table, rows, column) {
for (var i = 0, len = rows.length; i < len; i++) {
var row = rows[i];
var colCode = i * 255 / len;
$table.setCell(row.id, 'productID', '', '', { 'style': 'background-color: rgb(' + Math.round(colCode) + ',255,255); text-align: right;' });
}
}
</script>
</body>
</html>
When we update jqGrid to 3.8.1. By changing
<script src="js/jqgrid.3.6.5/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid.3.6.5/jquery.jqGrid.min.js" type="text/javascript"></script>
to
<script src="js/jqgrid.3.8.1/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid.3.8.1/jquery.jqGrid.min.js" type="text/javascript"></script>
and provide required libraries.
When you click on column header now, then all rows disappear.
We are adding data using addJSONData method, if we add data using addRowData. Like this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.5.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jqgrid.3.8.1/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid.3.8.1/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="myTable"></table>
<script type="text/javascript">
var $table = $('#myTable');
$(document).ready(function(){
$table.jqGrid({
datatype : 'clientSide',
width : 300,
height : 250,
sortable : true,
colNames : ['Rank', 'ID', 'Product Description'],
colModel : [
{ name: 'id', index: 'id', sorttype: 'int', sortable: true },
{ name: 'productID', index: 'productID', sortable: true },
{ name: 'productTitle', index: 'productTitle', sortable: true }
],
jsonReader: {repeatitems: false}
});
var myData = [
{id: '1', productID: '1', productTitle: 'A test product 1'},
{id: '2', productID: '2', productTitle: 'A test product 2'},
{id: '3', productID: '3', productTitle: 'A test product 3'},
{id: '4', productID: '4', productTitle: 'A test product 4'},
{id: '5', productID: '5', productTitle: 'A test product 5'},
{id: '6', productID: '6', productTitle: 'A test product 6'},
{id: '7', productID: '7', productTitle: 'A test product 7'},
{id: '8', productID: '8', productTitle: 'A test product 8'},
{id: '9', productID: '9', productTitle: 'A test product 9'},
{id: '10', productID: '10', productTitle: 'A test product 10'}
];
$table.addRowData('id', myData);
colorCells($table, myData, 'productID');
});
function colorCells($table, rows, column) {
for (var i = 0, len = rows.length; i < len; i++) {
var row = rows[i];
var colCode = i * 255 / len;
$table.setCell(row.id, 'productID', '', '', { 'style': 'background-color: rgb(' + Math.round(colCode) + ',255,255); text-align: right;' });
}
}
</script>
</body>
</html>
In this case sorting works, but changes done by setCell method are not preserved (gradient is lost on first sort).
What is correct and working way to load local data, sort and get functionality from setCell preserved?
19:57
16/11/2010
Offline
Also, if we use addRowData method with 3.6.5 version then gradient is preserved. So basically we have two problems:
1. addJSONData working differently in new version.
2. setCell is not preserved in new version.
Most Users Ever Online: 715
Currently Online:
46 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
