Hi DotNetSlackers,

I was wondering if anyone knew how to dynamically append an event handler/function to a specific GridViewRow's "delete" command and have it execute after the "delete" command executes.  I apologize if how I'm wording this is confusing people, but I'll try to explain as best as I can.

Let's assume that you have a GridView with the following structure:

<ajax:GridView id="gridView" runat="server" DeleteCommandEvent="onDeleteCommand">
   <Columns>
      <ajax:GridViewCommandColumn ButtonType="Link" ShowDeleteButton="true"/>
      <ajax:GridViewBoundColumn HeaderText="Test Val 1" DataField="FirstItem"/>
      <ajax:GridViewBoundColumn HeaderText="Test Val 2" DataField="SecondItem"/>
   </Columns>
</ajax:GridView>

When populated, it has, say, 5 rows of data.  I would like to append another event handler/function to a specific row's "OnDeleteCommand".  It could be any row, but for this example, let's append the event to the 3rd row's delete command.  Would there be any way that the AjaxDataControls framework would allow me to do this?

One alternative I've thought of to achieve this means is to have a "GridViewTemplateColumn" instead of a "GridViewCommandColumn" and place an image inside of the templated column.  During the GridView's onRowDataBind event, I could grab that image and set the "onDeleteCommand" to the image's "onclick" event, as well as append other functions/event handlers.  General idea below:

<ajax:GridView id="gridView" runat="server">
   <Columns>
      <ajax:GridViewTemplateColumn>
         <ItemTemplate>
            <img id="imgDelete" src="/Images/delete.gif" />
         </ItemTemplate>
      </ajax:GridViewTemplateColumn>
      <ajax:GridViewBoundColumn HeaderText="Test Val 1" DataField="FirstItem"/>
      <ajax:GridViewBoundColumn HeaderText="Test Val 2" DataField="SecondItem"/>
   </Columns>
</ajax:GridView>

<script>
var _gridView;

function pageLoad()
{
   _gridView = $find('<%= gridView.ClientID %>');
   _gridView.add_rowDataBound(onDataBound);
}

function onDataBound(sender, e)
{
   var row = e.get_row();
   var imgDelete = row.findControl('imgDelete');

   imgDelete.attachEvent('onclick',
                         function(){
                            onDeleteCommand(this, row.get_index());
                         });
 
   if (/*certain conditions are met*/)
   {
      imgDelete.attachEvent('onclick',
                             function(){
                                someEvent(/*pass in parameters here*/)
                             });
   }
}

function onDeleteCommand(sender, rowIndex){/*handles row deletion*/}

function someEvent(/*function parameters */){/*does something*/}
</script>

Would anyone have any insight as to how to go about this?  Any information would be most appreciated.

I think you are on the right track with your idea. At least that is the way I would do it unless Kazi can recommend a better one.  

Certainly you can do it as above, but instead use the Ajax $addHandler statement instead of attachEvent. There is also one more column type ButtonColum. The Command event are only fired if the  button has a associated commandName in case of Button and Command column there is always a command name attached. You can also filter out the click on the row command event of the GridView. Check the following example how to handle the command event.
http://dotnetslackers.com/projects/AjaxDataControls/GridView/DifferentColumns.aspx

Thanks for the reply you two.

Kazi, thanks for telling me about the $addHandler function.  Looking at the js code for it, it absolves me from having to write the cross-browser compatibility code for adding event handlers.  As for using the other column, I don't think that what I'm trying to do would work for the ButtonColumn or the CommandColumn.  Trying to append another handler to the onclick event would be a little difficult using those columns since accessing the button/link/image to append the function to would be fairly tricky; unless you know of a way to do so without hacking the GridView.js code.

In any case, I tried my idea and had mixed results.  It worked almost exactly as I thought it would, however, since I rebind the GridView immediately after the events execute, my appended function(s) gets removed from the targeted button/link/image since the whole grid is cleared out and re-rendered.  Oh well, back to the drawing board...

You do not have to do anything special to fire the command event. Just supply the command name for that column and the commandArument will contain the index of that row, for ex:

<AjaxData:GridViewButtonColumn ButtonType="Link" CommandName="ShowInfo" HeaderText="Company" DataTextField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"/>

function onRowCommand(sender, e)
        {
            if (e.get_commandName() == 'ShowInfo')
            {
                if (e.get_commandArgument() == 1) // Here Index is 1
                {
                     // Do Something
                }
            }
        }

Or You can stick to the template column which you are currently doing. In that case make sure you attach the event in the rowCreate/rowDataBound event.