Academic Students Projects | Software School Projects | Free Source Codes

The price of the projects include source code, abstract, report and support for development and deployment. Please use our contact us form or send email to Support@srishtis.com

Building Sharepoint List Style GridView with Ajax Control Toolkit

Introduction

In this tutorial, we will implement a sharepoint list style GridView with the help of DropDownExtender control in Ajax Control Toolkit.

Sharepoint List Style GridView

We will normally have separate columns for edit, delete and select in GridView. In this tutorial,
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

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.
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="lblView" runat="server" CssClass="ContextMenuItem" CommandName="View" >View</asp:LinkButton>
</td>
</tr>
<tr>
<td>
<img src="Images/edit.png" />
</td>
<td>
<asp:LinkButton ID="lbEdit" runat="server" Text="Edit" CssClass="ContextMenuItem" CommandName="EditRow" />
</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="EmployeeName" 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=ConfigurationManager.
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 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);   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
}

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.

Download complete source code