How to create AJAX handover extender in ASP.NET?
In this article I have explained in detail about AJAX Hand over extender in ASP.NET. For example if we have more than 30 column in grid view difficult to see values at the same page in that situation we need to scroll to see all data instead of that if move mouse on the employee no show all details using AJAX handover extender
Client side:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>AJAX Hand over Extender</title>
<style type="text/css">
.pnlcss
{
padding-left: 10px;
color: White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="300">
<Columns>
<asp:TemplateField HeaderText="Eno">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("eno")%>'></asp:Label>
<asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Label1"
PopupControlID="PopupMenu" OffsetX="100">
</asp:HoverMenuExtender>
<asp:Panel ID="PopupMenu" runat="server" CssClass="pnlcss" BackColor="#F58A8A" Width="400">
<table width="400" align="center">
<tr>
<td height="30" width="50%">
Employee No
</td>
<td height="30">
<%#Eval("eno")%>
</td>
</tr>
<tr>
<td height="30" width="50%">
Employee No
</td>
<td height="30">
<%#Eval("empname")%>
</td>
</tr>
<tr>
<td height="30" width="50%">
Employee No
</td>
<td height="30">
<%#Eval("sal")%>
</td>
</tr>
</table>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="empname" HeaderText="Emp name" />
<asp:BoundField DataField="sal" HeaderText="Salary" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Server side
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
SqlCommand sqlcmd = new SqlCommand();
SqlDataAdapter da = new SqlDataAdapter();
DataTable dt = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
sqlcon.Open();
sqlcmd = new SqlCommand("select * from emp", sqlcon);
da = new SqlDataAdapter(sqlcmd);
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Output
If you move cursor on the employee number full details are display in the small popup window.
Source Code Detail:
Here with I have attached source code of AJAX hand over extender download and try to learn how handover extender work.
Front End : ASP.NET
Code Behind : C#
Conclusion:
I hope this article help to know about hand over.