devexpress-examples / asp-net-web-forms-grid-handle-rowclick-and-rowdblclick-events Goto Github PK

View Code? Open in Web Editor NEW

Handle the grid's client-side RowClick and RowDblClick events to perform custom operations on single and double row clicks.

License: Other

C# 21.43% ASP.NET 56.79% Visual Basic .NET 21.78%

asp-net-web-forms-grid-handle-rowclick-and-rowdblclick-events's Introduction

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:

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>

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}.`);
}