Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
270
TemplateColumn with row level editability
posted

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>

</CellTemplate>

</igtbl:TemplatedColumn>

<igtbl:TemplatedColumn Key="tcDelete" AllowRowFiltering="false" Width="25px">

<CellTemplate>

<igtxt:WebImageButton ID="btnDelete" runat="server" CommandArgument="<%# Container.Cell.Row.Index%>"

CssClass="pointer" OnCommand="btnDelete_Command" ToolTip="Delete this record">

<Appearance>

<Image Url="~/Image/icon/ico_delete.gif" />

</Appearance>

</igtxt:WebImageButton>

</CellTemplate>

</igtbl:TemplatedColumn>

<igtbl:TemplatedColumn Key="tcArchive" AllowRowFiltering="false" Width="25px">

<CellTemplate>

<igtxt:WebImageButton ID="btnArchive" runat="server" CommandArgument="<%# Container.Cell.Row.Index%>"

CssClass="pointer" OnCommand="btnArchive_Command" ToolTip="Archive this record">

<Appearance>

<Image Url="~/Image/icon/ico_archive.gif" />

</Appearance>

</igtxt:WebImageButton>

</CellTemplate>

</igtbl:TemplatedColumn>

 

 

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. 

 

 for (int i = 0; i < UltraWebGrid1.Rows.Count; i++)

{

currentRow = this.UltraWebGrid1.RowsIdea;

//First I create an instance of each button in code. 

TemplatedColumn tcEdit = (TemplatedColumn)currentRow.Cells.FromKey("tcEdit").Column;

CellItem EditItem = (CellItem)tcEdit.CellItemsIdea;

WebImageButton btnEdit = ((WebImageButton)EditItem.FindControl("btnEdit"));

TemplatedColumn tcDelete = (TemplatedColumn)currentRow.Cells.FromKey("tcDelete").Column;

CellItem DeleteItem = (CellItem)tcDelete.CellItemsIdea;

WebImageButton btnDelete = ((WebImageButton)DeleteItem.FindControl("btnDelete"));

TemplatedColumn tcArchive = (TemplatedColumn)currentRow.Cells.FromKey("tcArchive").Column;

CellItem ArchiveItem = (CellItem)tcArchive.CellItemsIdea;

WebImageButton btnArchive = ((WebImageButton)ArchiveItem.FindControl("btnArchive"));

 

//Then I filter on conditions to determine which buttons on which rows to override. 

if
(OrderNum.ToUpper().Trim() == "XXXX")

{

CanEdit =
false;

CanArchive = false;

CanDelete = false;

 

btnEdit.Enabled =
false;

btnEdit.Appearance.Image.Url = "~/Image/icon/ico_locked.gif";

btnEdit.Attributes.CssStyle.Value = "nopointer";

btnEdit.ToolTip = "This record is frozen and can't be edited, archived, or deleted";

btnDelete.Enabled = false;

btnDelete.Appearance.Image.Url = "~/Image/icon/ico_locked.gif";

btnDelete.Attributes.CssStyle.Value = "nopointer";

btnDelete.ToolTip = "This record is frozen and can't be edited, archived, or deleted";

btnArchive.Enabled = false;

btnArchive.Appearance.Image.Url = "~/Image/icon/ico_locked.gif";

btnArchive.Attributes.CssStyle .Value = "nopointer";btnArchive.ToolTip = "Thisrecord is frozen and can't be edited, archived, or deleted";

}

else

{

if (Status.ToUpper() == "UNKNOWN")

{

btnEdit.Enabled =
false;

btnEdit.Appearance.Image.Url = "~/Image/icon/ico_edit_disabled.gif";

btnEdit.Attributes.CssStyle.Value = "nopointer";

btnEdit.ToolTip = "This record can't be edited";

btnDelete.Enabled = false;

btnDelete.Appearance.Image.Url = "~/Image/icon/ico_delete_disabled.gif";

btnDelete.Attributes.CssStyle.Value = "nopointer";

btnDelete.ToolTip = "This record can't be deleted";

btnArchive.Enabled = false;

btnArchive.Appearance.Image.Url = "~/Image/icon/ico_archive_disabled.gif";

btnArchive.Attributes.CssStyle.Value = "nopointer";btnArchive.ToolTip = "This record can't be archived";

}

else

{

if (!CanEdit)

{

btnEdit.Enabled =
false;

btnEdit.Appearance.Image.Url = "~/Image/icon/ico_edit_disabled.gif";

btnEdit.Attributes.CssStyle.Value = "nopointer";

btnEdit.ToolTip = "This record can't be edited";

if (Status.ToUpper() == "ARCHIVED")

{

btnEdit.Enabled =
false;

btnEdit.Appearance.Image.Url = "~/Image/icon/ico_edit_disabled.gif";

btnEdit.Attributes.CssStyle.Value = "nopointer";btnEdit.ToolTip = "This record is not editable because it has been archived";

}

else

{

btnEdit.Enabled =
false;

btnEdit.Appearance.Image.Url = "~/Image/icon/ico_edit_disabled.gif";

btnEdit.Attributes.CssStyle.Value = "nopointer";btnEdit.ToolTip = "This record is not editable because it has been deleted";

}

}

if (!CanArchive)

{

if (Status.ToUpper() == "DELETED")

{

btnArchive.Enabled =
false;

btnArchive.Appearance.Image.Url = "~/Image/icon/ico_archive_disabled.gif";

btnArchive.Attributes.CssStyle.Value = "nopointer";btnArchive.ToolTip = "This record has been deleted";

}

else

{

btnArchive.Appearance.Image.Url =
"~/Image/icon/ico_restore.gif";btnArchive.ToolTip = "Restore this archived record";

}

}

if (!CanDelete)

{

if (Status.ToUpper() == "ARCHIVED")

{

btnDelete.Enabled =
false;

btnDelete.Appearance.Image.Url = "~/Image/icon/ico_delete_disabled.gif";

btnDelete.Attributes.CssStyle.Value = "nopointer";btnDelete.ToolTip = "This record has been archived";

}

else

{

btnDelete.Appearance.Image.Url =
"~/Image/icon/ico_restore.gif";

btnDelete.Attributes.CssStyle.Value = "nopointer";

btnDelete.ToolTip = "Restore this deleted record";

}

}

}

}

 

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.