gridview with custom select button

One of our new members "Gurvinder Suman" asked me how to create a custom select button for gridview in order to display details in the detailsview. Here is the answer:

When you click the smart tag of the gridview and enable selection, it creates a linkbutton by default and writes select as text for that button.

Default.aspx :

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString1 %>"
            SelectCommand="SELECT Sales.Customer.* FROM Sales.Customer"></asp:SqlDataSource>
    
    </div>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString1 %>"
            SelectCommand="SELECT CustomerID, AddressID, AddressTypeID, rowguid, ModifiedDate FROM Sales.CustomerAddress WHERE (CustomerID = @PARAM1)">
            <SelectParameters>
                <asp:ControlParameter ControlID="GridView1" Name="PARAM1" PropertyName="SelectedValue" />
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
            DataKeyNames="CustomerID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:CommandField ShowSelectButton="True" />
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" InsertVisible="False"
                    ReadOnly="True" SortExpression="CustomerID" />
                <asp:BoundField DataField="TerritoryID" HeaderText="TerritoryID" SortExpression="TerritoryID" />
                <asp:BoundField DataField="AccountNumber" HeaderText="AccountNumber" ReadOnly="True"
                    SortExpression="AccountNumber" />
                <asp:BoundField DataField="CustomerType" HeaderText="CustomerType" SortExpression="CustomerType" />
                <asp:BoundField DataField="rowguid" HeaderText="rowguid" SortExpression="rowguid" />
                <asp:BoundField DataField="ModifiedDate" HeaderText="ModifiedDate" SortExpression="ModifiedDate" />
            </Columns>
        </asp:GridView>
        <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="CustomerID,AddressID"
            DataSourceID="SqlDataSource2" Height="50px" Width="125px">
            <Fields>
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
                <asp:BoundField DataField="AddressID" HeaderText="AddressID" ReadOnly="True" SortExpression="AddressID" />
                <asp:BoundField DataField="AddressTypeID" HeaderText="AddressTypeID" SortExpression="AddressTypeID" />
                <asp:BoundField DataField="rowguid" HeaderText="rowguid" SortExpression="rowguid" />
                <asp:BoundField DataField="ModifiedDate" HeaderText="ModifiedDate" SortExpression="ModifiedDate" />
            </Fields>
        </asp:DetailsView>
    </form>
</body>
</html>

Now to do the same thing with custom select button, i click on the smart tag again and deselect "enable selection" checkbox. And i clicked "edit columns". I added a button field, and set its commandName attribute to "Select". That is all there is to do it.

new Default.aspx :

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString1 %>"
            SelectCommand="SELECT Sales.Customer.* FROM Sales.Customer"></asp:SqlDataSource>
    
    </div>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString1 %>"
            SelectCommand="SELECT CustomerID, AddressID, AddressTypeID, rowguid, ModifiedDate FROM Sales.CustomerAddress WHERE (CustomerID = @PARAM1)">
            <SelectParameters>
                <asp:ControlParameter ControlID="GridView1" Name="PARAM1" PropertyName="SelectedValue" />
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
            DataKeyNames="CustomerID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" InsertVisible="False"
                    ReadOnly="True" SortExpression="CustomerID" />
                <asp:BoundField DataField="TerritoryID" HeaderText="TerritoryID" SortExpression="TerritoryID" />
                <asp:BoundField DataField="AccountNumber" HeaderText="AccountNumber" ReadOnly="True"
                    SortExpression="AccountNumber" />
                <asp:BoundField DataField="CustomerType" HeaderText="CustomerType" SortExpression="CustomerType" />
                <asp:BoundField DataField="rowguid" HeaderText="rowguid" SortExpression="rowguid" />
                <asp:BoundField DataField="ModifiedDate" HeaderText="ModifiedDate" SortExpression="ModifiedDate" />
                <asp:ButtonField CommandName="Select" Text="custom select" />
            </Columns>
        </asp:GridView>
        <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="CustomerID,AddressID"
            DataSourceID="SqlDataSource2" Height="50px" Width="125px">
            <Fields>
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
                <asp:BoundField DataField="AddressID" HeaderText="AddressID" ReadOnly="True" SortExpression="AddressID" />
                <asp:BoundField DataField="AddressTypeID" HeaderText="AddressTypeID" SortExpression="AddressTypeID" />
                <asp:BoundField DataField="rowguid" HeaderText="rowguid" SortExpression="rowguid" />
                <asp:BoundField DataField="ModifiedDate" HeaderText="ModifiedDate" SortExpression="ModifiedDate" />
            </Fields>
        </asp:DetailsView>
    </form>
</body>
</html>

In this example i used adventureworks database, which is recommended sample database from microsoft. i used one gridview to display customers and one detailsview to display customer address. this example does not require any c# code, it works using markups in the .aspx page.

serkan sendur

Postaholic

Banned

2,062 posts since Jan 2008

Reputation Points: 854

Solved Threads: 127

gridview with custom select button

This question has already been solved