View Full Version : preprocessor types

12 Oct 2006, 11:43 AM
Hey jack, I might not have cruised through the API long enough to find this data, and if so I apologize in advance. I wanted to add a preprocessor that would make checkboxes for me when using the grid and the XMLDataModel.

I tried to write my own in infinite wisdom:

var parseBoolBox = function(value){
if(value == true)
return "<input>";
if(value == false)
return "<input>";
if(value == "")
return "";

try not to laugh if its terrible off, I would like to know if there is an existing preprocessor, and if not how could I go about making the code to do so.

12 Oct 2006, 12:09 PM
The preprocessors are intended for just converting data types etc.

For a checkbox in a cell, you'd probably want to use a render defined on the column.

function renderCheckbox(value){
return '<input type="checkbox" ' + (value ? 'checked' : '') + '/>';
var myColumns = [
{header: "My Checkbox Column", width: 100, renderer: renderCheckbox}
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

13 Oct 2006, 5:27 AM
I did try the code snippet you proviced but it does not seem to be working. I am not sure what to show you to help you to help me. I know it can be frustrating to be told "well it just doesnt work" and have no explination. I have tried a couple different ways now and I just cant get it to render those checkboxes, let me know if u need to view my code.

13 Oct 2006, 5:49 AM
Some code will definitely help. A link would be even better :)

13 Oct 2006, 6:20 AM
Here ya go for code:

initUserGrid : function(){
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "User Name", width: 120, sortable: true, sortType: sort.asUCString},
{header: "Approved", width: 65, sortable: false, renderer: boolFormat},
{header: "Locked", width: 65, sortable: false, renderer: boolFormat},
{header: "Online", width: 65, sortable: false, renderer: boolFormat},
{header: "Created", width: 80, sortable: false, renderer: dateFormat},
{header: "Last Active", width: 80, sortable: false, renderer: dateFormat},
{header: "Last Lockout", width: 80, sortable: false, renderer: dateFormat}

var schema = {
tagName: 'user',
id: 'use-index',
fields: ['username',

this.userData = new YAHOO.ext.grid.XMLDataModel(schema);
this.userData.addPreprocessor(4, parseDate);
this.userData.addPreprocessor(5, parseDate);
this.userData.addPreprocessor(6, parseDate);
this.userData.setDefaultSort(colModel, 0, "DESC");

// Formatters
var boolFormat = function(value){
if(value == 'checked')
return '<input>';
if(value == 'false')
return '<input>';
if(value == '')
return '';

var dateFormat = function(value){
return value.dateFormat('M d, Y');

var parseDate = function(value){
return new Date(Date.parse(value));

// Event Subscibers
function onRowDoubleClick(grid, rowIndex, e){
YAHOO.user.panel.popup.setHeader("User Specific Stats for: " + application.userGrid.dataModel.data[rowIndex][0]);
YAHOO.user.panel.popup.setBody( // I am directly referencing the dataModel of the grid... we will want to reference the XML in the datamodel
"User Name: " + application.userGrid.dataModel.data[rowIndex][0] +"\n"+
"User Email: " + application.userGrid.dataModel.data[rowIndex][1] +"\n"+
"Is Approved: " + application.userGrid.dataModel.data[rowIndex][2] +"\n"+
"Is Locked Out: " + application.userGrid.dataModel.data[rowIndex][3] +"\n"+
"Is Online :" + application.userGrid.dataModel.data[rowIndex][4] +"\n"

this.userGrid = new YAHOO.ext.grid.Grid('user_grid', this.userData, colModel);

this.userGrid.addListener('rowdblclick', onRowDoubleClick);

}, // End user_grid

I just setup another site in IIS on my personal server, I have to reconstruct most of the assets for this page though because its being used in VS right now for an imbedded app. I will do it later this afternoon.

13 Oct 2006, 6:55 AM
It appears you are referencing the functions (like parseDate) before they are defined. Try putting the function definitions at the top of the method.

13 Oct 2006, 7:51 AM
you're my hero :lol: