Can a column display a graphic?

[donalconlon]

Is it possible for acolumn to display a graphic? Either static, or based on the value in the cell?

[jack.slocum]

Yes, using a renderer function.


function renderImage(value, rowIndex, colIndex){
return 'myimage.gif';
}
// then in your column model definition:
var myColumns = [
{header: "Icon", width: 20, renderer: renderImage},
...
];


Note: If you need to display big images you will have to customize the row/cell heights defined in the CSS.

[techno_adi]

Can somebody explain the second part of the question "based on the value in the cell". How do i update only one row's image cell based on the value in other (assuming that the value is editable)?
Is it possible for acolumn to display a graphic? Either static, or based on the value in the cell?

[jack.slocum]

You will need a reference to your DataModel to get the other cell's value.


// create your data model
var dataModel = {...}

function renderImage(value, rowIndex, colIndex){
if(value == 'foo'){
return 'foo.gif';
}else{
// get the value at row 1, column 1
var otherValue = dataModel.getValueAt(1, 1);
if(otherValue == 'bar'){
return 'bar.gif';
}else{
return 'none.gif';
}
}
}

[techno_adi]

You will need a reference to your DataModel to get the other cell's value.


// create your data model
var dataModel = {...}

function renderImage(value, rowIndex, colIndex){
if(value == 'foo'){
return 'foo.gif';
}else{
// get the value at row 1, column 1
var otherValue = dataModel.getValueAt(1, 1);
if(otherValue == 'bar'){
return 'bar.gif';
}else{
return 'none.gif';
}
}
}


i tried this out, it works great..
But when i tried doing
var otherValue = dataModel.getValueAt(rowIndex, 1);
it flags an error as to
this.data[rowIndex] is not a valid property ( for yui-ext.js file)

[jack.slocum]

The rowIndex, colIndex parameters appear to be additions in the new version. I thought they were present in the old version but they are not.

The version will be out on Monday and has these parameters.