Building Sharepoint List Style GridView with Ajax Control Toolkit
Home » Article » ASP.Net Ajax Article »
Página 1 de 4
Post an Error!
You are not logged in.
Building Sharepoint List Style GridView with Ajax Control Toolkit
C Programming Language (2nd Edition) The authors present the complete guide to ANSI standard C language programming. Written by the developers of C, this new version helps readers keep up with the finalized ANSI standard for C while showing how to take advantage of C's rich set of operators, economy of expression, improved control flow, and data structures.More
Details.
SpreadsheetGear for ASP.NET and WinForms Excel Reporting, dashboards from Excel charts and ranges, Windows Forms spreadsheet controls, Excel compatible charting, the fastest and most complete Excel compatible calculations andmore
By Satheesh babu Posted On Sep 15,2008
Article Rating: (Login)
Category: ASP.Net AJAX
Average Rating: 5 No of Ratings: 1
0
No of Comments: 6 Print this article. 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. 2. 3.
Drag an UpdatePanel Control. Drag a GridView Control. 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" />
http://www.codedigest.com/Articles/ASPNETAJAX/131_Building_Sharepoint_List_... 05/09/2011
Building Sharepoint List Style GridView with Ajax Control Toolkit
Pรกgina 2 de 4
<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; }
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);
http://www.codedigest.com/Articles/ASPNETAJAX/131_Building_Sharepoint_List_... 05/09/2011
Building Sharepoint List Style GridView with Ajax Control Toolkit
PĂĄgina 3 de 4
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 Image Cropping in ASP.Net Using jQuery and jCrop Resolve Image URL from Master Page and Content Page in Different Folder in ASP.Netâ&#x20AC;&#x201C; URL Rebasing HttpUtility Methods in Asp.Net Understanding Web Security Vulnerabilities and Preventing it in ASP.Net Applications Import/Upload Excel Sheet data to Sql Server in C# and Asp.Net You can contribute to CodeDigest.Com:
http://www.codedigest.com/Articles/ASPNETAJAX/131_Building_Sharepoint_List_... 05/09/2011
Building Sharepoint List Style GridView with Ajax Control Toolkit
Pรกgina 4 de 4
0
Article Feedback Comments
Building Sharepoint List Style GridView with Ajax Control Toolkit cool article, thanks Commented By Mahmoud Algoul on 11/1/2010 @ 6:54 AM
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? Commented By Leena on 3/28/2010 @ 5:48 AM
.Net Programming Training Nice info about .net code and please contact us for live project training info@dslacademy.com http://www.dslacademy.com Commented By Shaishavi Sen on 9/11/2009 @ 8:50 AM
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 Commented By Sharma Web Academy on 8/20/2009 @ 5:06 AM
Building Sharepoint List Style GridView with Ajax Control Toolkit Share Style Ajax control combine with asp.net contol gridview is good.. Commented By Ramesh Raja on 3/23/2009 @ 6:40 AM
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. Commented By Mark Kamoski on 10/22/2008 @ 1:13 PM
www.codedigest.com. All articles are posted "AS IS" with no warranties. All articles are posted for educational purpose only and individual authors are responsible for their article. Please mail admin[at]codedigest.com for any queries or compliants. Disclaimer Terms and Condition Privacy Policy Contact Us
http://www.codedigest.com/Articles/ASPNETAJAX/131_Building_Sharepoint_List_... 05/09/2011