Dispaly a Picture in Grid Cell

Today I have come across different ways were I can handle the grid and display the image of it in a cell as I am free with such things scrolled in my mind so like this firstly

This topic assumes you have a bound grid with at least one row of data.

You must set the Background Image property of the cell's Style object to a URL of an image.  You also should set the CustomRules property of the Style object as well so that the image is not repeated within the cell area of the browser.

Place the above snippets into the InitializeRow event of the Ultra Web Grid.

e.Row.Cells.FromKey("ImageCol").Style.CustomRules = "Background-repeat:no-repeat"

e.Row.Cells.FromKey("ImageCol").Style.BackgroundImage = "mages/landscape.jpg"

This is for Initializing the row and Updating the rows

Two scenarios which you may want to change the color of a cell could be when the cell is displayed initially, as well as after the user changes the contents of the cell.

If you want the BackColor of the cell to be changed only after a user modifies the cell's contents on the client, you can use the AfterCellUpdateHandler of the Client-SideEvents object of UltraWebGrid. Create a JavaScript function as follows and set the function name to "AfterCellUpdate" in the ClientSideEvents property at design time.

In JavaScript:
    function AfterCellUpdate(tableName, itemName)


         var cell = igtbl_getElementById(itemName);

         if(cell.innerHTML == "Test")


              cell.runtimeStyle.backgroundColor = "Red";

              cell.style.backgroundColor = "Red";


          else {

                     cell.runtimeStyle.backgroundColor = "Green";

                     cell.style.backgroundColor = "Green"; return 0;




Be sure to declare the JavaScript function with the two parameters indicated above.

The changed color values will not be updated to the server side, so they will not persist if the page is submitted back to the server and re-rendered.

If you want the back color of the cell to be set depending on it's value when the grid initially loads, you can use the InitializeRow event of the UltraGrid.

In Visual Basic:

If e.Row.Cells.FromKey("Subject").Value = "Test" Then

e.Row.Cells.FromKey("Subject").Style.BackColor = System.Drawing.Color.Red

End If