CodeCharge Studio
search Register Login  

Visual Web Reporting

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Editable Grid Trick

Print topic Send  topic

Author Message
smokingguns


Posts: 51
Posted: 09/17/2009, 2:33 PM

Hey all,
Just wanted to share a trick with you all.
I was using an editable grid to display a list of users on page.
The powers that be at my workplace wanted me to change the design to where the data would be all labels, but editable. So here is my solution(I dont know if somebody has already implemented this):

Lets say the editable grid has 2 columns: First Name, Last Name and the name of the editable grid is 'users'. The name of the elements is "fname" and "lname"
Code charge generates the following HTML code for the elements:


<input id="usersfname_{users:rowNumber}"  style="DISPLAY: none"  size="30" value="{fname}" name="{fname_Name}">  
  
<input id="userslname_{users:rowNumber}"  style="DISPLAY: none"  size="30" value="{lname}" name="{lname_Name}">  

The display property of these elements has been set to "none" by me.
Now add the following HTML code next to the HTML code for the "fname" and "lname" elements respectively:
<label ondblclick="showelements(this);" id="flabel_{users:rowNumber}" title="Double click to edit "></label>
and
<label id="llabel_{users:rowNumber}" ></label>

Now add the foll functions just before the '</body>' tag:
  
function setLabel(obj,col){  
  
z=obj.id.substr(11); // retrieve the row  
   if(document.getElementById(z).getAttribute("name")=="FillRow"){  
        if(lbl=="1")  
    	document.getElementById("flabel_"+z).innerHTML=document.getElementById      ("usersfname_"+z).value.toUpperCase();  
        else if(lbl=="2"){  
		document.getElementById("llabel_"+z).innerHTML=document.getElementById      ("userslname_"+z).value.toUpperCase();  
        }  
  }  
}  
  
function showelements(lblObj){  
z=lblObj.id.substr(7);// retrieve the row  
  
document.getElementById("flabel_"+z).innerHTML="";  
document.getElementById("llabel_"+z).innerHTML="";  
document.getElementById("usersfname_"+z).style.display="block";  
document.getElementById("userslname_"+z).style.display="block";  
  
  
  
}  

On the Onload event of the "fname" and "lname" elements, add the following code respectively
  
setLabel(this,"1") // for fname  
setLabel(this,"2") // for lname  
  

So basically when the page loads, we see "first name" and "last name" labels. When somebody double-clicks on the "first name" label, the text boxes storing the "first name" and "last name" become visible for editing. If you update the values, the updated values are again displayed as labels. So no ugly textboxes, just plain HTML labels for display.
View profile  Send private message
datadoit
Posted: 09/17/2009, 2:54 PM

Neat idea. Thanks for sharing.
jjrjr1


Posts: 942
Posted: 09/19/2009, 8:07 AM

Very Nice


_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

Web Database

Join thousands of Web developers who build Web applications with minimal coding.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.