Grid View for ASP.NET Web Forms - How to use both the RowClick and RowDoubleClick events.

This example demonstrates how to handle the grid's client-side RowClick and RowDblClick events to perform custom operations on single and double row clicks.

Overview

Follow the steps below:

1. Create the Grid View control, populate it with columns, and bind the control to a data source. Set the grid's AllowFocusedRow property to true to enable row focus and use the GridViewStyles.FocusedRow property to specify the appearance of the focused row.

   <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" KeyFieldName="CategoryID"
       DataSourceID="AccessDataSource1">
       <Columns>
           <dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0">
               <EditFormSettings Visible="False" />
           </dx:GridViewDataTextColumn>
           <dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1" />
           <dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2" />
       </Columns>
       <SettingsBehavior AllowFocusedRow="True" />
       <Styles>
           <FocusedRow BackColor="#C0FFC0" ForeColor="Black" />
       </Styles>
   </dx:ASPxGridView>
   <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
       SelectCommand="SELECT * FROM [Categories]">
   </asp:AccessDataSource>

2. Add a flag variable and create the ProcessClick function that the grid executes based on the flag variable value. Handle the grid's client-side RowClick and RowDblClick events. In the RowClick event handler, call the setTimeout method to set a timer for the ProcessClick function.

   var doProcessClick;
   var index;
   function ProcessClick() {
       if (doProcessClick) {
           alert(`Here is the RowClick action in the ${index.toString()} row.`);
       }
   }
   function OnRowClick(s, e) {
       doProcessClick = true;
       index = e.visibleIndex + 1;
       window.setTimeout(ProcessClick, 500);
   }
   
   function OnRowDblClick(s, e) {
       doProcessClick = false;
       var key = s.GetRowKey(e.visibleIndex);
       alert(`Here is the RowDoubleClick action in the row with the key = ${key}.`);
   }

Files to Review

• Default.aspx (VB: Default.aspx)

Documentation

• RowClick
• RowDblClick

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)