Showing posts with label DevExpress. Show all posts
Showing posts with label DevExpress. Show all posts

Friday, June 11, 2010

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"));


 

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>


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. }