Add image to grid cells - Sigma Ajax data grid control sample

Image in cells

Web application should and could be colorful. Sigma grid allows developers to place photos or pictures in any cells. The following demo shows nation flags in the country column.

Developers have two steps to place photos into grid cells. Firstly, developers need to declare a column renderer to tell grid where to get those photos or pictures.

function my_renderer(value ,record,columnObj,grid,colNo,rowNo){ var no= record[columnObj.fieldIndex]; return "<img src=\"./images/flag_" + no.toLowerCase() + ".gif\">"; }

Secondly, developers need to relate country column with the renderer.

{id: 'country' , header: "Country" , width :40, renderer:my_renderer}

The renderer is an instant renderer. That means photos will change immediately if the cell value is modified by end user. In the following demo, click one cell in country column, change cell value to US, FR or BR, and see what happens.

Product - Sigma Grid 2.2 - Sample

Image in cells

Related Links