Introduction
This is an Ajax gridview where information appears in popup. User(s) need not click [more] button in gridview to retrieve additional information from other page(s). This is all done in mouse-over-event whenever user(s) position his mouse on gridview row-specific additional information springs up in popup. i choose to remain silent on the core features of Ajax but, of course, relevant functionalities would definitely be dealt with.
Background
To learn basics of Ajax .
Using the code
A brief description on manner of usage of article or code- class names, methods , properties,...... any tricks or tips.
I am using three files here: data.aspx-cs, infonew.aspx-cs, dhtmlwindow.js to interact with Ajax functionality in gridview.
Blocks of code should be set as style "Formatted" like this:
As you know , i am using gridview wherein the main event is to hit mouse-over.
file-1(data.aspx.cs)
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int index = Convert.ToInt32(e.Row.RowIndex.ToString());
index+=1;
int offset = 130 + (index * 5);
e.Row.Attributes["onmouseover"] = "ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'infonew.aspx?id=', '', 'width=420px,height=90px,left=160px,top="+offset+"px,resize=0,scrolling=0','',this); return false";
e.Row.Attributes["onmouseout"] = "ajaxwin.hide(this)";
}
}
string val;
protected void Page_Load(object sender, EventArgs e)
{
BindDataGrid();
}
public void BindDataGrid()
{
DBLibrary obj = new DBLibrary();
obj.path1 = Server.MapPath("Database/bangaloreFriends.mdb");
GridView1.DataSource = obj.DataTable("SELECT id,CName,PhoneNo,Location FROM combind order by id", "combind");
GridView1.DataBind();
}
protected void GridView1_PageIndexChanging1(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
BindDataGrid();
}
var dhtmlwindow={
imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'],
ajaxbustcache: true,
minimizeorder: 0,
tobjects: [],
oldgridSelectedColor: "color",
init:function(t){
var domwindow=document.createElement("div")
domwindow.id=t
domwindow.className="dhtmlwindow"
var domwindowdata=''
domwindowdata='<div class="drag-handle">'
domwindowdata+='DHTML Window <div class="drag-controls"></div>'
domwindowdata+='</div>'
domwindowdata+='<div class="drag-contentarea"></div>'
domwindowdata+='<div class="drag-statusarea"><div class="drag-resizearea" style="background: transparent url('+this.imagefiles[3]+') top right no-repeat;"> </div></div>'
domwindowdata+='</div>'
domwindow.innerHTML=domwindowdata
document.getElementById("dhtmlwindowholder").appendChild(domwindow)
this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100
var t=document.getElementById(t)
var divs=t.getElementsByTagName("div")
for (var i=0; i<divs.length; i++){
if (/drag-/.test(divs[i].className))
t[divs[i].className.replace(/drag-/, "")]=divs[i]
}
t.style.zIndex=this.zIndexvalue
t.handle._parent=t
t.resizearea._parent=t
t.controls._parent=t
t.onclose=function(){return true}
t.onmousedown=function(){dhtmlwindow.zIndexvalue++; this.style.zIndex=dhtmlwindow.zIndexvalue}
t.handle.onmousedown=dhtmlwindow.setupdrag
t.resizearea.onmousedown=dhtmlwindow.setupdrag
t.controls.onclick=dhtmlwindow.enablecontrols
t.show=function(){dhtmlwindow.show(this)}
t.hide=function(element){dhtmlwindow.close(this,element)}
t.setSize=function(w, h){dhtmlwindow.setSize(this, w, h)}
t.moveTo=function(x, y){dhtmlwindow.moveTo(this, x, y)}
t.isResize=function(bol){dhtmlwindow.isResize(this, bol)}
t.isScrolling=function(bol){dhtmlwindow.isScrolling(this, bol)}
t.load=function(contenttype, contentsource, title){dhtmlwindow.load(this, contenttype, contentsource, title)}
this.tobjects[this.tobjects.length]=t
return t
},
open:function(t, contenttype, contentsource, title, attr, recalonload,element){
var d=dhtmlwindow
function getValue(Name){
var config=new RegExp(Name+"=([^,]+)", "i")
return (config.test(attr))? parseInt(RegExp.$1) : 0
}
oldgridSelectedColor=element.style.backgroundColor
if (document.getElementById(t)==null)
t=this.init(t,element)
else
t=document.getElementById(t)
t.setSize(getValue(("width")), (getValue("height")))
var xpos=getValue("center")? "middle" : getValue("left")
var ypos=getValue("center")? "middle" : getValue("top")
if (typeof recalonload!="undefined" && recalonload=="recal" && this.scroll_top==0){
if (window.attachEvent && !window.opera)
this.addEvent(window, function(){setTimeout(function(){t.moveTo(xpos, ypos)}, 400)}, "load")
else
this.addEvent(window, function(){t.moveTo(xpos, ypos)}, "load")
}
t.isResize(getValue("resize"))
t.isScrolling(getValue("scrolling"))
t.style.visibility="visible"
t.style.display="block"
t.contentarea.style.display="block"
t.moveTo(xpos, ypos)
kop=element.cells[0].innerText
element.style.backgroundColor="yellow"
contentsource=contentsource+kop
t.load(contenttype, contentsource, title)
if (t.state=="minimized" && t.controls.firstChild.title=="Restore"){
t.controls.firstChild.setAttribute("src", dhtmlwindow.imagefiles[0])
t.controls.firstChild.setAttribute("title", "Minimize")
t.state="fullview"
}
return t
},
setSize:function(t, w, h){
t.style.width=Math.max(parseInt(w), 150)+"px"
t.contentarea.style.height=Math.max(parseInt(h), 90)+"px"
},
moveTo:function(t, x, y){
this.getviewpoint()
t.style.left=(x=="middle")? this.scroll_left+(this.docwidth-t.offsetWidth)/2+"px" : this.scroll_left+parseInt(x)+"px"
t.style.top=(y=="middle")? (this.docheight-t.offsetHeight)/2+"px" : parseInt(y)+"px"
},
isResize:function(t, bol){
t.statusarea.style.display=(bol)? "block" : "none"
t.resizeBool=(bol)? 1 : 0
},
isScrolling:function(t, bol){
t.contentarea.style.overflow=(bol)? "auto" : "hidden"
},
load:function(t, contenttype, contentsource, title){
var contenttype=contenttype.toLowerCase()
if (typeof title!="undefined")
t.handle.firstChild.nodeValue=title
if (contenttype=="inline")
t.contentarea.innerHTML=contentsource
else if (contenttype=="div"){
t.contentarea.innerHTML=document.getElementById(contentsource).innerHTML
document.getElementById(contentsource).style.display="none"
}
else if (contenttype=="iframe"){
t.contentarea.style.overflow="hidden"
if (!t.contentarea.firstChild || t.contentarea.firstChild.tagName!="IFRAME")
t.contentarea.innerHTML='<iframe src="" style="margin:0; padding:0; width:100%; height: 100%" name="_iframe-'+t.id+'"></iframe>'
window.frames["_iframe-"+t.id].location.replace(contentsource)
}
else if (contenttype=="ajax"){
this.ajax_connect(contentsource, t)
}
t.contentarea.datatype=contenttype
},
setupdrag:function(e){
var d=dhtmlwindow
var t=this._parent
d.etarget=this
var e=window.event || e
d.initmousex=e.clientX
d.initmousey=e.clientY
d.initx=parseInt(t.offsetLeft)
d.inity=parseInt(t.offsetTop)
d.width=parseInt(t.offsetWidth)
d.contentheight=parseInt(t.contentarea.offsetHeight)
if (t.contentarea.datatype=="iframe"){
t.style.backgroundColor="#F8F8F8"
t.contentarea.style.visibility="hidden"
}
document.onmousemove=d.getdistance
document.onmouseup=function(){
if (t.contentarea.datatype=="iframe"){
t.contentarea.style.backgroundColor="white"
t.contentarea.style.visibility="visible"
}
d.stop()
}
return false
},
getdistance:function(e){
var d=dhtmlwindow
var etarget=d.etarget
var e=window.event || e
d.distancex=e.clientX-d.initmousex
d.distancey=e.clientY-d.initmousey
if (etarget.className=="drag-handle")
d.move(etarget._parent, e)
else if (etarget.className=="drag-resizearea")
d.resize(etarget._parent, e)
return false
},
getviewpoint:function(){
var ie=document.all && !window.opera
var domclientWidth=document.documentElement && parseInt(document.documentElement.clientWidth) || 100000
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
this.scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
this.scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
this.docwidth=(ie)? this.standardbody.clientWidth : (/Safari/i.test(navigator.userAgent))? window.innerWidth : Math.min(domclientWidth, window.innerWidth-16)
this.docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
},
rememberattrs:function(t){
this.getviewpoint()
t.lastx=parseInt((t.style.left || t.offsetLeft))-dhtmlwindow.scroll_left
t.lasty=parseInt((t.style.top || t.offsetTop))-dhtmlwindow.scroll_top
t.lastwidth=parseInt(t.style.width)
},
move:function(t, e){
t.style.left=dhtmlwindow.distancex+dhtmlwindow.initx+"px"
t.style.top=dhtmlwindow.distancey+dhtmlwindow.inity+"px"
},
resize:function(t, e){
t.style.width=Math.max(dhtmlwindow.width+dhtmlwindow.distancex, 150)+"px"
t.contentarea.style.height=Math.max(dhtmlwindow.contentheight+dhtmlwindow.distancey, 100)+"px"
},
enablecontrols:function(e){
var d=dhtmlwindow
var sourceobj=window.event? window.event.srcElement : e.target
if (/Minimize/i.test(sourceobj.getAttribute("title")))
d.minimize(sourceobj, this._parent)
else if (/Restore/i.test(sourceobj.getAttribute("title")))
d.restore(sourceobj, this._parent)
else if (/Close/i.test(sourceobj.getAttribute("title")))
d.close(this._parent)
return false
},
minimize:function(button, t){
dhtmlwindow.rememberattrs(t)
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="minimized"
t.contentarea.style.display="none"
t.statusarea.style.display="none"
if (typeof t.minimizeorder=="undefined"){
dhtmlwindow.minimizeorder++
t.minimizeorder=dhtmlwindow.minimizeorder
}
t.style.left="10px"
t.style.width="200px"
var windowspacing=t.minimizeorder*10
t.style.top=dhtmlwindow.scroll_top+dhtmlwindow.docheight-(t.handle.offsetHeight*t.minimizeorder)-windowspacing+"px"
},
restore:function(button, t){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[0])
button.setAttribute("title", "Minimize")
t.state="fullview"
t.style.display="block"
t.contentarea.style.display="block"
if (t.resizeBool)
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px"
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
},
close:function(t,element){
try{
element.style.backgroundColor=oldgridSelectedColor
var closewinbol=t.onclose()
}
catch(err){
var closewinbol=true
}
finally{
if (typeof closewinbol=="undefined"){
alert("An error has occured somwhere inside your \"onclose\" event handler")
var closewinbol=true
}
}
if (closewinbol){
if (t.state!="minimized")
dhtmlwindow.rememberattrs(t)
t.style.display="none"
}
return closewinbol
},
show:function(t){
if (t.lastx)
dhtmlwindow.restore(t.controls.firstChild, t)
else
t.style.display="block"
t.state="fullview"
},
ajax_connect:function(url, t){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest)
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){dhtmlwindow.ajax_loadpage(page_request, t)}
if (this.ajaxbustcache)
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
},
ajax_loadpage:function(page_request, t){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
t.contentarea.innerHTML=page_request.responseText
}
},
stop:function(){
dhtmlwindow.etarget=null
document.onmousemove=null
document.onmouseup=null
},
addEvent:function(target, functionref, tasktype){
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},
cleanup:function(){
for (var i=0; i<dhtmlwindow.tobjects.length; i++){
dhtmlwindow.tobjects[i].handle._parent=dhtmlwindow.tobjects[i].resizearea._parent=dhtmlwindow.tobjects[i].controls._parent=null
}
window.onload=null
}
}
document.write('<div id="dhtmlwindowholder"><span style="display:none">.</span></div>')
window.onunload=dhtmlwindow.cleanup
Points of Interest
c#.net,ASP.net, C++, Remoting, Ajax, silverlight, com,dcom , windows mobile.
History
Myself Ratnesh kumar Working As Software Programmer in Utile Software I got Postgraduate degree in career writing from BIT College (IGNOU University) Bangalore in 2005. I decided to stay in Providence after Post graduation and get a job. However, software Programmer weren't easy to get. I mean, if Clark Kent could leave the farm and do-si-do into the Daily Planet without so much as an associate's degree, surely I could do better than Superman.