I am trying to add an Image to a cell in the WebGrid using javascript. The image does not show up.
Here is my code snippet:
var grid = igtbl_getGridById(gridid); var rowCount = grid.Rows.length; var i = 0; if(rowCount > 0) { for( i = 0; i < rowCount; i++ ) { if(grid.Rows.getRow(i).getCellFromKey("data").getValue() == strData) { grid.Rows.getRow(i).getCellFromKey("Img").BackgroundImage = "../images/warning.gif"; grid.Rows.getRow(i).getCellFromKey("Img").CssClass="warningOnGrid"; } } }
Hello,
There is no clientside method off of the cell object that will handle adding of images. So, we must dig into the cells element (TD) in order to change it. Here is a code snippet.
grid.Rows.getRow(i).getCellFromKey("Img").Element.style.backgroundImage = "url(./ig_home_d.gif)";
or:
grid.Rows.getRow(i).getCellFromKey("Img").Element.innerHTML= "<img src='./ig_home_d.gif'/>)";
The first will set the actual backgroundImage property of the Style object. The second will actually replace the html for the cell. The first will still display text from the cell and the second will not. It all depends on what you want to do. Hope this helps.
Infragistics
You will probably also want to set
Element.style.backgroundRepeat = "no-repeat";Element.style.backgroundPosition = "center center";
Moved to WebGrid forum.