Ken’s Sandbox

I have been working with some of the features of the Rico project for some time now. One of the nicest components is the Javascript data grid (LiveGrid). The thing about this grid is that it will display thousands of rows fetching small segments of the data as the user scrolls.

The original LiceGrid in the Rico project has been enhanced by Mat Brown (http://dowdybrown.com) to include resizable columns, filters, frozen columns, horizontal scrolling, just about every feature you would see in a data grid in a desktop application.

I keep seeing the same questions posted over and over in the Rico forums about the Rico grid. For the most part the implementation of the two grids is very similar. However the advanced features require quite a few differences in initialization parameters so the following discussion covers Mat’s LiveGrid Plus.

This discussion is meant to be a starting point. I am only going to cover the javascript it takes to initialize a grid. I’ll leave the html, and data script portions for future posts.

I have implemented LiveGrid Plus as a plug-in component for use in my applications. I plan on releasing my code as open source. Eventually I will document my entire grid implementation, but for now, hopefully this will answer a few immediate questions on the Rico forum.

Implementing the Grid. The javascript below is what I use to create a grid. This grid displays mls listing data.

var theGrid;
var rgparms = new Array();
rgparms.push("sessionid=12345");

function bodyOnLoad() {
var opts = {
largeBufferSize: 3,
menuEvent     : 'contextmenu',
frozenColumns : 0,
canSortDefault: false,
canHideDefault: true,
allowColResize: true,
canFilterDefault: false,
canPrint: false,
highltOnMouseOver: true,
rowHighlightColor: '#c4c4c5',
saveColumnInfo: true,
requestParameters : rgparms,
customFilter: "class=R&lstatus=A&area=bandon",
specFilterSort:   {type:'raw', canSort:true, canFilter:true, quotes:"'"},
specFilter:   {type:'raw', canSort:false, canFilter:true, quotes:"'"},
specSort:   {type:'raw', canSort:true, canFilter:false, quotes:"'"},
columnSpecs   : ['specSort','specFilterSort','specSort','specFilterSort',,,,,,'specSort','specFilterSort'],
prefetchBuffer: true
};
theGrid=new Rico.LiveGrid ('theGrid', 20, 1, '/grid/grid_data.php',opts);
}

Here are descriptions of the parameters I use. These are passed to the grid as an options object defined here as opts. This is not a complete list of available parameters.

largeBufferSize - integer

This determines how many rows are requested with each data request. The number of rows requested is calculated as largeBufferSize * number of rows. So with 20 visible rows in this grid we are requesting 60 records. The default value is 7 which I found was a bit large for good scrolling performance.

menuEvent - click | dblclick | context

This is the mouse event that will display the grid context menu. The context menu allows sorting and filtering for columns that support them.

frozenColumns - integer

The number of columns that will not scroll horizontally

canSortDefault - true/false

Indicates whether columns may be sorted by default.

canHideDefault - true/false

Indicates whether columns may be hidden.

canFilterDefault - true/false

Indicates whether columns may be filtered by default.

allowColResize - true/false

Indicates whether columns may be resized.

canPrint - true/false

This is not a standard LiveGrid Plus parameter. I modified my version so be able to disable the print function on the context menu. Hopefully this enhancement will make it into the standard version of the code.

highlightOnMouseOver - true/false

Indicates whether rows should highlight as the mouse moves over them.

rowHighlightColor - color number

This is the color to use to highlight the row on a mouseover.

saveColumnInfo - true/false

Indicates whether to save changes to column widths, etc as cookies in the user’s browser.

requestParameters

This is an array of field=value strings that will be passed to the grid data program. I use it mostly for passing a sessionid (notice the rgparms.push at the start of the code).

customFilter - string

This is a query string that is added to the request to the grid data script.

specFilterSort, specSort and specFilter - object

Livegrid Plus allows you to create custom column specifications that control formatting and features available for each column.

columnSpecs - array

The column specs array contains an entry for each grid column. If a column is not given a specification, the default values for sort, filter, etc. are used.

prefetchBuffer - true/false

Indicates whether we need to fetch data on grid initialization. If you set this to true

Initialize the grid:

theGrid=new Rico.LiveGrid ('theGrid', 20, 1, '/grid/grid_data.php',opts);

The line above initializes the grid. In the body of the page I have created a table with the id of ‘theGrid’. The 20 is the number of visible rows in the grid (if make this -1, LiveGrid Plus will size your grid to fill available space). The 1 is a place holder for the total number of rows in the data set. LiveGrid Plus allows you to return the total number of rows in the returned xml from the data script. This is a very nice feature in that it allows user filtering of the data.

The /grid/grid_data.php is my data script and opts is the options object we just discussed.

That’s it for this post. It has been busy the past couple of months and not looking to get better. I will try to find time to discuss how I create the live grid table and my php data script in the next couple of weeks.

I don’t normally leave comments open on posts due to spammers. I will leave them open here until the spam gets out of hand. Please post questions on the Rico 2.0 forum and feel free to leave any corrections, praise etc. here.