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