I give an example of how we can do the same thing with little of coding. It just requires a few CSS Style attributes used along with Javascript.
This in place is a Client only without any server postback with Ajax. For including the Ajax functionality, we can jus make an extra function call to send the edited text to the server, in the onclick event of the Save button.
Here is the example:
Here is the code that makes this live:
<div id="inplace">
<input type="text" value="In place edit"
oldvalue="" id="inplacetext"
style="border: none;
font-family: Tahoma; font-size: 10pt;
font-weight: bold;
background-color: #FAFAFA;
color: #336699;"
onmouseover="this.style.backgroundColor='#EEEEEE';" onmouseout="this.style.backgroundColor='#FAFAFA';"
onfocus="document.getElementById('ipbuttons').style.display='block'; this.oldvalue=this.value; this.style.border='solid #333333 1px';" />
<div id="ipbuttons" style="display: none; margin-top: 10px;">
<input type="button" value="Save"
onclick="
document.getElementById('inplacetext').oldvalue=document.getElementById('inplacetext').value;
document.getElementById('inplacetext').blur();
document.getElementById('inplacetext').style.border='none';
document.getElementById('ipbuttons').style.display='none';" />
<input type="button" value="Cancel"
onclick="
document.getElementById('inplacetext').value=document.getElementById('inplacetext').oldvalue;
document.getElementById('inplacetext').blur();
document.getElementById('inplacetext').style.border='none';
document.getElementById('ipbuttons').style.display='none';" />
</div>
</div>
Have Fun :)