I am attempting to insert an html image into a column. As I add rows, I initially insert the code into the column server side, and the image shows correctly.
Within the grid the user has the ability to move rows up and down the grid to reorder the items, when an item is moved, I need to change the value of the cells displaying the images. When I do so, the image is no longer displayed, and now I see the HTML for the image as a string.
What am I doing wrong?
cell.setValue('<img src="../images/arrow_up.gif" mce_src="../images/arrow_up.gif">');
and here is the column
<igtbl:UltraGridColumn BaseColumnName="Up/Down" Key="Up/Down" Type="Custom" Width="30px"><Header><RowLayoutColumnInfo OriginX="4" /></Header><Footer><RowLayoutColumnInfo OriginX="4" /></Footer></igtbl:UltraGridColumn>
**EDIT** If I force a postback after I change the value, the images do display. But I am trying to avoid posting back, that is why I am doing this on the client side.
Thanks
This is possible to accomplish without a postback. I've done it before, but I don't have an example in front of me - since I'm going entirely from memory, I may be missing one or more details.
First, you want to use the cell's setValue() function exactly as you're already doing. This will ensure that the value of the cell is set correctly, both for immediate use and after any postback is raised. Since the value will be correct on the server, subsequent postbacks will appear correctly, as you've already noticed.
On the line after you use the cell's setValue() function, you need to also set the cell's inner HTML. This isn't a documented procedure because it is exposed by the Document Object Model (DOM) for an HTML table cell (TD), not specifically by a WebGrid cell. If memory serves, the following code is what you want:
cell.Element.innerHTML = '<img src="../images/arrow_up.gif" mce_src="../images/arrow_up.gif">';
This will affect the appearance of the cell, but won't impact the cell's value. The result is that your image should display for immediate use - though this won't affect the cell's appearance after you cause a postback - which is why you used setValue() as well.
If you set the innerHTML first and call setValue() after, then setValue() will clobber your manual changes, which is why you need to do setValue() first.
Please let us know if this works.
On initial test it appears to be working
what is the mce_src, i have never seen that used before.
Thanks!