GridView RowClick Event

Handling the RowCommand event as RowClick

Page 1 of 1

8 Replies - 24345 Views - Last Post: 17 February 2010 - 10:31 AM Rate Topic: -----

#1 woodjom  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 29
  • View blog
  • Posts: 549
  • Joined: 08-May 08

GridView RowClick Event

Posted 11 February 2010 - 01:05 PM

I have done some research on this but have hit a brick wall where everyone is using this event to open a child-window or redirect back to itself with query string information.

What i have done so far is create an ASCX class, that builds a tiny 4 column Gridview with ID, Date, Name, and Shift as the columns and each row will have unique information and be pageable.

What i need to have done is understand how to make a Row, as a whole, clickable and process the event RowCommand, or create a custom event to process this ultimate event.

The Gridview is in the first View of a Multi-View and upon clicking the row, the users selection would be stored temporarily for a FormView to take the ID selected and fill in the appropriate fields according to the view this ID is related to.

To give you an idea of what is going on.
<asp:Content ID="Content1" ContentPlaceHolderID="cphBody" runat="server">
  <asp:MultiView ID="MultiView1" runat="server">
    <asp:View ID="vwSelDate" runat="server">
      <asp:PlaceHolder ID="phSelDate" runat="server"></asp:PlaceHolder>
    </asp:View>
    <asp:View ID="vwData" runat="server">
      <asp:PlaceHolder ID="phData" runat="server"></asp:PlaceHolder>
    </asp:View>
    <asp:View ID="vwConfirmation" runat="server">
      <asp:PlaceHolder ID="phConfirmation" runat="server"></asp:PlaceHolder>
    </asp:View>
  </asp:MultiView>
</asp:Content>


Explanation:
phSelDate - loads the SelDate.ascx control, which is of course shown first. User selects a row from the control and it stores that ID and then loads the information into the phData control.

phData - loads the DataInfo.ascx control. From here a user reviews the information that has been loaded from the SelDate control. They either Edit or Delete the information according to their purpose. The Data Info.ascs control is used for 3 different datasets. Currently this is not a problem. But getting from the SelDate view to the DataInfo view is currently the issue.

phConfirmation - will load a simple confirmation of Edit or Deletion and after a certain period of time, will refresh back to the site menu structure for the user to do whatever.

I have used something similar to this before but it was more for reporting and i used javascript to pass a querystring to a another page which opened up in a new window. i dont want a new window to open up and would like to stay away from query strings for this to operate if possible.

Is This A Good Question/Topic? 0
  • +

Replies To: GridView RowClick Event

#2 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: GridView RowClick Event

Posted 11 February 2010 - 03:31 PM

If you want to use the RowCommand event, then you need to add either a Select CommandField column or use a TemplateField with a button in it.

Lets start by providing an example. Sorry if its overkill, but I don't have time to write a simplified example because I am at work. I just grabbed this from one of my projects.

If it seems too confusing, I can create a more simplified example later today when I get home.

Here is the GridView definition from the source.
<asp:GridView ID="gvwPaymentAccts" runat="server" AutoGenerateColumns="False" Width="600px"
    OnRowDataBound="gvwPaymentAccts_RowDataBound" CellPadding="5" OnRowCommand="gvwPaymentAccts_RowCommand"
    OnRowDeleting="gvwPaymentAccts_RowDeleting" onselectedIndexChanged="gvwPaymentAccts_SelectedIndexChanged" EmptyDataText="Currently you do not have any payment accounts. If you would like to setup a new payment account then click the 'Add New Account' button.">
    <Columns>
        <asp:CommandField ButtonType="Button" SelectText="Update" ShowSelectButton="True">
            <ControlStyle CssClass="SubmitButtonS" />
        </asp:CommandField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:Button ID="btnDeleteAccount" runat="server" CausesValidation="False" Text="Delete" />
                <asp:Panel ID="pnlConfirmAccountDelete" runat="server" CssClass="modalPopUp" Style="display: none;
                    padding: 15px" Width="250px">
                    <center>
                        <asp:Label ID="lblRecurringPayment" runat="server" Font-Bold="true" Font-Size="small" ForeColor="red" Visible="false">
                            Warning: The payment account you are about to delete is currently being used for an Automatic Payment. If you delete this
                            payment account, then you will cancel any further automatic payments that use this payment account. 
                        </asp:Label><br /><br />
                        <asp:HiddenField ID="hfBillingAcct" runat="server" />
                        <asp:Label ID="lblNoStatement" runat="server" Font-Bold="True" Font-Size="Small"
                            ForeColor="Black">Are you sure you want to delete this payment account?</asp:Label>
                        <br /><br />
                        <center>
                            <font id="permMsg" runat="server" color="Red">(This change is permanent and cannot be
                                undone)</font></center>
                        <br />
                        <asp:Button ID="btnDeleteOk" runat="server" CommandName="Delete" CommandArgument="<%# Container.DataItemIndex %>" CssClass="SubmitButtonS"
                            onclick="btnDeleteOk_Click" Text="Ok" Width="65px" />
                        <asp:Button ID="btnCancelDelete" runat="server" CssClass="SubmitButtonS" Text="Cancel"
                            Width="65px" />
                    </center>
                </asp:Panel>
                <ajaxToolkit:ModalPopupExtender ID="modalPopUp" runat="server" BackgroundCssClass="modalBackground"
                    CancelControlID="btnCancelDelete" DropShadow="true" PopupControlID="pnlConfirmAccountDelete"
                    TargetControlID="btnDeleteAccount">
                </ajaxToolkit:ModalPopupExtender>
            </ItemTemplate>
            <ControlStyle CssClass="SubmitButtonS" />
        </asp:TemplateField>
        <asp:BoundField HeaderText="Account Nickname" DataField="PRNNIU" >
            <ItemStyle HorizontalAlign="center" />
        </asp:BoundField>
        <asp:BoundField HeaderText="Account Holder Name" DataField="PRNHNU" >
            <ItemStyle HorizontalAlign="center" />
        </asp:BoundField>
        <asp:BoundField HeaderText="Account Description" DataField="PRNAOU" >
            <ItemStyle HorizontalAlign="center" />
        </asp:BoundField>
        <asp:BoundField HeaderText="Account Number" DataField="PRNACU" >
            <ItemStyle HorizontalAlign="center" />
        </asp:BoundField>
    </Columns>
    <HeaderStyle BackColor="#001664" Font-Bold="True" ForeColor="White" Height="20px"
        VerticalAlign="Middle" />
    <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
    <RowStyle BackColor="White" ForeColor="Black" />
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="#EEEEEE" />
    <EmptyDataRowStyle Font-Size="Medium" ForeColor="Red" />
</asp:GridView>


And here is the RowCommand event.
    protected void gvwPaymentAccts_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName.Equals("Select"))
        {
            btnUpdateACHAccount.Visible = true;
            btnUpdateCCD.Visible = true;
            DisableEnableGrid(true);
        }
        else if (e.CommandName.Equals("Delete"))
        {
            // Get the index of the currently selected row
            int gvwRowIndex = Convert.ToInt32(e.CommandArgument);
            GridViewRow gvrPaymentAcct = (GridViewRow)gvwPaymentAccts.Rows[gvwRowIndex];
            HiddenField hfBillingAcct = (HiddenField)gvrPaymentAcct.Cells[1].FindControl("hfBillingAcct");
            int deletePaymentKey;

            //Check if this has any recurring payments scheduled
            //If so, then delete the recurring payment
            if (hfBillingAcct.Value.Contains("~"))
            {
                string[] values = hfBillingAcct.Value.Split('~');
                deletePaymentKey = Convert.ToInt32(values[0]);
                pp.DeleteRecurringPayment(userSess.UID, values[1]);
                Session.Remove("AccountNumbers");
            }
            else
                deletePaymentKey = Convert.ToInt32(hfBillingAcct.Value);

            //Delete the payment account
            pp.DeletePaymentAccount(userSess.UID, deletePaymentKey);
            BindAccounts(userSess);
        }
    }


So you will see in the GridView I've defined a Select CommandField for the first column and in the second column I have a TemplateField with another button defined in it. Both of these buttons are used in the RowCommand event to determine the flow of logic.

The GridViewCommandEventArgs has two properties that will be of importance in this event. The first is CommandName which will provide an indication of what button initiated the event. If you are only going to have one button, then you won't need to worry about it as much. But when you have multiple buttons firing this event, then you need to know which one it was.

The second property is the CommandArgument, as long as you don't overwrite the value, this will provide you with the index number of the selected row. This is great when you need to access data in the row to perform additional operations. It sounds like this might be the case for you in getting the ID.

You can see in the RowCommand event how I check what the CommandName is in order to determine the flow of logic it needs to follow. And in the ELSE IF, this is where I use the CommandArgument to get the index of the row.

Why don't you digest this a little bit and if you have any questions, feel free to ask and I will explain this in greater detail if needed.
Was This Post Helpful? 0
  • +
  • -

#3 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: GridView RowClick Event

Posted 11 February 2010 - 06:20 PM

An important item I forgot to mention is how to set the CommandName and the CommandArgument of the button in the TemplateField.

You set the CommandName to an easy identifier that you want to use for your Button in the RowCommand event. In this example, I chose 'Delete' since that is the function clicking this button will perform.

Here is that particular code from what I posted that illustrates it.
<asp:Button ID="btnDeleteOk" runat="server" CommandName="Delete"
     CommandArgument="<%# Container.DataItemIndex %>" CssClass="SubmitButtonS" 
     onclick="btnDeleteOk_Click" Text="Ok" Width="65px" />


To set the CommandArgument to the index of the row for the Button in the TemplateField. This can be completely automated. You do this in the source using an inline ASP.NET tag. You can see above where I set it using '<%# Container.DataItemIndex %>'.

You don't need to worry about setting these properties for any CommandFields, because that functionality is already built into them. I'm referring to the Select, Delete, Edit and Insert CommandField column of the GridView.
Was This Post Helpful? 0
  • +
  • -

#4 woodjom  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 29
  • View blog
  • Posts: 549
  • Joined: 08-May 08

Re: GridView RowClick Event

Posted 16 February 2010 - 11:11 AM

This solution you gave is CommandField oriented. I need it to be a simple Row select event without a CommandField (ie Button object).

Was trying to make this solution without having adding a javascript scriptlet in vb code.
Was This Post Helpful? 0
  • +
  • -

#5 woodjom  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 29
  • View blog
  • Posts: 549
  • Joined: 08-May 08

Re: GridView RowClick Event

Posted 16 February 2010 - 11:24 AM

here is a picture of the design i am looking at translating

Attached Image

Here you will see 3 columns (date, product, shift). In its current implementation each row produces, basically, a link object for each data in the columns. This link object refers to the specific ID that it needs for the reporting. Catch is that even though the row roll-over highlights the row, you have to roll-over the data to get the link to work.

What i am looking to do is use the row roll-over highlight feature to also enable the row to be its own linking object so the user does not have to actually click on the data text in the row to get the report to produce. They can just mouse over the row and click the row if they want that data to be reported.
Was This Post Helpful? 0
  • +
  • -

#6 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: GridView RowClick Event

Posted 16 February 2010 - 09:08 PM

Sorry, I just gave you an answer that met the conditions of your request. You didn't specify what clickable meant to you. A button clicks. :)

Which .NET framework are you targeting?

Are you using an Ajax enabled web site?
Was This Post Helpful? 0
  • +
  • -

#7 woodjom  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 29
  • View blog
  • Posts: 549
  • Joined: 08-May 08

Re: GridView RowClick Event

Posted 17 February 2010 - 06:53 AM

Ajax: 3.0.30930
.Net 3.5 is what i am using, but pretty much only using 2.0 controls. Not using any of the 3.0 or 3.5 framework addons intentionally.

using the UpdatePanel in the Header section of the Master page, and so thats where the toolkit is located for each of the pages.
Was This Post Helpful? 0
  • +
  • -

#8 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: GridView RowClick Event

Posted 17 February 2010 - 10:14 AM

Now we are getting somewhere.

Enable PageMethods in your ScriptManager.

Create a static method that will take as parameters the objects that the RowCommand event will need in order for it to function correctly. Set these parameters in the call to your static method when the row is DataBound.

From the client side you can now use the PageMethods to call your static method, meaning you can now use the OnClientClick. You will need to set the OnClientClick from the code behind when the row is DataBound, using the Attributes property.

http://www.dotnetfun...spnet-ajax.aspx

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#9 woodjom  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 29
  • View blog
  • Posts: 549
  • Joined: 08-May 08

Re: GridView RowClick Event

Posted 17 February 2010 - 10:31 AM

Ill give it a whirl...see what i can get done. Let you know what i can or can not get done with it.

As this is a control, i am hoping it will instantiate well ;) Shouldnt be a problem as i use the new isntantiation but i dont hold my breath for anything.

This post has been edited by woodjom: 17 February 2010 - 10:34 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1