Selecting a Row in ASPxGridView

I found that with the flood of new possibilities with DevExpress grid view a simple functionality of selecting one row is bit hidden. After doing bit of searching in the internet I found the way and thought to share it.

The way we need to do this is by using a java script and bind that in to the RowClick event of the grid.

The java script will look like the following.

<script type="text/javascript">
        function OnRowClick(e) {
            //Unselect all rows
            dxgdSearch._selectAllRowsOnPage(false);
            //Select the row
            dxgdSearch.SelectRow(e.visibleIndex, true);
        }
</script>

Then the binding to the RowClick would be as below.

<ClientSideEvents RowClick="function(s, e) { OnRowClick(e); }"></ClientSideEvents>

The outcome of this is a grid which you can select a row.

The value of the selected row can be taken as below.

dxgdSearch.GetRowValues(dxgdSearch.FocusedRowIndex, "Customer_ID")

For example in my application I used to pass the Customer Id to the Customer.aspx form as below.

 

 

1. Response.Redirect("~/Customer.aspx?cusID= " + dxgdSearch.GetRowValues(dxgdSearch.FocusedRowIndex, "Customer_ID"));
2. 
   

 

The full source is as of below.

Page.aspx

 

 

1. <asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
2.     <script type="text/javascript">
3.         function OnRowClick(e) {
4.             //Unselect all rows
5.             dxgdSearch._selectAllRowsOnPage(false);
6.             //Select the row
7.             dxgdSearch.SelectRow(e.visibleIndex, true);
8.         }
9.     </script>
10.     <dx:ASPxGridView ID="dxgdSearch" ClientInstanceName="dxgdSearch" runat="server" AutoGenerateColumns="False"
11.         SettingsBehavior-AllowFocusedRow="True" SettingsBehavior-AllowMultiSelection="False">
12.         <ClientSideEvents RowClick="function(s, e) { OnRowClick(e); }"></ClientSideEvents>
13.         <Columns>
14.             <dx:GridViewDataTextColumn Name="Id" ShowInCustomizationForm="True" VisibleIndex="1"
15.                 Caption="Customer ID" FieldName="Customer_ID" Visible="False">
16.             </dx:GridViewDataTextColumn>
17.             <dx:GridViewDataTextColumn Name="Name" ShowInCustomizationForm="True" VisibleIndex="0"
18.                 Caption="Name" FieldName="Full_Name">
19.             </dx:GridViewDataTextColumn>
20.             <dx:GridViewDataTextColumn Name="TelephoneNo" ShowInCustomizationForm="True" VisibleIndex="1"
21.                 Caption="Tele. No." FieldName="Mobile_Number">
22.             </dx:GridViewDataTextColumn>
23.             <dx:GridViewDataTextColumn Name="EMail" ShowInCustomizationForm="True" VisibleIndex="2"
24.                 Caption="EMail" FieldName="Email">
25.             </dx:GridViewDataTextColumn>
26.             <dx:GridViewDataHyperLinkColumn Name="Select" VisibleIndex="3">
27.                 <DataItemTemplate>
28.                     <asp:Button ID="Button1" runat="server" CommandArgument='<%# Eval("Customer_ID") %>'
29.                         OnClick="Button1_Click" Text="Edit" />
30.                 </DataItemTemplate>
31.             </dx:GridViewDataHyperLinkColumn>
32.         </Columns>
33.         <SettingsBehavior AllowFocusedRow="True"></SettingsBehavior>
34.         <Settings ShowGroupPanel="True" ShowFilterRow="True" />
35.         <Settings ShowFilterRow="True" ShowGroupPanel="True"></Settings>
36.     </dx:ASPxGridView>
37. </asp:Content>
38. 
    

Page.aspx.cs

 

 

1. protected void Button1_Click(object sender, EventArgs e)
2. {
3.     Response.Redirect("~/Customer.aspx?cusID= " + dxgdSearch.GetRowValues(dxgdSearch.FocusedRowIndex, "Customer_ID"));
4. }
5.