C# Web Application - Top DataGrid overlapped with bottom datagrid after databinding

Question

Anyone can help to solve the problem of:

In the web form, there are two datagrids that located at the top and bottom. After databinding,
the top datagrid may give no room for the bottom one because of too many data.
Any dynamic solution to move the bottom datagrid according to the top grid after-databinding-height.

Thanks

Pak Hong Man · Answer

I have another idea to use java script that is copied from others. But I don't know how to pass the parameters from .net to javascript. I don't know whether Session can do it or not or using cookie. // Move Objects (19-Jan-2006) // by Vic Phillips http://www.vicsjavascripts.org.uk/ // zxcMoveTo('Tst1',400,300,4,50); // parameter 0 - the object or the ID of the object to move (object or string ID) // parameter 1 - the new Horizontal(X) position (digits) // parameter 2 - the new Vertical(Y) position (digits) // parameter 3 - optional the move increment (digits) // parameter 4 - optional the move delay (digits) var zxcCnt=0; var TO; function zxcMoveTo(zxcobj,zxcx,zxcy,zxcinc,zxcdly){ if (typeof(zxcobj)=='string'){ var zxcobj=document.getElementById(zxcobj); } if (!zxcobj.oop){ zxcobj.oop=new zxcOOPMove(zxcobj); zxcobj.oop.inc=zxcinc||1; zxcobj.oop.dly=zxcdly||100; } if (zxcobj.oop.stop){ zxcobj.oop.stop=false; } else { zxcobj.oop.stop=true; } zxcobj.oop.inc=zxcinc||zxcobj.oop.inc; zxcobj.oop.dly=zxcdly||zxcobj.oop.dly; clearTimeout(zxcobj.oop.to); zxcobj.spos=[zxcPos(zxcobj)[0],zxcPos(zxcobj)[1]]; zxcobj.fpos=[zxcx,zxcy]; zxcobj.style.position='absolute'; zxcobj.style.left=zxcobj.spos[0]+'px'; zxcobj.style.top=zxcobj.spos[1]+'px'; if (Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])>Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])){ zxcobj.xr=1; zxcobj.yr=Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])/Math.abs(zxcobj.fpos[1]-zxcobj.spos[1]); } else { zxcobj.yr=1; zxcobj.xr=Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])/Math.abs(zxcobj.fpos[0]-zxcobj.spos[0]); } zxcObj=zxcobj; zxcobj.xpol=1; zxcobj.ypol=1; if (zxcobj.fpos[0] 0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol // Move Objects (19-Jan-2006) // by Vic Phillips http://www.vicsjavascripts.org.uk/ // zxcMoveTo('Tst1',400,300,4,50); // parameter 0 - the object or the ID of the object to move (object or string ID) // parameter 1 - the new Horizontal(X) position (digits) // parameter 2 - the new Vertical(Y) position (digits) // parameter 3 - optional the move increment (digits) // parameter 4 - optional the move delay (digits) var zxcCnt=0; var TO; function zxcMoveTo(zxcobj,zxcx,zxcy,zxcinc,zxcdly){ if (typeof(zxcobj)=='string'){ var zxcobj=document.getElementById(zxcobj); } if (!zxcobj.oop){ zxcobj.oop=new zxcOOPMove(zxcobj); zxcobj.oop.inc=zxcinc||1; zxcobj.oop.dly=zxcdly||100; } if (zxcobj.oop.stop){ zxcobj.oop.stop=false; } else { zxcobj.oop.stop=true; } zxcobj.oop.inc=zxcinc||zxcobj.oop.inc; zxcobj.oop.dly=zxcdly||zxcobj.oop.dly; clearTimeout(zxcobj.oop.to); zxcobj.spos=[zxcPos(zxcobj)[0],zxcPos(zxcobj)[1]]; zxcobj.fpos=[zxcx,zxcy]; zxcobj.style.position='absolute'; zxcobj.style.left=zxcobj.spos[0]+'px'; zxcobj.style.top=zxcobj.spos[1]+'px'; if (Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])>Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])){ zxcobj.xr=1; zxcobj.yr=Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])/Math.abs(zxcobj.fpos[1]-zxcobj.spos[1]); } else { zxcobj.yr=1; zxcobj.xr=Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])/Math.abs(zxcobj.fpos[0]-zxcobj.spos[0]); } zxcObj=zxcobj; zxcobj.xpol=1; zxcobj.ypol=1; if (zxcobj.fpos[0] 0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol // Move Objects (19-Jan-2006) // by Vic Phillips http://www.vicsjavascripts.org.uk/ // zxcMoveTo('Tst1',400,300,4,50); // parameter 0 - the object or the ID of the object to move (object or string ID) // parameter 1 - the new Horizontal(X) position (digits) // parameter 2 - the new Vertical(Y) position (digits) // parameter 3 - optional the move increment (digits) // parameter 4 - optional the move delay (digits) var zxcCnt=0; var TO; function zxcMoveTo(zxcobj,zxcx,zxcy,zxcinc,zxcdly){ if (typeof(zxcobj)=='string'){ var zxcobj=document.getElementById(zxcobj); } if (!zxcobj.oop){ zxcobj.oop=new zxcOOPMove(zxcobj); zxcobj.oop.inc=zxcinc||1; zxcobj.oop.dly=zxcdly||100; } if (zxcobj.oop.stop){ zxcobj.oop.stop=false; } else { zxcobj.oop.stop=true; } zxcobj.oop.inc=zxcinc||zxcobj.oop.inc; zxcobj.oop.dly=zxcdly||zxcobj.oop.dly; clearTimeout(zxcobj.oop.to); zxcobj.spos=[zxcPos(zxcobj)[0],zxcPos(zxcobj)[1]]; zxcobj.fpos=[zxcx,zxcy]; zxcobj.style.position='absolute'; zxcobj.style.left=zxcobj.spos[0]+'px'; zxcobj.style.top=zxcobj.spos[1]+'px'; if (Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])>Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])){ zxcobj.xr=1; zxcobj.yr=Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])/Math.abs(zxcobj.fpos[1]-zxcobj.spos[1]); } else { zxcobj.yr=1; zxcobj.xr=Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])/Math.abs(zxcobj.fpos[0]-zxcobj.spos[0]); } zxcObj=zxcobj; zxcobj.xpol=1; zxcobj.ypol=1; if (zxcobj.fpos[0] 0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol // Move Objects (19-Jan-2006) // by Vic Phillips http://www.vicsjavascripts.org.uk/ // zxcMoveTo('Tst1',400,300,4,50); // parameter 0 - the object or the ID of the object to move (object or string ID) // parameter 1 - the new Horizontal(X) position (digits) // parameter 2 - the new Vertical(Y) position (digits) // parameter 3 - optional the move increment (digits) // parameter 4 - optional the move delay (digits) var zxcCnt=0; var TO; function zxcMoveTo(zxcobj,zxcx,zxcy,zxcinc,zxcdly){ if (typeof(zxcobj)=='string'){ var zxcobj=document.getElementById(zxcobj); } if (!zxcobj.oop){ zxcobj.oop=new zxcOOPMove(zxcobj); zxcobj.oop.inc=zxcinc||1; zxcobj.oop.dly=zxcdly||100; } if (zxcobj.oop.stop){ zxcobj.oop.stop=false; } else { zxcobj.oop.stop=true; } zxcobj.oop.inc=zxcinc||zxcobj.oop.inc; zxcobj.oop.dly=zxcdly||zxcobj.oop.dly; clearTimeout(zxcobj.oop.to); zxcobj.spos=[zxcPos(zxcobj)[0],zxcPos(zxcobj)[1]]; zxcobj.fpos=[zxcx,zxcy]; zxcobj.style.position='absolute'; zxcobj.style.left=zxcobj.spos[0]+'px'; zxcobj.style.top=zxcobj.spos[1]+'px'; if (Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])>Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])){ zxcobj.xr=1; zxcobj.yr=Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])/Math.abs(zxcobj.fpos[1]-zxcobj.spos[1]); } else { zxcobj.yr=1; zxcobj.xr=Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])/Math.abs(zxcobj.fpos[0]-zxcobj.spos[0]); } zxcObj=zxcobj; zxcobj.xpol=1; zxcobj.ypol=1; if (zxcobj.fpos[0] 0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol // Move Objects (19-Jan-2006) // by Vic Phillips http://www.vicsjavascripts.org.uk/ // zxcMoveTo('Tst1',400,300,4,50); // parameter 0 - the object or the ID of the object to move (object or string ID) // parameter 1 - the new Horizontal(X) position (digits) // parameter 2 - the new Vertical(Y) position (digits) // parameter 3 - optional the move increment (digits) // parameter 4 - optional the move delay (digits) var zxcCnt=0; var TO; function zxcMoveTo(zxcobj,zxcx,zxcy,zxcinc,zxcdly){ if (typeof(zxcobj)=='string'){ var zxcobj=document.getElementById(zxcobj); } if (!zxcobj.oop){ zxcobj.oop=new zxcOOPMove(zxcobj); zxcobj.oop.inc=zxcinc||1; zxcobj.oop.dly=zxcdly||100; } if (zxcobj.oop.stop){ zxcobj.oop.stop=false; } else { zxcobj.oop.stop=true; } zxcobj.oop.inc=zxcinc||zxcobj.oop.inc; zxcobj.oop.dly=zxcdly||zxcobj.oop.dly; clearTimeout(zxcobj.oop.to); zxcobj.spos=[zxcPos(zxcobj)[0],zxcPos(zxcobj)[1]]; zxcobj.fpos=[zxcx,zxcy]; zxcobj.style.position='absolute'; zxcobj.style.left=zxcobj.spos[0]+'px'; zxcobj.style.top=zxcobj.spos[1]+'px'; if (Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])>Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])){ zxcobj.xr=1; zxcobj.yr=Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])/Math.abs(zxcobj.fpos[1]-zxcobj.spos[1]); } else { zxcobj.yr=1; zxcobj.xr=Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])/Math.abs(zxcobj.fpos[0]-zxcobj.spos[0]); } zxcObj=zxcobj; zxcobj.xpol=1; zxcobj.ypol=1; if (zxcobj.fpos[0] 0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol // Move Objects (19-Jan-2006) // by Vic Phillips http://www.vicsjavascripts.org.uk/ // zxcMoveTo('Tst1',400,300,4,50); // parameter 0 - the object or the ID of the object to move (object or string ID) // parameter 1 - the new Horizontal(X) position (digits) // parameter 2 - the new Vertical(Y) position (digits) // parameter 3 - optional the move increment (digits) // parameter 4 - optional the move delay (digits) var zxcCnt=0; var TO; function zxcMoveTo(zxcobj,zxcx,zxcy,zxcinc,zxcdly){ if (typeof(zxcobj)=='string'){ var zxcobj=document.getElementById(zxcobj); } if (!zxcobj.oop){ zxcobj.oop=new zxcOOPMove(zxcobj); zxcobj.oop.inc=zxcinc||1; zxcobj.oop.dly=zxcdly||100; } if (zxcobj.oop.stop){ zxcobj.oop.stop=false; } else { zxcobj.oop.stop=true; } zxcobj.oop.inc=zxcinc||zxcobj.oop.inc; zxcobj.oop.dly=zxcdly||zxcobj.oop.dly; clearTimeout(zxcobj.oop.to); zxcobj.spos=[zxcPos(zxcobj)[0],zxcPos(zxcobj)[1]]; zxcobj.fpos=[zxcx,zxcy]; zxcobj.style.position='absolute'; zxcobj.style.left=zxcobj.spos[0]+'px'; zxcobj.style.top=zxcobj.spos[1]+'px'; if (Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])>Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])){ zxcobj.xr=1; zxcobj.yr=Math.abs(zxcobj.fpos[0]-zxcobj.spos[0])/Math.abs(zxcobj.fpos[1]-zxcobj.spos[1]); } else { zxcobj.yr=1; zxcobj.xr=Math.abs(zxcobj.fpos[1]-zxcobj.spos[1])/Math.abs(zxcobj.fpos[0]-zxcobj.spos[0]); } zxcObj=zxcobj; zxcobj.xpol=1; zxcobj.ypol=1; if (zxcobj.fpos[0] 0)||(parseInt(this.obj.style.left)>this.obj.fpos[0]&&this.obj.xpol

Pak Hong Man · Answer

I have found the solution by myself. The solution is as follows: ## The commended code can find the panel or datagrid css elements // The Style property of the MyText control returns // a CssStyleCollection object. // IEnumerator keys = this.pnlProcedure.Style.Keys.GetEnumerator(); // // while (keys.MoveNext()) // { // String key = (String)keys.Current; // String valuee = (String)pnlProcedure.Style[key]; // Response.Output.Write(" alert('" + key + valuee + "') "); // } //Response.Output.Write(" alert('" + this.dgProcedure.Style["Height"] + "') "); ###### Then at the pageload, Use the dataset.tables.rows.count as the offset then mutiple the row width ###### int intProcedureHeight = this.mb_objDataSet.Tables["tabProcedureDICA"].Rows.Count * 40; int intInstructionHeight = this.mb_objDataSet.Tables["tabInstructionDI"].Rows.Count * 50 + intProcedureHeight + 50; this.pnlInstruction.Style["Top"] = intProcedureHeight.ToString(); this.pnlRecord.Style["Top"] = intInstructionHeight.ToString();

Mahesh Chand · Answer

You may want to put your DataGrid controls in a TR/TD of a Table.