In this article I'm trying to explain how to work
with HoverMenu controls using AJAX in ASP.net. When the user move the mouse
over the control then based on pop up displayed position it will show in page.
HoverMenu using AJAX in asp.net:
In this article I'm trying to explain how to work with HoverMenu controls using AJAX in ASP.net. When the user move the mouse over the control then based on pop up displayed position it will show in page.
Description:
In below sample, GridView control is populated with data from Database. In each row of the gridview a HoverMenu associates content of the row with a panel that operates on that row.
Mouse over of the gridview then it will ask Edit, Delete. If you choose edit the controls in Edit mode and in another way it will appear Update and Cancel.
During this process we can able to reduce the space.
AJAX:
For this we must download AJAX control Toolkit dll and add reference to the project , by right clicking the project and choose assembly reference to add that. After added the dll add below lines of code in source code.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
Now, you are able to call the AJAX Controls in
your source.
<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server" HoverCssClass="popupHover" PopupControlID="PopupMenu" PopupPosition="Left" TargetControlID="pnlitem" PopDelay="25"/>
Properties:
- TargetControlID - The control that the extender is targeting.
- PopupControlId – The ID of the control to display when mouse is over the controls.
- PopupPosition - Where the Popup to be positioned, by default (left), right, top, bottom, center.
- HoverCssClass – The Css styles to apply for Hover Control.
- PopDelay - The time ( MS), popup remain after mouse over the control by default (100 MS).
Source Code :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HoverMenu.aspx.cs" Inherits="HoverMenu" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .style1 { font-family: "Trebuchet MS"; font-size: large; color: #000066; } </style> </head> <body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" /> <div align="center"> <span class="style1"><strong>HoverMenu Demonstration</strong></span> <p>Mouse over the grid below to see the options for each row.</p> <asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:GridView ID="GV" runat="server" OnRowEditing="GV_OnRowEditing" OnRowCancelingEdit="GV_OnRowCancelingEdit" OnRowUpdating="GV_OnRowUpdating" OnRowDeleting="GV_OnRowDeleting" AutoGenerateColumns="False" OnRowCommand="GV_OnRowCommand" Width="90%" BackColor="Azure" GridLines="None" > <Columns> <asp:TemplateField> <ItemTemplate> <asp:Panel ID="PopupMenu" runat="server"> <div style="border:1px outset white;padding:2px;"> <div><asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" /></div> <div><asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" /></div> </div> </asp:Panel> <asp:Panel ID="pnlitem" runat="server"> <table width="80%"> <tr> <td width="50%" align="center"> <asp:Label Font-Bold="true" ID="lblename" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Ename") %>' /> <asp:Label Font-Bold="true" ID="lblempno" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"empno") %>' Visible="false" /> </td> <td width="50%" align="center"> <asp:Label ID="lbljob" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"job") %>' /> </td> </tr> </table> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server" HoverCssClass="popupHover" PopupControlID="PopupMenu" PopupPosition="Left" TargetControlID="pnlitem" PopDelay="25"/> </ItemTemplate> <EditItemTemplate> <asp:Panel ID="pnlEdit" runat="server" Width="80%"> <table width="80%"> <tr> <td width="30%">name:<br /> <asp:TextBox Font-Bold="true" ID="txtename" runat="server" Text='<%# Bind("Ename") %>' Width="100" /> <asp:Label Font-Bold="true" ID="lblempno" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"empno") %>' Visible="false" /> </td> <td width="55%">job:<br /><asp:TextBox ID="txtjob" runat="server" Text='<%# Bind("job") %>' Width="150" /></td> </tr> </table> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server" TargetControlID="pnlEdit" PopupControlID="PopupMenu" HoverCssClass="popupHover" PopupPosition="Right" PopDelay="25" /> <asp:Panel ID="PopupMenu" runat="server" Width="80"> <div style="border:1px outset white"> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" Text="Update" CommandName="Update" /> <br /> <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" Text="Cancel" CommandName="Cancel" /> </div> </asp:Panel> </EditItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>
Code Behind:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data; public partial class HoverMenu : System.Web.UI.Page { SqlConnection con = new SqlConnection("DataBase=ENGSOFT;User id=sa;Password=P@ssword9"); SqlDataAdapter da; DataSet ds; DataTable dt; SqlCommand cmd; int DeptNo = 1; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Bind_GV(); } } protected void Bind_GV() { cmd = new SqlCommand("Get_Employees", con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@DeptNo", DeptNo); dt = new DataTable(); con.Open(); da = new SqlDataAdapter(cmd); da.Fill(dt); con.Close(); if (dt.Rows.Count > 0) { GV.DataSource = dt; GV.DataBind(); } } protected void GV_OnRowCommand(object sender, GridViewCommandEventArgs e) { } protected void GV_OnRowEditing(object sender, GridViewEditEventArgs e) { GV.EditIndex = e.NewEditIndex; Bind_GV(); }
protected void GV_OnRowCancelingEdit(object sender, GridViewCancelEditEventArgs e) { GV.EditIndex = -1; Bind_GV(); }
protected void GV_OnRowUpdating(object sender, GridViewUpdateEventArgs e) { int EmpNo = Convert.ToInt32((GV.Rows[e.RowIndex].FindControl("lblempno") as Label).Text); TextBox EName = (TextBox)GV.Rows[e.RowIndex].FindControl("txtename"); TextBox Job = (TextBox)GV.Rows[e.RowIndex].FindControl("txtjob"); con.Open(); cmd = new SqlCommand("Update_Employee_Details", con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@EMPNO", EmpNo); cmd.Parameters.AddWithValue("@Ename", EName.Text); cmd.Parameters.AddWithValue("@Job", Job.Text); cmd.ExecuteNonQuery(); con.Close(); GV.EditIndex = -1; Bind_GV(); }
protected void GV_OnRowDeleting(object sender, GridViewDeleteEventArgs e) { con.Open(); int EmpNo = Convert.ToInt32((GV.Rows[e.RowIndex].FindControl("lblempno") as Label).Text); cmd = new SqlCommand("Delete_Employee_Details", con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@EmpNo", EmpNo); cmd.ExecuteNonQuery(); con.Close(); Bind_GV(); } }
ScriptManager:
<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />
Without wrote this line in source code it’s
throws the server error to overcome this issue we just add above lines of code
in source.
Conclusion:
This article will help you how to work with HoverMenuExtender Control in ASP.net AJAX, this will help you those who are try to implement the application using HoverMenu control.
No comments:
Post a Comment