CodeCharge Studio
search Register Login  

Visual Web Reporting

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

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Editable Grid Trick

Print topic Send  topic

Author Message

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>
<label id="llabel_{users:rowNumber}" ></label>

Now add the foll functions just before the '</body>' tag:
function setLabel(obj,col){; // retrieve the row  
    	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){;// retrieve the row  

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
Posted: 09/17/2009, 2:54 PM

Neat idea. Thanks for sharing.

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

Very Nice

John Real - More CodeCharge Studio Support at -
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

Web Database

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

Home   |    Search   |    Members   |    Register   |    Login

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