Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
Building Sharepoint List Style GridView with Ajax Control Toolkit

By Satheesh babu
Posted On Sep 15,2008
Article Rating:
Average Rating: 5
No of Ratings: 1
No of Comments: 7
Category: ASP.Net AJAX
Print this article.

Building Sharepoint List Style GridView with Ajax Control Toolkit



My previous article, Ajax Control Toolkit – Introduction provided a basic knowledge in Ajax Control Toolkit. Moving forward, we will learn more about Asp.Net Ajax and Ajax Control Toolkit. In this article, we will implement a sharepoint list style GridView with the help of DropDownExtender control in Ajax Control Toolkit.



Visit the following link to download the latest Ajax Control Toolkit.

You can download this package with or without source code. Download it and unzip the package.

For ASP.Net AJAX 1.0 and Visual Studio 2005, you can download the toolkit directly from here. Read my previous article, Ajax Control Toolkit – Introduction , to configure Ajax Control Toolkit with Visual Studio 2005.


Sharepoint List Style GridView

We will normally have separate columns for edit, delete and select in GridView. In this article, we will provide edit, delete and select links in DropDownExtender control which will be displayed when the user clicks the first column of the GridView, similar to sharepoint list. By doing this, we can reduce the space occupied by the GridView horizontally and also it will give a better user experience. Refer the below figure.


Constructing the GridView

1.      Drag an UpdatePanel Control.

2.      Drag a GridView Control.

3.      Make Employee Name and Department as a BoundColumn. Employee ID column should be a TemplateColumn to include extender controls.

4.      In the Employee ID template column, include a Label control to display the Employee ID. Again, include a panel control with 3 LinkButtons for View, Edit and Delete operation.


To make this panel to appear as a dropdown when the user clicks on the Employee ID, include a DropDownExtender control from Ajax Control Toolkit toolbar. Configure its TargetControlID property to EmployeeID label control and DropDownControlID property to the panel that contains the linkbuttons.

We will also include a ConfirmButtonExtender to give a confirm box when the user click Delete option.


The final GridView will look like,


<asp:GridView ID="GridView1" runat="server" BackColor="White"

BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4"

 AutoGenerateColumns="False" OnRowCommand="GridView1_RowCommand">

<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />

<RowStyle BackColor="White" ForeColor="#330099" />

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />

<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

<HeaderStyle BackColor="#e9eeee" Font-Bold="True" ForeColor="#330099" />


     <asp:TemplateField HeaderText="Employee ID">


         <asp:Label ID="lblEmpID" runat="server" Text='<%# Eval("EmpID") %>'

          Style="display: block;padding:2px;width:100px;padding-right: 50px; font-family: Tahoma; font-size: 11px;" />

          <asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="width:150px;display :none; visibility: hidden;">

           <table cellpadding="0" cellspacing="0">


              <asp:LinkButton ID="lbView" runat="server" CssClass="ContextMenuItem" CommandName="View">View</asp:LinkButton></td></tr>

          <tr><td><img src="Images/edit.png" /></td>

          <td><asp:LinkButton runat="server" CommandName="EditRow" ID="lbEdit" Text="Edit" CssClass="ContextMenuItem"  /></td>


          <tr><td><img src="Images/delete.png" /></td>

          <td><asp:LinkButton runat="server" ID="lbDelete" CommandName="DeleteRow" Text="Delete" CssClass="ContextMenuItem"  /></td>



        <ajaxToolkit:DropDownExtender runat="server" ID="extOperation"


         DropDownControlID="DropPanel" />

         <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" ConfirmText="Are you sure to delete?" TargetControlID="lbDelete" runat="server">




     <asp:BoundField DataField="EmpName" HeaderText="Employee Name" SortExpression="EmpName" />

     <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department" />





protected void Page_Load(object sender, EventArgs e)


        if (!IsPostBack)


            string query = "SELECT * FROM [Employee]";

            GridView1.DataSource = GetDt(query);




    public DataTable GetDt(string query)


        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);

        SqlDataAdapter ada = new SqlDataAdapter(query, con);

        DataTable dt = new DataTable();


        return dt;      



Adding View/Edit/Delete Action

On GridView RowCommand, include the following code,


protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)


        string query;

        string CommandName = e.CommandName;

        GridViewRow row = (GridViewRow)((Control)e.CommandSource).Parent.Parent.Parent;


        Label lblTemp = GridView1.Rows[row.RowIndex].Cells[0].Controls[1] as Label;

        string EmpID = lblTemp.Text;


        if (CommandName == "EditRow")


            query = "Select * FROM [Employee] WHERE [EmpID] = " + EmpID;

            DataTable dt = GetDt(query);

       if (dt != null)


            txtEmpName.Text = dt.Rows[0]["EmpName"].ToString();

            txtdept.Text = dt.Rows[0]["Department"].ToString();

            txtAge.Text = dt.Rows[0]["Age"].ToString();

            txtAddress.Text = dt.Rows[0]["Address"].ToString();




        else if (CommandName == "DeleteRow")


            if(lblTemp != null)

             EmpID = lblTemp.Text;

            query = "DELETE FROM [Employee] WHERE [EmpID] = " + EmpID;

            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);


            SqlCommand com = new SqlCommand(query,con);



            GridView1.DataSource = GetDt("SELECT * FROM [Employee]");



        else if (CommandName == "View")


            query = "Select * FROM [Employee] WHERE [EmpID] = " + EmpID;

            DataTable dt = GetDt(query);

            lblEmpName.Text = dt.Rows[0]["EmpName"].ToString();

            lblDept.Text = dt.Rows[0]["Department"].ToString();

            lblAge.Text = dt.Rows[0]["Age"].ToString();

            lblAddress.Text = dt.Rows[0]["Address"].ToString();




protected void btnUpdate_Click(object sender, EventArgs e)


//Update Values



Execute the page; you can see the GridView populated similar to sharepoint list as seen in the above figure.  If you see the above code, we are getting the values from the database because the Employee table has more number of columns in the database including the columns that are displayed on the GridView. This gives an opportunity to edit entire row available in the database.


When user clicks edit/delete, it raises RowCommand event which is then differentiated using the CommandName property we set in LinkButton control.

When the user clicks Edit, we can load the data rows data to textboxes like below. I have included these textbox inside an UpdatePanel control(UpdatePanel2) in this example.  In Update button click, update the values to database and rebind the GridView.

Clicking View will load all the values to labels and thus making it read-only view. I have included these labels inside another UpdatePanel control(UpdatePanel3) in this example. For simplicity purpose, I have included all these in a single page. You can decide your own layouts/designs for your use.

When the user clicks delete, a confirm message will be popped up for confirmation. Clicking OK will delete the current row.

Refer the below figure.



Source Code 



In precise, we use ASP.Net AJAX to build rich internet applications and the extender controls helps to make an existing control as a rich client controls. This article will help a beginner to have a basic knowledge on Ajax Control Toolkit and using it. Stay tuned for my future articles on Ajax Control Toolkit.

Happy Coding!!


Similar Articles
You can contribute to CodeDiget.Com:
Donate to
Article Feedback
Ajax Toolkit DropDownExtender

I was reading your article and I would like to appreciate you for making it very simple and understandable. This article gives me a basic idea of Ajax Toolkit DropDownExtender in ASP.Net and it will help me a lot. Thanks for sharing with us. Check out this link too its also having nice post with wonderful explanation on Ajax Toolkit DropDownExtender in ASP.Net.....

Thank you very much! Frown

Building Sharepoint List Style GridView with Ajax Control Toolkit
cool article, thanks
Adding linkbuttons to DropPanel at runtime
Nice piece of work. I wanted to add some more linkbuttons to droppanel at runtime depending on user role. I placed placeholder inside drop panel. but that does not work as I expected. Do you have any sample for that?
.Net Programming Training
Nice info about .net code and please contact us for live project training
Dotnet Training Classes
This code is really helpful to me...

Dotnet Training
Dotnet Classes
Sharma Web Academy

Contact Us at
Mail Us at
Building Sharepoint List Style GridView with Ajax Control Toolkit
Share Style Ajax control combine with contol gridview is good..
Very Nice Piece Of Work
That is a very nice piece of work. Here a 2 tips. The first tip, convert the project to .NET 3.5 and then repackage it as a ZIP file. When I tried to open it, VWD 2008 said "convert project", etc. The second tip is to clear the detail panel after delete. Regardless, the code is nice as-is. Thank you. -- Mark Kamoski.