C# Ajax GridView Select in ASP.Net

by top54u.com 03 May, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX | Gridview Control

GridView Select Multiple Rows using C# ASP.Net AJAX

Using GridView Selected Row in ASP.Net AJAX

AJAX GridView Paging and Sorting using C# in ASP.Net

ASP.Net 2.0 Gridview Paging using C#

ASP.Net 2.0 Nested Gridview Using C#

ASP.Net 2.0 Gridview Sorting Using C#

ASP.Net Dynamic AJAX Dropdown Menu Extender Control

Spotlight.....

GridView Select command enables you to provide the functionality to select a particular row of GridView DataBound control in ASP.Net web pages. AJAX server controls can be used to avoid the whole page postbacks and page refresh on GridView Select command events.

C# AJAX GridView Select Sample Code

In this example we will use the Northwind default database of SQL Server. For using AJAX in your GridView Select sample drag and drop the ScriptManager on top of the web page. Then next AJAX control UpdateProgress to display the visual feedback of update while loading data to the GridView control or on GridView Selection change. To avoid the page refresh on user click events while interacting with ASP.Net web page you have to use AJAX UpdatePanel control. Place the GridView Control inside it.

HTML code:

[code:html]

    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    <asp:Label ID="lblProgress" runat="server" Text="Loading . . . . . "></asp:Label>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="grdCategories" runat="server" OnSelectedIndexChanging = "grdCategories_SelectedIndexChanging" AutoGenerateColumns="False">
                        <Columns>
                            <asp:CommandField HeaderText="Select" ShowHeader="True" ShowSelectButton="True" />
                            <asp:BoundField DataField="categoryName" HeaderText="Category Name" />
                        </Columns>
                        <SelectedRowStyle BackColor="#FFFFC0" Font-Bold="True" />
                    </asp:GridView>
                    <asp:Label ID="lblErrorMsg" runat="server"></asp:Label><br />
                    <asp:Button ID="btnLoadData" runat="server" Text="Fill GridView" OnClick="btnLoadData_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>

Notice the bold fonts string in the above HTML code: OnSelectedIndexChanging = "grdCategories_SelectedIndexChanging"
This OnSelectedIndexChanging event handles the GridView Select. To display the change in style of selected row of GridView control, add the SelectedRowStyle properties as shown in the above code.

C# code for GridView Select with ASP.Net AJAX:

[code:c#]

    protected void grdCategories_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
    {
        grdCategories.SelectedIndex = e.NewSelectedIndex;
        bindGridView();
    }

Download C# AJAX GridView Select Sample Code at the bottom of this article.

Now you will say; what is the use of only GridView Select without any other action on that particular selected GridView row? You are right. Next we will learn the use of select command of GridView control to get the related data of selected row in First GridView control into other appropriate ASP.Net Server control.

Download the full source code here:

ajax gridview select.zip (3.00 kb)

Spotlight.....

Currently rated 1.0 by 1 people