Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

This demo shows on how to create an "Editable" Label in the page. As we all know, a Label control is intended for displaying read-only data information in the page and thus we cannot make it editable just like the TextBox control. As a workaround we can create a floating Div/Panel with a TextBox. Clicking on the Label will display a Div with a TextBox on it and a Button for updating the Text in the Label. In this demo, i used JavaScript  for manipulating the elements in the page and apply a little bit of CSS for setting up the styles.

Note that I did not include here on how we are going to save the value in the database.

Here are the code blocks below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Editable TextBox Demo</title>

    <script type="text/javascript">

       

        function ShowEditBox()

        {

            document.getElementById('EditContainerDiv').style.display = "block";

            document.getElementById('Label1').style.display = "none";

           

            document.getElementById('TextBox1').value = document.getElementById('Label1').innerHTML;

           

            return false;

        }

       

        function HideEditBox()

        {

            document.getElementById('EditContainerDiv').style.display = "none";

            document.getElementById('Label1').style.display = "block";

           

            document.getElementById('Label1').innerHTML = document.getElementById('TextBox1').value;

           

            return false;

        }

    </script>

    <style type="text/css">

        .ContainerStyle

        {

            float:left;

            position: absolute;

            z-index:2;

            display:none;

            background-color:Gray;

            top: 20px;

            left: 10px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Label ID="Label1" runat="server" Text="Input Something Here" style="display:block;" onclick="return ShowEditBox();"/>

        <div id="EditContainerDiv" class="ContainerStyle">

            <asp:TextBox ID="TextBox1" runat="server"/> <br />

            <asp:Button ID="Button1" runat="server" Text="Update" OnClientClick="return HideEditBox();"/>

            <asp:Button ID="Button2" runat="server" Text="Close" OnClientClick="return HideEditBox();" />

        </div>

    </div>

    </form>

</body>

</html>

 

Running the page will give us this output below:

 

Clicking on that Label will display a Div as shown below:

 

As you can see, the TextBox automatically fills the Text that was displayed from the Label Control. From there, we can now edit a new value to the TextBox and clicking on the Update Button will automatically hide the Div and show the edited value in the Label.

 

That's Simple! Hope you will find this example useful!

Technorati Tags: ,,
Posted on Tuesday, June 9, 2009 7:45 PM ASP.NET , JavaScript , Tips&Tricks | Back to top


Comments on this post: Creating an Editable Label in ASP.NET

# re: Creating an Editable Label in ASP.NET
Requesting Gravatar...
Dude, there is NO SUCH THING as OnClick for a label.
Left by Matt on Jul 20, 2009 4:02 AM

# re: Creating an Editable Label in ASP.NET
Requesting Gravatar...
@Matt,

There's no server side onlick event to a label control but we could inject a javascript onlick event on it just like I did.
Left by Vinz on Dec 05, 2010 9:17 PM

# re: Creating an Editable Label in ASP.NET
Requesting Gravatar...
dude!,i found some mistake which is when u delete text then div would not display
Left by sagar on Feb 01, 2011 5:48 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net