28 January 2010

Fun with jqGrid

We've recently started using jqGrid, a jQuery-based data grid tool, for presenting search results. I picked up a tip for adding a custom caption to the rows-per-page dropdown (which is controlled by the rowlist[] array). Unfortunately, that bit of code is subject to a one-off bug in that it is not idempotent. So when it's used in a loadComplete event handler (which fires each time the grid is [server-side] sorted or otherwise reloaded), I found that I had to write some first-time-only guard logic. Here's an abridged version of my code that sets up the grid, with a few other hacks to work around some deficiencies in jqGrid.



var dataGrid;
var firstTime = true;

jQuery(document).ready(function(){

//set up our own grid wrapper
dataGrid = new CLIENT.DataGrid.DataGrid('#postList');

//set up the main grid
jQuery('#postList').jqGrid({
url: BASE_URL,
datatype: 'xml',
mtype: 'GET',
colNames: ['Status', 'Headline', 'Byline(s)', 'Date'],
colModel: [
{name: 'status', width: 80, sortable: false},
{name: 'headline',width: 290, index: 1},
{name: 'bylines', width: 148, sortable: false},
{name: 'date', width: 150, index: 2},
],
rowList: [10,20,30,50],
pager: '#postPager',
pgbuttons: true,
rowNum: 20,
loadonce: false,
viewrecords: true,
recordtext: 'Posts {0} - {1} of {2}',
pgtext: 'Page {0} of {1}',
emptyrecords: 'No posts to display',
* * *
loadComplete: function () {
jQuery('select[class="ui-pg-selbox"]').attr({title: 'Posts per page'}); //label for rowList-based dropdown
if (firstTime) {
jQuery('#postPager .ui-pg-selbox').closest('td').after('Posts per page');
firstTime = false;
}
jQuery('#postPager_center').attr({style: 'white-space: pre; width: 450px;'}); //override jqGrid's width
jQuery('#jqgh_status').attr({className: 'nosort'}); //sortable: attribute doesn't clear the ui-jqgrid-sortable class for us
jQuery('#jqgh_bylines').attr({className: 'nosort'});
}
});
});

No comments: