Click here to Skip to main content
12,698,179 members (23,650 online)
Click here to Skip to main content
Add your own
alternative version


16 bookmarked

This Article shows you how to create ajax based gridview

, 5 Nov 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
This Article shows you how to create ajax based gridview in informatical manner .


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.


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.


protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

if (e.Row.RowType == DataControlRowType.DataRow)


int index = Convert.ToInt32(e.Row.RowIndex.ToString());


int offset = 130 + (index * 5);

e.Row.Attributes["onmouseover"] = "'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)


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");


protected void GridView1_PageIndexChanging1(object sender, GridViewPageEventArgs e)

GridView1.PageIndex = e.NewPageIndex;

//Ajax Code

var dhtmlwindow={

imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'], //Path to 4 images used by script, in that order

ajaxbustcache: true, //Bust caching when fetching a file via Ajax?

minimizeorder: 0,

tobjects: [], //object to contain references to dhtml window divs, for cleanup purposes

oldgridSelectedColor: "color",


var domwindow=document.createElement("div") //create dhtml window div


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 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>'




this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100 //z-index value for DHTML window: starts at 0, increments whenever a window has focus

var 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-" prefix

if (/drag-/.test(divs[i].className))

t[divs[i].className.replace(/drag-/, "")]=divs[i] //take out the "drag-" prefix for shorter access by name

} //set z-index of this dhtml window

t.handle._parent=t //store back reference to dhtml window

t.resizearea._parent=t //same

t.controls._parent=t //same

t.onclose=function(){return true} //custom event handler "onclose"

t.onmousedown=function(){dhtmlwindow.zIndexvalue++;} //Increase z-index of window when focus is on it

t.handle.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on handle div

t.resizearea.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on resize div

t.controls.onclick=dhtmlwindow.enablecontrols{} //public function for showing dhtml window

t.hide=function(element){dhtmlwindow.close(this,element)} //public function for hiding dhtml window

t.setSize=function(w, h){dhtmlwindow.setSize(this, w, h)} //public function for setting window dimensions

t.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 resizable

t.isScrolling=function(bol){dhtmlwindow.isScrolling(this, bol)} //public function for specifying if window content contains scrollbars

t.load=function(contenttype, contentsource, title){dhtmlwindow.load(this, contenttype, contentsource, title)} //public function for loading content into window


return t //return reference to dhtml window div


open:function(t, contenttype, contentsource, title, attr, recalonload,element){

var d=dhtmlwindow //reference dhtml window object

function 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


if (document.getElementById(t)==null) //if window doesn't exist yet, create it

t=this.init(t,element) //return reference to dhtml window div



t.setSize(getValue(("width")), (getValue("height"))) //Set dimensions of window

var xpos=getValue("center")? "middle" : getValue("left") //Get x coord of window

var ypos=getValue("center")? "middle" : getValue("top") //Get y coord of window

//t.moveTo(xpos, ypos) //Position window

if (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")


this.addEvent(window, function(){t.moveTo(xpos, ypos)}, "load")


t.isResize(getValue("resize")) //Set whether window is resizable

t.isScrolling(getValue("scrolling")) //Set whether window should contain scrollbars"visible""block""block"

t.moveTo(xpos, ypos) //Position window



t.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" icon

t.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), 150)+"px", 90)+"px"


moveTo:function(t, x, y){ //move window. Position includes current viewpoint of document

this.getviewpoint() //Get current viewpoint numbers"middle")? this.scroll_left+(this.docwidth-t.offsetWidth)/2+"px" : this.scroll_left+parseInt(x)+"px"

//"middle")? this.scroll_top+(this.docheight-t.offsetHeight)/2+"px" : this.scroll_top+parseInt(y)+"px""middle")? (this.docheight-t.offsetHeight)/2+"px" : parseInt(y)+"px"


isResize:function(t, bol){ //show or hide resize inteface (part of the status bar) "block" : "none"

t.resizeBool=(bol)? 1 : 0


isScrolling:function(t, bol){ //set whether loaded content contains scrollbars "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 case

if (typeof title!="undefined")


if (contenttype=="inline")


else if (contenttype=="div"){

t.contentarea.innerHTML=document.getElementById(contentsource).innerHTML //Populate window with contents of specified div on page

document.getElementById(contentsource).style.display="none" //hide that div


else if (contenttype=="iframe"){"hidden" //disable window scrollbars, as iframe already contains scrollbars

if (!t.contentarea.firstChild || t.contentarea.firstChild.tagName!="IFRAME") //If iframe tag doesn't exist already, create it first

t.contentarea.innerHTML='<iframe src="" style="margin:0; padding:0; width:100%; height: 100%" name="_iframe-''"></iframe>'

window.frames["_iframe-"].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



var d=dhtmlwindow //reference dhtml window object

var t=this._parent //reference dhtml window div

d.etarget=this //remember div mouse is currently held down on ("handle" or "resize" div)

var e=window.event || e

d.initmousex=e.clientX //store x position of mouse onmousedown


d.initx=parseInt(t.offsetLeft) //store offset x of window div onmousedown


d.width=parseInt(t.offsetWidth) //store width of window div

d.contentheight=parseInt(t.contentarea.offsetHeight) //store height of window div's content div

if (t.contentarea.datatype=="iframe"){ //if content of this window div is "iframe""#F8F8F8" //colorize and hide content div (while window is being dragged)"hidden"


document.onmousemove=d.getdistance //get distance travelled by mouse as it moves


if (t.contentarea.datatype=="iframe"){ //restore color and visibility of content div onmouseup"white""visible"




return false



var d=dhtmlwindow

var etarget=d.etarget

var e=window.event || e

d.distancex=e.clientX-d.initmousex //horizontal distance travelled relative to starting point


if (etarget.className=="drag-handle") //if target element is "handle" div

d.move(etarget._parent, e)

else if (etarget.className=="drag-resizearea") //if target element is "resize" div

d.resize(etarget._parent, e)

return false //cancel default dragging behavior


getviewpoint:function(){ //get window viewpoint numbers

var ie=document.all && !window.opera

var domclientWidth=document.documentElement && parseInt(document.documentElement.clientWidth) || 100000 //Preliminary doc width in non IE browsers

this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes

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){ //remember certain attributes of the window when it's minimized or closed, such as dimensions, position on page

this.getviewpoint() //Get current window viewpoint numbers

t.lastx=parseInt(( || t.offsetLeft))-dhtmlwindow.scroll_left //store last known x coord of window just before minimizing

t.lasty=parseInt(( || t.offsetTop))-dhtmlwindow.scroll_top

t.lastwidth=parseInt( //store last known width of window just before minimizing/ closing


move:function(t, e){"px""px"


resize:function(t, e){, 150)+"px", 100)+"px"



var d=dhtmlwindow

var sourceobj=window.event? window.event.srcElement : //Get element within "handle" div mouse is currently on (the controls)

if (/Minimize/i.test(sourceobj.getAttribute("title"))) //if this is the "minimize" control

d.minimize(sourceobj, this._parent)

else if (/Restore/i.test(sourceobj.getAttribute("title"))) //if this is the "restore" control

d.restore(sourceobj, this._parent)

else if (/Close/i.test(sourceobj.getAttribute("title"))) //if this is the "close" control


return false


minimize:function(button, t){


button.setAttribute("src", dhtmlwindow.imagefiles[2])

button.setAttribute("title", "Restore")

t.state="minimized" //indicate the state of the window as being "minimized""none""none"

if (typeof t.minimizeorder=="undefined"){ //stack order of minmized window on screen relative to any other minimized windows

dhtmlwindow.minimizeorder++ //increment order


}"10px" //left coord of minmized window"200px"

var windowspacing=t.minimizeorder*10 //spacing (gap) between each minmized window(s)*t.minimizeorder)-windowspacing+"px"


restore:function(button, t){


button.setAttribute("src", dhtmlwindow.imagefiles[0])

button.setAttribute("title", "Minimize")

t.state="fullview" //indicate the state of the window as being "fullview""block""block"

if (t.resizeBool) //if this window is resizable, enable the resize icon"block""px" //position window to last known x coord just before minimizing"px""px"





var closewinbol=t.onclose()


catch(err){ //In non IE browsers, all errors are caught, so just run the below

var closewinbol=true


finally{ //In IE, not all errors are caught, so check if variable isn't defined in IE in those cases

if (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 true

if (t.state!="minimized") //if this window isn't currently minimized

dhtmlwindow.rememberattrs(t) //remember window's dimensions/position on the page before closing"none"


return closewinbol



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 info


t.state="fullview" //indicate the state of the window as being "fullview"


ajax_connect:function(url, t){

var page_request = false

var bustcacheparameter=""

if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc

page_request = new XMLHttpRequest()

else if (window.ActiveXObject){ // if IE6 or below

try {

page_request = new ActiveXObject("Msxml2.XMLHTTP")


catch (e){


page_request = new ActiveXObject("Microsoft.XMLHTTP")


catch (e){}




return false

page_request.onreadystatechange=function(){dhtmlwindow.ajax_loadpage(page_request, t)}

if (this.ajaxbustcache) //if bust caching of external page

bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()'GET', url+bustcacheparameter, true)



ajax_loadpage:function(page_request, t){

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){






dhtmlwindow.etarget=null //clean up




addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)

var tasktype=(window.addEventListener)? tasktype : "on"+tasktype

if (target.addEventListener)

target.addEventListener(tasktype, functionref, false)

else if (target.attachEvent)

target.attachEvent(tasktype, functionref)



for (var i=0; i<dhtmlwindow.tobjects.length; i++){





} //End dhtmlwindow object

document.write('<div id="dhtmlwindowholder"><span style="display:none">.</span></div>') //container that holds all dhtml window divs on page


Points of Interest,, C++, Remoting, Ajax, silverlight, com,dcom , windows mobile.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

ratnesh kumar verma
Software Developer Utile Software
India India
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.

You may also be interested in...


Comments and Discussions

GeneralThis Article shows you how to create ajax based gridview Pin
StockportJambo5-Nov-07 4:44
memberStockportJambo5-Nov-07 4:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 5 Nov 2007
Article Copyright 2007 by ratnesh kumar verma
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid