I recently posted a problem related to Template Columns and how to access row data in a webimagebutton command argument. I also came across another problem in the application I am building where I had a grid with a set of buttons: Edit, Archive, and Delete. The Archive and Delete actions did not actually remove the record, but just changed a status in the database. We were initially using a grid click event, but this approach is annoying, because it results in a postback for any cell click in the grid. I only wanted a postback action for the three button columns, but I also needed the actions and image for each column button to be controllable by me at the row level. It took me a while to figure it out, but I wanted to post the solution for other developers who might be facing the same problem.
First the grid. I needed three template columns; one for each of the button actions (Edit, Delete, and Archive). So I added three columns to my grid like so:
<igtbl:TemplatedColumn Key="tcEdit" AllowRowFiltering="false" Width="25px">
<CellTemplate>
<igtxt:WebImageButton ID="btnEdit" runat="server" CommandArgument="<%# Container.Cell.Row.Index%>"
CssClass="pointer" OnCommand="btnEdit_Command" ToolTip="Edit this record">
<Appearance>
<Image Url="~/Image/icon/ico_edit.gif" />
</Appearance>
</igtxt:WebImageButton>
</igtbl:TemplatedColumn>
<igtbl:TemplatedColumn Key="tcDelete" AllowRowFiltering="false" Width="25px">
<igtxt:WebImageButton ID="btnDelete" runat="server" CommandArgument="<%# Container.Cell.Row.Index%>"
CssClass="pointer" OnCommand="btnDelete_Command" ToolTip="Delete this record">
<Image Url="~/Image/icon/ico_delete.gif" />
<igtbl:TemplatedColumn Key="tcArchive" AllowRowFiltering="false" Width="25px">
<igtxt:WebImageButton ID="btnArchive" runat="server" CommandArgument="<%# Container.Cell.Row.Index%>"
CssClass="pointer" OnCommand="btnArchive_Command" ToolTip="Archive this record">
<Image Url="~/Image/icon/ico_archive.gif" />
In the code behind, I needed to be able to control the display of the images and Enable / Disable the button command event depending on the condition of the row. The initial status of each of the template columns was to allow the command action, so I only needed to override the button command if the state was something other than open.
I created a method to iterate through a dataset to populate the grid.
{
currentRow = this.UltraWebGrid1.Rows;
//First I create an instance of each button in code.
CellItem EditItem = (CellItem)tcEdit.CellItems;
TemplatedColumn tcDelete = (TemplatedColumn)currentRow.Cells.FromKey("tcDelete").Column;
WebImageButton btnDelete = ((WebImageButton)DeleteItem.FindControl("btnDelete"));
CellItem ArchiveItem = (CellItem)tcArchive.CellItems;
WebImageButton btnArchive = ((WebImageButton)ArchiveItem.FindControl("btnArchive"));
//Then I filter on conditions to determine which buttons on which rows to override.
CanArchive = false;
btnEdit.Appearance.Image.Url = "~/Image/icon/ico_locked.gif";
btnEdit.ToolTip = "This record is frozen and can't be edited, archived, or deleted";
btnDelete.Appearance.Image.Url = "~/Image/icon/ico_locked.gif";
btnDelete.ToolTip = "This record is frozen and can't be edited, archived, or deleted";
btnArchive.Appearance.Image.Url = "~/Image/icon/ico_locked.gif";
}
else
btnEdit.Appearance.Image.Url = "~/Image/icon/ico_edit_disabled.gif";
btnEdit.ToolTip = "This record can't be edited";
btnDelete.Appearance.Image.Url = "~/Image/icon/ico_delete_disabled.gif";
btnDelete.ToolTip = "This record can't be deleted";
btnArchive.Appearance.Image.Url = "~/Image/icon/ico_archive_disabled.gif";
btnDelete.Attributes.CssStyle.Value = "nopointer";
I didn't post a fully working example, but I wanted to post the general idea. From this code sample it should be fairly straight forward how to manipulate the WebImageButtons to perform the appropriate action, or perform no action based on the condition.
Hello Jim,
Thank you for sharing this with the community.
I am sure that other developers who are facing the same issue
will be glad to use the provided by you solution.