Hi,

I am trying to add a couple icon-sized image buttons into the first three columns of my data grid to 1) view the associated attachment in a new window, 2) delete the row, and 3) edit the row.  I added the header values for these three columns, with the correct images as the header "caption":

<bands>

<igtbl:UltraGridBand>

<Columns>

<igtbl:UltraGridColumn AllowGroupBy="No" Key="View" Width="16px">

<HeaderStyle Cursor="Default" Width="16px">

<Margin Bottom="0px" Left="0px" Right="0px" Top="0px" />

<Padding Bottom="0px" Left="0px" Right="0px" Top="0px" />

</HeaderStyle>

<CellStyle Cursor="Default" Height="16px"

HorizontalAlign="Center" Width="16px">

<Margin Bottom="0px" Left="0px" Right="0px" Top="0px" />

<Padding Bottom="0px" Left="0px" Right="0px" Top="0px" />

</CellStyle>

<Header Key="View">

<Image Url="~/ig_res/Default/images/attachments.gif" AlternateText="View" />

</Header>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn AllowGroupBy="No" Key="Delete" Width="16px">

<HeaderStyle Cursor="Default" Width="16px">

<Margin Bottom="0px" Left="0px" Right="0px" Top="0px" />

<Padding Bottom="0px" Left="0px" Right="0px" Top="0px" />

</HeaderStyle>

<CellStyle Cursor="Default" Height="16px"

HorizontalAlign="Center" Width="16px">

<Margin Bottom="0px" Left="0px" Right="0px" Top="0px" />

<Padding Bottom="0px" Left="0px" Right="0px" Top="0px" />

</CellStyle>

<Header Key="Delete">

<Image Url="~/ig_res/Default/images/delete.gif" AlternateText="Delete" />

<RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo>

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo>

</Footer>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn AllowGroupBy="No" Key="Edit" Width="16px">

<HeaderStyle Cursor="Default" Width="16px">

<Margin Bottom="0px" Left="0px" Right="0px" Top="0px" />

<Padding Bottom="0px" Left="0px" Right="0px" Top="0px" />

</HeaderStyle>

<CellStyle Cursor="Default" Height="16px"

HorizontalAlign="Center" Width="16px">

<Margin Bottom="0px" Left="0px" Right="0px" Top="0px" />

<Padding Bottom="0px" Left="0px" Right="0px" Top="0px" />

</CellStyle>

<Header Key="Edit">

<Image Url="~/ig_res/Default/images/edit.gif" AlternateText="Edit" />

<RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo>

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo>

</Footer>

</igtbl:UltraGridColumn>

</Columns>

<addnewrow view="NotSet" visible="NotSet">

</addnewrow>

</igtbl:UltraGridBand>

I also found code to dynamically modify the cells values and style based on the contents of another cell in each row, which allows me to show the Edit and Delete indicators for rows that the user owns:

protected void ugAttachments_InitializeRow(object sender, Infragistics.WebUI.UltraWebGrid.RowEventArgs e)

{

e.Row.Cells.FromKey("View").Value = "X";

switch (e.Row.Cells.FromKey("Editable").Value.ToString())

{

case "1": // Editable

e.Row.Cells.FromKey("Delete").Value = "X";

e.Row.Cells.FromKey("Edit").Value = "X";

break;

case "0": // Not Editable

e.Row.Cells.FromKey("Delete").Value = "";

e.Row.Cells.FromKey("Edit").Value = "";

break;

}

}

I tried setting the background to the image I wanted if the user was allowed to Edit/Delete the row, but it would tile the image in the background, which looked like crap.  I really want to replace my .Value="X" in the above code to insert the appropriate image.

Does anybody know how to do this?

Thanks,

Mark