This Article shows you how to create ajax based gridview

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)

Collapse

//// 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();}//Ajax Codevar dhtmlwindow={imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'], //Path to 4 images used by script, in that orderajaxbustcache: true, //Bust caching when fetching a file via Ajax?minimizeorder: 0,tobjects: [], //object to contain references to dhtml window divs, for cleanup purposesoldgridSelectedColor: "color",init:function(t){var domwindow=document.createElement("div") //create dhtml window divdomwindow.id=tdomwindow.className="dhtmlwindow"var domwindowdata=''domwindowdata='<div class="drag-handle">'//domwindowdata+='DHTML Window <div class="drag-controls"><img src="'+this.imagefiles[0]+'" title="Minimize" /><img src="'+this.imagefiles[1]+'" title="Close" /></div>'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;">&nbsp;</div></div>'domwindowdata+='</div>'domwindow.innerHTML=domwindowdatadocument.getElementById("dhtmlwindowholder").appendChild(domwindow)this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100 //z-index value for DHTML window: starts at 0, increments whenever a window has focusvar t=document.getElementById(t)var divs=t.getElementsByTagName("div")for (var i=0; i<divs.length; i++){ //go through divs inside dhtml window and extract all those with class="drag-" prefixif (/drag-/.test(divs[i].className))t[divs[i].className.replace(/drag-/, "")]=divs[i] //take out the "drag-" prefix for shorter access by name}t.style.zIndex=this.zIndexvalue //set z-index of this dhtml windowt.handle._parent=t //store back reference to dhtml windowt.resizearea._parent=t //samet.controls._parent=t //samet.onclose=function(){return true} //custom event handler "onclose"t.onmousedown=function(){dhtmlwindow.zIndexvalue++; this.style.zIndex=dhtmlwindow.zIndexvalue} //Increase z-index of window when focus is on itt.handle.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on handle divt.resizearea.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on resize divt.controls.onclick=dhtmlwindow.enablecontrolst.show=function(){dhtmlwindow.show(this)} //public function for showing dhtml windowt.hide=function(element){dhtmlwindow.close(this,element)} //public function for hiding dhtml windowt.setSize=function(w, h){dhtmlwindow.setSize(this, w, h)} //public function for setting window dimensionst.moveTo=function(x, y){dhtmlwindow.moveTo(this, x, y)} //public function for moving dhtml window (relative to viewpoint)t.isResize=function(bol){dhtmlwindow.isResize(this, bol)} //public function for specifying if window is resizablet.isScrolling=function(bol){dhtmlwindow.isScrolling(this, bol)} //public function for specifying if window content contains scrollbarst.load=function(contenttype, contentsource, title){dhtmlwindow.load(this, contenttype, contentsource, title)} //public function for loading content into windowthis.tobjects[this.tobjects.length]=treturn t //return reference to dhtml window div},open:function(t, contenttype, contentsource, title, attr, recalonload,element){var d=dhtmlwindow //reference dhtml window objectfunction getValue(Name){var config=new RegExp(Name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)return (config.test(attr))? parseInt(RegExp.$1) : 0 //return value portion (int), or 0 (false) if none found}oldgridSelectedColor=element.style.backgroundColorif (document.getElementById(t)==null) //if window doesn't exist yet, create itt=this.init(t,element) //return reference to dhtml window divelset=document.getElementById(t)t.setSize(getValue(("width")), (getValue("height"))) //Set dimensions of windowvar xpos=getValue("center")? "middle" : getValue("left") //Get x coord of windowvar ypos=getValue("center")? "middle" : getValue("top") //Get y coord of window//t.moveTo(xpos, ypos) //Position windowif (typeof recalonload!="undefined" && recalonload=="recal" && this.scroll_top==0){ //reposition window when page fully loads with updated window viewpoints?if (window.attachEvent && !window.opera) //In IE, add another 400 milisecs on page load (viewpoint properties may return 0 b4 then)this.addEvent(window, function(){setTimeout(function(){t.moveTo(xpos, ypos)}, 400)}, "load")elsethis.addEvent(window, function(){t.moveTo(xpos, ypos)}, "load")}t.isResize(getValue("resize")) //Set whether window is resizablet.isScrolling(getValue("scrolling")) //Set whether window should contain scrollbarst.style.visibility="visible"t.style.display="block"t.contentarea.style.display="block"t.moveTo(xpos, ypos) //Position windowkop=element.cells[0].innerTextelement.style.backgroundColor="yellow"contentsource=contentsource+kopt.load(contenttype, contentsource, title)if (t.state=="minimized" && t.controls.firstChild.title=="Restore"){ //If window exists and is currently minimized?t.controls.firstChild.setAttribute("src", dhtmlwindow.imagefiles[0]) //Change "restore" icon within window interface to "minimize" icont.controls.firstChild.setAttribute("title", "Minimize")t.state="fullview" //indicate the state of the window as being "fullview"}return t},setSize:function(t, w, h){ //set window size (min is 150px wide by 90px tall)t.style.width=Math.max(parseInt(w), 150)+"px"t.contentarea.style.height=Math.max(parseInt(h), 90)+"px"},moveTo:function(t, x, y){ //move window. Position includes current viewpoint of documentthis.getviewpoint() //Get current viewpoint numberst.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.scroll_top+(this.docheight-t.offsetHeight)/2+"px" : this.scroll_top+parseInt(y)+"px"t.style.top=(y=="middle")? (this.docheight-t.offsetHeight)/2+"px" : parseInt(y)+"px"},isResize:function(t, bol){ //show or hide resize inteface (part of the status bar)t.statusarea.style.display=(bol)? "block" : "none"t.resizeBool=(bol)? 1 : 0},isScrolling:function(t, bol){ //set whether loaded content contains scrollbarst.contentarea.style.overflow=(bol)? "auto" : "hidden"},load:function(t, contenttype, contentsource, title){ //loads content into window plus set its title (3 content types: "inline", "iframe", or "ajax")var contenttype=contenttype.toLowerCase() //convert string to lower caseif (typeof title!="undefined")t.handle.firstChild.nodeValue=titleif (contenttype=="inline")t.contentarea.innerHTML=contentsourceelse if (contenttype=="div"){t.contentarea.innerHTML=document.getElementById(contentsource).innerHTML //Populate window with contents of specified div on pagedocument.getElementById(contentsource).style.display="none" //hide that div}else if (contenttype=="iframe"){t.contentarea.style.overflow="hidden" //disable window scrollbars, as iframe already contains scrollbarsif (!t.contentarea.firstChild || t.contentarea.firstChild.tagName!="IFRAME") //If iframe tag doesn't exist already, create it firstt.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) //set location of iframe window to specified URL}else if (contenttype=="ajax"){this.ajax_connect(contentsource, t) //populate window with external contents fetched via Ajax}t.contentarea.datatype=contenttype //store contenttype of current window for future reference},setupdrag:function(e){var d=dhtmlwindow //reference dhtml window objectvar t=this._parent //reference dhtml window divd.etarget=this //remember div mouse is currently held down on ("handle" or "resize" div)var e=window.event || ed.initmousex=e.clientX //store x position of mouse onmousedownd.initmousey=e.clientYd.initx=parseInt(t.offsetLeft) //store offset x of window div onmousedownd.inity=parseInt(t.offsetTop)d.width=parseInt(t.offsetWidth) //store width of window divd.contentheight=parseInt(t.contentarea.offsetHeight) //store height of window div's content divif (t.contentarea.datatype=="iframe"){ //if content of this window div is "iframe"t.style.backgroundColor="#F8F8F8" //colorize and hide content div (while window is being dragged)t.contentarea.style.visibility="hidden"}document.onmousemove=d.getdistance //get distance travelled by mouse as it movesdocument.onmouseup=function(){if (t.contentarea.datatype=="iframe"){ //restore color and visibility of content div onmouseupt.contentarea.style.backgroundColor="white"t.contentarea.style.visibility="visible"}d.stop()}return false},getdistance:function(e){var d=dhtmlwindowvar etarget=d.etargetvar e=window.event || ed.distancex=e.clientX-d.initmousex //horizontal distance travelled relative to starting pointd.distancey=e.clientY-d.initmouseyif (etarget.className=="drag-handle") //if target element is "handle" divd.move(etarget._parent, e)else if (etarget.className=="drag-resizearea") //if target element is "resize" divd.resize(etarget._parent, e)return false //cancel default dragging behavior},getviewpoint:function(){ //get window viewpoint numbersvar ie=document.all && !window.operavar domclientWidth=document.documentElement && parseInt(document.documentElement.clientWidth) || 100000 //Preliminary doc width in non IE browsersthis.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypesthis.scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffsetthis.scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffsetthis.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){ //remember certain attributes of the window when it's minimized or closed, such as dimensions, position on pagethis.getviewpoint() //Get current window viewpoint numberst.lastx=parseInt((t.style.left || t.offsetLeft))-dhtmlwindow.scroll_left //store last known x coord of window just before minimizingt.lasty=parseInt((t.style.top || t.offsetTop))-dhtmlwindow.scroll_topt.lastwidth=parseInt(t.style.width) //store last known width of window just before minimizing/ closing},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=dhtmlwindowvar sourceobj=window.event? window.event.srcElement : e.target //Get element within "handle" div mouse is currently on (the controls)if (/Minimize/i.test(sourceobj.getAttribute("title"))) //if this is the "minimize" controld.minimize(sourceobj, this._parent)else if (/Restore/i.test(sourceobj.getAttribute("title"))) //if this is the "restore" controld.restore(sourceobj, this._parent)else if (/Close/i.test(sourceobj.getAttribute("title"))) //if this is the "close" controld.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" //indicate the state of the window as being "minimized"t.contentarea.style.display="none"t.statusarea.style.display="none"if (typeof t.minimizeorder=="undefined"){ //stack order of minmized window on screen relative to any other minimized windowsdhtmlwindow.minimizeorder++ //increment ordert.minimizeorder=dhtmlwindow.minimizeorder}t.style.left="10px" //left coord of minmized windowt.style.width="200px"var windowspacing=t.minimizeorder*10 //spacing (gap) between each minmized window(s)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" //indicate the state of the window as being "fullview"t.style.display="block"t.contentarea.style.display="block"if (t.resizeBool) //if this window is resizable, enable the resize icont.statusarea.style.display="block"t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px" //position window to last known x coord just before minimizingt.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"t.style.width=parseInt(t.lastwidth)+"px"}, close:function(t,element){try{element.style.backgroundColor=oldgridSelectedColorvar closewinbol=t.onclose()}catch(err){ //In non IE browsers, all errors are caught, so just run the belowvar closewinbol=true}finally{ //In IE, not all errors are caught, so check if variable isn't defined in IE in those casesif (typeof closewinbol=="undefined"){alert("An error has occured somwhere inside your /"onclose/" event handler")var closewinbol=true}}if (closewinbol){ //if custom event handler function returns trueif (t.state!="minimized") //if this window isn't currently minimizeddhtmlwindow.rememberattrs(t) //remember window's dimensions/position on the page before closingt.style.display="none"}return closewinbol},show:function(t){if (t.lastx) //If there exists previously stored information such as last x position on window attributes (meaning it's been minimized or closed)dhtmlwindow.restore(t.controls.firstChild, t) //restore the window using that infoelset.style.display="block"t.state="fullview" //indicate the state of the window as being "fullview"},ajax_connect:function(url, t){var page_request = falsevar bustcacheparameter=""if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etcpage_request = new XMLHttpRequest()else if (window.ActiveXObject){ // if IE6 or belowtry {page_request = new ActiveXObject("Msxml2.XMLHTTP")} catch (e){try{page_request = new ActiveXObject("Microsoft.XMLHTTP")}catch (e){}}}elsereturn falsepage_request.onreadystatechange=function(){dhtmlwindow.ajax_loadpage(page_request, t)}if (this.ajaxbustcache) //if bust caching of external pagebustcacheparameter=(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 //clean updocument.onmousemove=nulldocument.onmouseup=null},addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)var tasktype=(window.addEventListener)? tasktype : "on"+tasktypeif (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}} //End dhtmlwindow objectdocument.write('<div id="dhtmlwindowholder"><span style="display:none">.</span></div>') //container that holds all dhtml window divs on pagewindow.onunload=dhtmlwindow.cleanup

Points of Interest

c#.net,ASP.net, C++, Remoting, Ajax, silverlight, com,dcom , windows mobile.

History

About ratnesh kumar verma

Myself Ratnesh kumar Working As Software Programmer in Sollics Tech. Pvt. Ltd. I got Postgraduate degree in career writing from BIT College (IGNOU University) Bangalore in 2005. Originally from Bihar, 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.

Click here to view ratnesh kumar verma's online profile.