CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Ajax Article » Building Sharepoint List Style GridView with Ajax Control Toolkit   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

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: (Login)
Average Rating: 5
No of Ratings: 1
No of Comments: 7
Print this article.
Category: ASP.Net AJAX

Subscribe to our feed!

Building Sharepoint List Style GridView with Ajax Control Toolkit

 

Introduction

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.

 

Pre-Requisites

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

http://www.asp.net/AJAX/ajaxcontroltoolkit/

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" />

   <Columns>                                  

     <asp:TemplateField HeaderText="Employee ID">

        <ItemTemplate>

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

          <tr><td></td><td>

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

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

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

</table>

         </asp:Panel>

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

         TargetControlID="lblEmpID"

         DropDownControlID="DropPanel" />

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

         </ajaxToolkit:ConfirmButtonExtender>

       </ItemTemplate>

     </asp:TemplateField>

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

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

  </Columns>

</asp:GridView>

 

Codebehind

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

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

            GridView1.DataSource = GetDt(query);

            GridView1.DataBind();

        }

    }

    public DataTable GetDt(string query)

    {       

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

        SqlDataAdapter ada = new SqlDataAdapter(query, con);

        DataTable dt = new DataTable();

        ada.Fill(dt);

        return dt;      

    }

 



ASP.Net Hosting

Recent Articles

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

            UpdatePanel2.Update();

       }

        }

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

            con.Open();

            SqlCommand com = new SqlCommand(query,con);

            com.ExecuteNonQuery();

            con.Close();

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

            GridView1.DataBind();           

        }

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

            UpdatePanel3.Update();

        }

}     

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.

 

Downloads

Source Code 

 

Conclusion

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 CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    Ajax Toolkit DropDownExtender
    Hi,

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

    http://mindstick.com/Articles/d3b09793-a9a3-4661-9264-64bce5c8ba0b/?Ajax%20Toolkit%20DropDownExtender%20in%20ASP.Net

    Thank you very much! Frown

    Building Sharepoint List Style GridView with Ajax Control Toolkit
    cool article, thanks
    Adding linkbuttons to DropPanel at runtime
    Hi
    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

    info@dslacademy.com
    http://www.dslacademy.com
    Dotnet Training Classes
    This code is really helpful to me...
    Thanks

    Dotnet Training
    Dotnet Classes
    Sharma Web Academy

    Contact Us at
    www.sharmawebacademy.com
    Mail Us at
    harish.solanki@sharmainfoway.com
    Building Sharepoint List Style GridView with Ajax Control Toolkit
    Share Style Ajax control combine with asp.net 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.