Encosia - ASP.NET, AJAX, jQuery, and more

Inline Edit Box .NET

InlineEditBox.net is a .NET control that adds in-line text editing capabilities with one line of code. This is great for forms and administrative areas giving you the possibility to edit a piece of text inline, and submitting it not via a submit button, but instead with AJAX.

Current version available on CodePlex: Inline Edit Box .NET

The control extends the standard ASP.net TextBox control, so you have access to all the normal properties of the TextBox.

InlineEditbox Properties

string LabelCssClass: Determines the CssClass to be applied to the label. Defaults to “”.

string LabelHoverCssClass: Determines the CssClass to be applied on the label’s mouseover. Defaults to “”.

string CssClass: Determines the CssClass to be applied to the textbox.

string DefaultBlankText: Determines the label’s text to be displayed when a user inputs String.Empty into the textbox. Defaults to “(Click to enter text)”.

Boolean CallBackOnBlur: Enables or disables the CallBackFunction (javascript function) to be executed on the textbox’ blur event. Defaults to false.

string CallBackFunction (required if CallBackOnblur = true): Refers to the javascript function to be called on the textbox’s blur event. Defaults to “”. Returned values to the callback function are newText (the newly entered text from the textbox) and referrer (the ID of the InlineEditBox control that spawned the call back).

Boolean CallBackIfIdentical: Enables or disables the CallBackFunction to be called whether the textbox value has changed or not. Defaults to false.

Boolean ResizeTextboxWidth: Enables or disables the resizing of the textbox width to that of the label (upon click). Defaults to false;

Boolean ResizeTextboxHeight: Enables or disables the resizing of the textbox height to that of the label (upon click). Defaults to true;

Boolean TrapEnterKey: Enables or disables enter key trapping, if enabled, the textbox blur() function will be called. Defaults to true;

Boolean TrapShiftEnterKey: Enables or disables shift+enter key trapping, if enabled, the blur() function will not be called if the SHIFT key is pressed with the ENTER key. Defaults to true.

Boolean TrapEscapeKey: Enables or disables escape key trapping, if enabled, pressing the ESCAPE key will cancel the edit and reset the text to its original value. Defaults to true.

InlineClickMode ClickMode: enum [SingleClick|DoubleClick] – Determines the click method for the textbox. Defaults to SingleClick

InlineEditBoxMode Mode: enum [AdminMode|DisplayMode] – If DisplayMode, the inline edit will be disabled. Defaults to AdminMode

string ClientIDSuffix: Inserts specified value to end of ID to allow for use within a Repeater/Web Control object. Defaults to String.Empty


v0.5 (09/12/2007)

  • First official release!
  • Line breaks (in multiline textbox’s) are converted correctly into <br />’s.
  • Unnecessary javascript removed. Javascript output is trimmed substantially.
  • Page Postbacks and server-side Text retrieval (object.Text) correctly working!

v0.6 (09/17/2007)

  • Added option for single click or double click (new Public Property called ClickMode: enum [SingleClick|DoubleClick])

v0.7 (10/29/2007)

  • Added “ClientIDSuffix” property to allow for repeater/web control objects.
  • Added “Mode” property. Allows to specify “Admin” or “Display” modes.
  • Fixed PostBack issues with regards to control properties.

v0.9 (11/19/2007)

  • Fixed rendering issue in Design Mode.
  • Fixed apostrophe bug.
  • Fixed colon/space bug in Suffix property.
  • Added update panel example in Demo.

Known Issues

None so far.

Tested On

IE 6+


– Degrade gracefully for non-javascript enabled browsers. (Almost complete)

InlineEditBox.net is free! Use it, live it, love it. The more feedback I get, the better this control will continue to grow so leave feedback people! That’s all for now.


6:12 am - August 30, 2007

That’s a very interesting technique. I wish there was a Toolkit extender that did the same thing and wraps it up.

Reply to this comment
3:06 am - September 3, 2007

Has anybody make a Ajax Extender for this beautiful feature?

Reply to this comment
Mike D
6:06 pm - September 3, 2007

if you guys are interested I’ll take a stab at it, I’ve made more than a handful of Ajax Toolkit Extenders so I’m pretty familiar with it and I do love this technique so I’m sure i’d use it again. If i see enough request for it i’ll do it.

Reply to this comment
8:56 pm - September 3, 2007


Reply to this comment
Mike D
12:50 am - September 4, 2007

Haha alrighty well here’s 2 scenarios I can think of…let me know what you think is better:

1) The extender would take in the “TargetID” (which you set equal to the label’s ID), and a “TextboxID” (which obviously you set equal to the textbox’s ID).. there would be a couple other options such as “Resize Textbox to Label Text”, “Use Pagemethods after blur”, “the pagemethod function to call”, then it would react much like this tutorial (with the extra options, I’ve already adapted this method to include the “What can make this better section” so all those suggestions will be included as well (such as capture for the escape key, resizing, etc). Also, I’m not sure if the author is aware, but the “enter” keypress detection is strictly for IE, so for us FireFox users it won’t work, I corrected that as well.

* Cons: You need an extender for EVERY “in line edit” you have in your form.

Option 2) It would be more along the lines of how I am using it now in a couple of my projects, where it would be more like a javascript library (although i would still wrap it neatly in an extender) but instead of taking a targetID and textboxID, it would take a CssClass, loop through the (for the asp:labels) with that cssclass, and its corresponding asp:textbox with that cssclass and do the necessary javascript. Again this will still include all the extras talked about above.

* Pros: You only need 1 extender on your form to add the functionality.

* Cons: The textbox’s would need to have the same ID name as it’s corresponding label (except with a prefix, e.g. ‘txt’ + the label ID), and you would provide that prefix to the extender. Also if you were to use the PageMethod technique on blur, then only one PageMethod could be used and would have to be setup in a certain way to except paramaters specifying where it came from (what in-line-edit).

Let me know what you guys rather want, personally I like the 2nd choice (mostly because I’ve already been doing it that way) but also because I’m weary to have so many extenders on the page for performance wise. If I did a crappy job of explaining the 2 options let me know and I’ll try again :P. Again it’s up to you guys, so let me know!

Reply to this comment
10:24 am - September 4, 2007

If it were me I think I’d go for the first option, at least as long as it’s an extender. I doubt that you’d have enough of these on a page to become an issue, and you’d be leveraging the existing “TargetControlID” convention that everyone’s accustomed to.

I’ve been thinking it might be more suited to being a stand alone control though.

Also, I’m not sure if the author is aware, but the “enter? keypress detection is strictly for IE, so for us FireFox users it won’t work, I corrected that as well.

It does work in FireFox how I’ve shown above (I use FireFox 99% of the time myself). That “event” argument isn’t the DOM object, but an abstracted class that the framework provides in $addHandler event handlers. The event.keyCode property works cross browser without any extra work.

Reply to this comment
Mike D
11:29 am - September 4, 2007

Gotchya, I had modified the addHandlers because again I was looping through the controls with a specific CSS class so I had to pass a paramater to my click, blur, and keydown functions so I know what edit-in-place object it’s coming from, therefore I had to detect if IE or firefox and use event.keyCode or e.which and assumed that you had to do the same for your code, so I apologize for making that assumption. The reason why I am doing it is for an admin center on an e-Commerce website, so the owners can edit their products “in place” and see how it’s going to look without having to click a “preview” or “save” and go to the product’s page. Because of this there are quite a few edit-in-place areas and I think having that many extenders would bulk up the site and its performance. Also I am not performaing a PageMethod update after every edit (although I do like that feature) because of the many edit-in-place objects, but instead displaying a “Changes have not been saved” message and providing a Save button both at the top and bottom that saves everything at once (using a PageMethod or WebService call).

Reply to this comment
Mike D
11:43 am - September 4, 2007

Also Dave, when you say stand alone control, do you mean not using the Ajax Toolkit? If so then I’d really go with option 2 I described above because it won’t use TargetID and TextboxID.

Reply to this comment
11:51 am - September 4, 2007

When I say standalone, I mean you’d drop a control on the page that had a single .Text property and the control would abstract the rest out. At that point, neither option would be necessary for the developer using the control.

Reply to this comment
Mike D
12:02 pm - September 4, 2007

I get exactly what you’re saying, and I actually like that idea better, what does everybody else think?

Reply to this comment
Mike D
10:02 pm - September 5, 2007

Alright…going for it, keep u guys updated.

Reply to this comment
11:18 pm - September 5, 2007

Sounds good. Let me know if I can be any help.

Reply to this comment
Eric Krause
11:45 am - September 6, 2007

Just found this today, I would also be interested in the extender. Good luck.

Reply to this comment
Mike D
12:40 pm - September 6, 2007

Development’s coming good…stay tuned guys, should have somethin today or tomorrow.

Reply to this comment
Mike D
11:04 pm - September 6, 2007

Alrighty guys, first release: http://encosia.com/index.php/downloads/inline-edit-box-net/. The javascript that gets injected is somewhat bulky (in my eyes) so I plan in the future slimming it down and obfuscating it. But test it, break it, suggest it, do whatever you’d like with it..let me know how it goes!

Oh and here’s the documentation (also included in the rar):

InlineEdit v0.01
Author: Michael Davis

Public Properties:
string LabelCssClass
-> Applies the specified stylesheet to the label.
-> Defaults to “”.

string LabelHoverCssClass
-> Apples the specified stylesheet when the mouse hovers over the label.
–> Defaults to “”.

string TextboxCssClass
-> Applies the specified stylesheet to the textbox.
–> Defaults to “”.

TextBoxMode TextMode
-> Applies the specified TextMode to the textbox.
–> Defaults to TextBoxMode.SingleLine.

string ID
-> The ID of the control (required)
–> Defaults to “”.

string DefaultBlankText
-> Sets the label text to the specified value when a user inputs String.Empty into the textbox.
–> Defaults to “(Click to enter text)”.

int MaxLength
-> Sets the specified int to the textbox’s MaxLength property.
–> Defaults to 0 (no limit)

string Text
-> Sets the label’s text.
–> Defaults to 0.

string CallBackFunction
-> Callback [javascript] function to be called if CallBackOnBlur property is set = true.
–> Required if CallBackOnBlur = true.
–> Returned values to the callback function are newText (the text inputted by the user) and referrer (the ID name of the Inline Edit control it came from).
–> e.g.
function CallBack(newText, referrer)
PageMethods.MyCallBack(newText, onComplete, onTimeout, onError);
–> Defaults to “”.

Boolean CallBackOnBlur
-> If set to true, will call the javascript function specified in CallBackFunction property.
–> Defaults to false.

Boolean CallBackIfIdentical
-> If set to true, will call the javascript function specified in CallBackFunction property regardless if the text specified is different from the original label’s.
–> CallBackOnBlur & CallBackFunction must be set to true and specified.
–> Defaults to false.

Boolean ResizeTextboxWidth
-> Resizes the textbox width to that of the label (upon click).
–> Defaults to false.

Boolean ResizeTextboxHeight
-> Resizes the textbox height to that of the label (upon click).
–> Defaults to true.

Boolean TrapEnterKey
-> Traps for the enter key, if pressed then the blur() function is called.
–> Defaults to true.

Boolean TrapShiftEnterKey
-> Traps for the SHIFT+enter keystrokes and if pressed, performs the windows default action.
–> Good for textarea’s (Multiline) to allow for line breaks.
–> Defaults to true.

Boolean TrapEscapeKey
-> Traps for the escape key, if pressed then action is canceled and text refer’s back to original label text.
–> Defaults to true.

-> None know of so far.

-> In firefox, the function that replaces line-breaks/new lines in textarea’s (and converts them to ‘s [and vice versa] is not working correctly.

-> IE 6
-> IE 7
-> FF

Reply to this comment
9:14 am - September 7, 2007

Awesome! nice job.

Reply to this comment
1:31 pm - September 7, 2007

That looks like a great start.

I’d suggest sticking with $addHandler (it does provide information about which object is sending the event, in its argument: evt.target). By making a straight assignment to textbox.onkeydown, you overwrite any other keydown handlers that are set up, which could cause undesirable interactions. For instance, if the developer wanted a masked inline edit by mixing this with a masked field script.

There are also functions built into the ASP.NET AJAX client-side framework for add/remove CSS class, and getting an element’s bounds. You could probably trim down the JavaScript size by using those.

Reply to this comment
Mike D
2:10 pm - September 7, 2007

Good good, im also contemplating taking out some of the javascript helper functions used by the .dll and sticking it into its own .js file and just including that in the page because I usually have 10+ “inline edits” so I dont want unnecessary duplications of javascript functions that will bulk up the request.

Come on people…lets hear some feedback and suggestions.

Reply to this comment
Mike D
2:15 am - September 11, 2007

just trimmed out the unnecessary javascript so now it only contains init(), and the event handlers click(), blur(), and keydown().

now working on maintaining text changes through postbacks and providing a public “Text” attribute so if you wanted you could use it on the server side (after a postback) to get the label’s text.

Reply to this comment
Rory Fitzpatrick
1:24 pm - September 12, 2007

This is great but theres a few things I don’t like from an accessibility point of view:

1. Why fill the Label with the initial value? It would be much better to give the TextBox the value, then if the user doesn’t have javascript they can still edit it.

2. On a similar line to 1, add a submit button that has a server side click handler and hide this on page load.

3. Why have the label at the start at all? Just create the DOM element at page load time and add it after the text box.

Just a few nitpickings that I think would turn it into a really elegant solution. Also this way you could easily turn it into an extender control that could be used with any text box just by giving its ClientID (something I’ve seen elsewhere, can’t remember where it was now….)

Reply to this comment
3:03 pm - September 12, 2007

Those are good ideas. I had considered manipulating the DOM dynamically to reduce footprint, but decided against complicating the example.

Reply to this comment
Mike Davis
7:21 pm - September 12, 2007

Rory, great tips.

I decided to take your advice along with others and completely rewrote the control.

It now extends the standard Textbox control and now a web control.

* Changes
– Changed the name to “InlineEditBox”
– TextBoxCssClass is now just CssClass

* Updates/Fixes
– Newlines/Linebreaks (in Textbox.Multiline Mode) are converted correctly in FireFox.
– Eliminated the unnecessary HiddenField object.
– Cut down on javascript, runs faster.
– The “Label” is now added dynamically through the DOM so the only control created on the server side (and viewstate) is the textbox (which will aid in graceful downgrading [yet to be added])
– POSTBACK COMPLETELY WORKS (including accessing the Control.Text Property on postback (such as a button) to retrieve the new text.

Included is a demo project, updated from the last to showcase the changes.

I emailed Dave, he’ll add the .rar file to his server and post the link below.. once up let me know guys.

– Mike

Reply to this comment
4:44 pm - September 17, 2007

I’ve being doing something less elegant for a while but, this is really great. The only suggestion I might have would be to make it a double-click instead of a single click to enter edit mode. I don’t know how this would be done exactly but, it would then still allow you to select text, click on links and basically interact with the text.

Reply to this comment
Mike D
4:56 pm - September 17, 2007

jstengel, great comment…will be implemented in the next version.

Reply to this comment
12:05 pm - September 19, 2007

This is really great! Keep up the good work. Please make the double-click an option. I do not like that approach. Second I would be very grateful for an example how to create the postback method. After “on blur” event I would like my code behind method to be called that saves the textbox value to the database. How to do this? I’m a totally AJAX newbie.

Reply to this comment
Bacha Saqao
12:33 pm - September 19, 2007

There seems to be a problem when using this control within a repeater. I am using two InlineEditBox controls in my Repeater ItemTemplate… but for some reason only the first RepeaterItem is rendered, while the others are completely empty (no value and no control). Has anyone else had this problem?

Reply to this comment
11:17 am - September 20, 2007

@Bacha Saqau

Yes. I had a similar issue. I had created a usercontrol that contained this control. My plan with the usercontrol was to have the ability to choose between Admin & Display mode (a feature that would be nice to see in this control). I had to generate a unique ID for each InlineEditBox control inside of each instance of the user control that contained the InlineEditBox control. Essensially, I setup a ClientID property in my usercontrol that would let me assign a unique ID to the InlineEditBox control. In a repeater, you would have to do something similar. Wrap the control in a usercontrol so you can assign a unique ID through a property.

Reply to this comment
Bacha Saqao
6:07 pm - September 20, 2007

Re: jstengel

Thanks for the tip. I’ll give that a try. If all else fails, I suppose I can implement my own.

Reply to this comment
Mike D
1:21 pm - September 28, 2007

hey guys, sorry for the delayed response as i have been crazy busy. I will go ahead and implement the Admin/Display mode as I too think that is a great idea. As for the repeater, I’ll go ahead and test it and see if I can’t come up with a solution in the control itself (so you dont have to wrap it in a usercontrol). keep the suggestions comin!

Reply to this comment
11:16 pm - October 19, 2007

Just subscribing … I love this thing. I do have a question however:

I am putting this into a user control, which is called many times on a page for individual transitional copy. The first control appears fine, however the subsequent ones do not show up. I just ran across this and haven’t really checked anything out yet, would there be anything that comes to mind when repeatedly instantiating this as an individual call to it as a UC?

Great stuff here, love it love it love it.

Reply to this comment
9:36 am - October 22, 2007

I get an error in visual studio when trying to add this control to the toolbox. I’m still new to .NET but this control would come in very handy for me.
The error I get is as follows:

There was an error loading types from assembly ‘/InlineEditBox.dll’
‘Request for the permission of type ‘System.Web.AspNetHostingPermision, System, Version=, Culture=neutral, PublicKeyToken=’ failed’.

It also says; ‘for more information click the help button’, but there is only an OK button :)

Any suggestions?

Thanks in advance,

Kevin Ott

Reply to this comment
2:53 am - October 23, 2007

I seem to have solved this problem by not placing my project on a network share…

Reply to this comment
Mike D
1:42 pm - October 29, 2007

Hey everyone, man has the last month been hectic! I’ve spent more time in my car and hotels than I have my home, but enough with me… I finally found time to work on the control! So introducing v0.7, I have emailed Dave and he will get it up as soon as he can. Once he does I will make the necessary changes to the documentation up top but the major changes are:

Added a “ClientIDSuffix” property which will allow you to specify a suffix to be added to the end of the ID (for use in Repeater and Web Control objects).

Added a “Mode” property for “Admin” or “Display” modes.

Fixed some Viewstate & Postback bugs.

The demo project showcases how you go about using a repeater, and playing around with the properties in postback events.

Enjoy, and please leave feedback. Thanks.

Reply to this comment
2:13 pm - October 29, 2007

Awesome! Can’t wait to get my hands on it and test it out. I have the perfect project for it as well. Thanks for working on this.

Reply to this comment
6:38 pm - October 29, 2007

Version 0.7 is available via the download link above. Thanks for the great work, Mike!

Reply to this comment
1:31 pm - October 30, 2007

I’m really liking the new options.

Once little problem I’ve run across though… If the incoming text has an apostrophe in it, the control will break.

To reproduce in the download sample:

Line 17: ieLastName.Text = “O’Toole”;

Reply to this comment
2:23 pm - October 30, 2007

Mike D — Thank you very much for putting the time into this… any chance of release on source code? That way, if you disappear, or we need to tap into it, we can.

One thing I noticed with the Client ID Suffix is that if the suffix has a “:” colon in it, it also breaks, so when I’m adding suffixes to my control i take my Suffix string and do a .Replace(“:”,””) and a .Replace(” “,””) to take out the spaces and colons.

Also having a problem with the text in a multi-line textbox not wrapping. Not sure if this is a “me” problem or not yet, haven’t spent too much time on it.

Regardless, Kudos, Mike D.

Reply to this comment
6:31 am - November 12, 2007

Great control, is just what I was after! But (there’s always a but…)

I’ve got an issue when there’s an updatepanel elsewhere on the page. It appears that the .init(); function is called again when the page is refreshed (async’ly) as the span that contains the label text is rendered twice. Using the pageLoad() client event checking for isPartialLoad might get around this?

Reply to this comment
7:02 am - November 12, 2007

As a hack I called this in the load event:

function stripIEBDuplicates()
var s = document.getElementsByTagName(‘span’);
for (var i=0;i<s.length;i++)
if(s[i].id.indexOf(‘lblieb’) != -1)
var ieb = s[i];
if(ieb.rendered != true) { ieb.rendered = true; }
else { ieb.style.display = ‘none’; }

Reply to this comment
8:26 am - May 29, 2009

To solve the problem I modified the RenderControl method in InlineEditBox.cs like this:

if (HttpContext.Current != null)
string script = BuildInitScript();
if (!ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)
ScriptManager.RegisterStartupScript(this.Page, typeof(Page), this.ID + “client”, script, true);

Hope this helps somebody.

Reply to this comment
8:43 pm - November 13, 2007

A fix for the apostrophe issue would be greatly appreciated! This is an awesome control. Thank you for sharing! :)

Reply to this comment
9:24 pm - November 15, 2007

GREAT TOOL…Awesome….
Keep up the good work!!!!

Reply to this comment
12:15 pm - November 16, 2007

When I open your demo in design mode I get a Render Control Error.

Reply to this comment
11:33 am - November 19, 2007

Even after i add an ID to the panel.

Reply to this comment
Mike Davis
5:09 pm - November 19, 2007

hey guys, back after another longg 3 weeks. My apologies for not responding to your requests sooner. Although I do not respond does not mean I am not listening however. So I just uploaded version 0.9. Not too many changes other than some of the bug fixes requested above.

jstengel — I went ahead and fixed this bug (it does not replace the ‘s so you can continue inserting them).

Neil — I could not replicate the bug you were getting with the UpdatePanels, and so I have included in the Demo the InlineEditBox within an actual UpdatePanel (the demo sets the box’s text to the current time) to show it working inside an UpdatePanel. If you are still getting the bug you may email me with more detail.

Anonymous — I went ahead and fixed the space/colon bug when present in the Suffix property.

Thanks to everyone who support this control and leave feedback. A quote comes to mind – “Given enough eyeballs, all bugs are shallow” so keep testing and leaving feedback.

– Mike

Reply to this comment
Mike Davis
5:11 pm - November 19, 2007

Also Larry — I went ahead and fixed this issue so you may now switch over to Design mode see it render, you may also no Drag-n-Drop the control from the toolbox.

Reply to this comment
5:44 pm - November 19, 2007

Hi Mike,
I have a problem while adding inlineEditBox to GridView. When the first time page loads, the rows in the Grid View show the inline boxes but when I tried to rebind the Grid with a different data the first row shows the inline editbox and other rows show just texboxes. Somehow ClientIDSuffix is not getting appended to the ID attribute. Could you please check it Mike?

Thanks a lot.

Reply to this comment
4:05 am - November 23, 2007

Charon, I am having a similar issue. Did you get around it yet?

Reply to this comment
12:53 pm - November 23, 2007

No. Not yet. I myself am a newbie in this technology and really couldn’t meddle with it. I am waiting for Mike’s response on my comment.

Reply to this comment
2:00 pm - November 23, 2007

Charan, I have sorted mine out. But I use a repeater. I don’t know whether it will work on your case or not.

First I bind the data to the repeater. Then within the repeater I do this in the item template.

Did you try this? or something similar ?

Reply to this comment
2:06 pm - November 23, 2007

having said that, I am still working on getting the data back to the database :))

Reply to this comment
2:54 pm - November 23, 2007

I did it the same way. I used template field for InlineEditBox within the gridview. The problem is that the ClientIDSuffix works normally for the first time the data gets bound to the gridview with all the rows showing InlineEditBox(es). If for example I want a different data to be displayed in the same Grid depending on a selection, then the gridview gets bound to the data but only the first row contains the InlineEditBox with textboxes in the remaining rows.If it works for you in this situation, could you please let me know? That would be of great help.


Reply to this comment
Mike Davis
6:31 pm - November 23, 2007

Charan – I was able to recreate the bug you are experiencing and I am looking into the fix for it. I will implement it into the next demo once I have fixed it. Glad you like the control, and thanks for the support.

Kem – The control provides a field for data handling. See the documentation above to implement it. Once you have the javascript function written, the easiest way is to use PageMethods inside the javascript function to send the data back to the server without a postback. You can use a webservice and expose its methods to the javascript if you are more comfortable doing that as well.

Reply to this comment
6:42 pm - November 23, 2007

Thanks Mike. I appreciate your support.

Reply to this comment
12:09 pm - February 15, 2008

Mike, any progress on fixing this bug with the suffix and the grid view? This a great component. Great job and Thanks!

Reply to this comment
5:57 am - November 25, 2007


Do you know how to raise this callback and process some server side code with this control?

Reply to this comment
5:37 pm - November 25, 2007

Can you give me some idea on how to use Page Methods. I googled for PageMethods but couldn’t find real help in it. Is it included in VS2005? Because I tried to use PageMethods.SomeFunction() name which I implemented statically in my codebehind class and I got an error message saying ‘PageMethods’ is not defined. Could you help me in understanding PageMethods?


Reply to this comment
11:17 pm - November 25, 2007

Take a look at this post to see how to use page methods with inline editing: http://encosia.com/2007/08/23/seamless-inline-text-editing-with-aspnet-ajax/

Reply to this comment
11:00 am - November 28, 2007

Could you make a .NET3.5 version for VS2008? This is one of the greatest but it didn’t work well with newly released VS2008.

Reply to this comment
Matt Duffin
10:52 pm - December 7, 2007

I’d like to second Gonewar’s comment.

I’d really love to see a version of this for the .NET Framework 3.5.

Hopefully it should just require changing the reference to System.Web.Extensions from 1.0.x to…

Reply to this comment
2:16 am - December 12, 2007

Really a great control! I’m very thankful Mike and Dave.

A quick hint for people wanting the label to look different after it is edited, but be the same if it didn’t get changed .. set the CallBackIfIdentical to “false” and then in the CallBack function add document.getElementById(referrer).nextSibling.className = ‘IEBChanged’;

create the style IEBChanged to be something different than the hover class.

On my long form, it is nice for the user to see what he/she changed visually before clicking the “save” button.

Reply to this comment
12:54 am - March 12, 2008

Love the control, and under “normal” circumstances it’s working perfect for me.

I am populating the control’s text from a DB, content that may include HTML tags. This seems to cause a problem. When you activate the control in edit mode it will only “grab” a portion of the content. For example, if the content contains html code for a list (item 1item 2) and I double click on “item 1” only the text “item 1” will appear in the text box to edit and when leaving edit mode, only “item 1” will be returned via the “result” variable.

When I used Firebug to view the page as rendered, the “hidden” textbox has the entire HTML content that should be there, but I guess it’s being “changed” during the double click handler firing.

Any thoughts on how to solve this?


Reply to this comment
6:57 pm - March 25, 2008


Reply to this comment
8:28 pm - April 2, 2008

Love the control! I am having a problem where you can see the textboxes flash and then disappear as the page loads. Other than the flash, it works perfectly. Has anyone else experienced this or know a fix? Thank you!

Reply to this comment
11:50 pm - April 3, 2008

Mike sent me the source for the control today.

I’ll try to get some bugfixes out for the issues you guys have mentioned in the comments here, ASAP.

Reply to this comment
11:54 pm - April 14, 2008

Great control, I’d love it even more if the source were available! Keep up the good work.

Reply to this comment
6:23 pm - April 15, 2008

I have the InlineEditBox control inside a UserControl, then I repeat my UserControl in a webform and the result is that only the first InlineEditBox is rendered as Label, the rest are rendered as textbox. the first has all functionality.
All controls are created with the same initialization values only change the Text.
I use ClientIdSuffix and I get the same.
any help. ??

Reply to this comment
7:55 pm - April 15, 2008

Regarding the previous post(mine) I give more information that maybe can help. This is the HTML generated in the page:


(enter data…)

The first span, the input and the second span are for the first UserControl wish have one InlineEditbox control inside, the thrid span and next input are for the other UserControl, the same as the first just repeated as you can see in the ID. I notice that in the second UserControl one span control is missing and the input control dont have the style set to display-none.
In any scenario I test the second control in rendered as textbox and not as label..

Reply to this comment
7:17 am - April 19, 2008

Hi, I just would like some feedback about the issue I’m having with your control.
The point is put the InlineEdit inside a UserControl, then repeat this user control in a webform… in all test I made the first InlineEdit is displayed ok but the rests are rendered as textbox, not as labels….
so, I’m doing something wrong or could be really a bug ??
Thanks in advance for your attention.

Reply to this comment
6:49 am - May 7, 2008


I’m using having a similar experience. I have a page with a MultiView control. In one of the views, I have a repeater, and within the repeater, there is a InlineEdit control. There is two issues:
1) Event though i assign the ClientIDSuffix it isn’t applied when the CallBackFunction is called.
2) Same experience as Alf: The first is rendered correctly, but the following are renderes as textboxes.

If you could fix this, I would be very happy. I have used the control in other parts of my code, at it is just “GREAT GREAT GREAT”



Reply to this comment
4:37 am - April 29, 2008

I’m having problems using this control in VS2008. Any plans to have a look at this? It looks like a brilliant control!

Reply to this comment
5:01 am - April 29, 2008

Hi Geoff,
I’m using the control in VS2008 without problem, I mean no problems related the interface of VS.
My only problem is using inlineedit inside a user control and inserting severals into a webform… as I already mention in posts before.

Reply to this comment
10:16 am - May 12, 2008

Does anyone know a way to allow the Tab key to focus on the next InlineEditBox if there are several on the page? It would be really nice if a user could just Tab through , for my purpose anyway, insted of having to click on the individual box each time.

Reply to this comment
1:30 pm - May 13, 2008

You should totally make this open-source. It has a lot of potential but there are a few bugs that keep it from being professional-grade. Great work though, you are the man!

Reply to this comment
2:19 pm - May 13, 2008

I’m probably going to do that. I opened a CodePlex project for it, but haven’t had a chance to jump through the hoops of getting the source uploaded yet.

Reply to this comment
5:51 pm - May 13, 2008

The source and binaries are on CodePlex now:

Inline Edit Box .NET

Have at it.

Reply to this comment
8:11 am - May 20, 2008

I’m having the same problem as a few other people have mentioned recently.

Displaying this control in a repeater isn’t appending the suffix to the ID.

I added a response.write call on the Init of the control where it appends the Suffix to the Id of the control but the ClientIDSuffix appears to be blank.

For some reason it’s not storing the suffix in the viewstate when it is set.

Could anyone shed some light on how to fix this bug?

Other than that it’s a fantastic control and simple to use!

Paul Hinett

Reply to this comment
8:27 am - May 20, 2008

Think i’ve found out why it’s not working!

It doesn’t work if you use the ObjectDataSource control, and i’m assuming the SqlDataSource or simular objects will cause the same problem.

These data source control seem to bind AFTER the page load event is called.

This for some reason isn’t playing ball with the inline edit control, maybe something to do with the order in which the events are called or whatever, i’ll leave that to the experts :-)

However, a simple fix for me at the moment is to scrap the ObjectDataSource control and manually bind the data inside my Page_Load event in the codebehind.

Hope this helps others, and get’s the bug fixed!


Reply to this comment
Sean Devlin
8:10 pm - May 21, 2008

I think I’ve got a fix for this. I just moved the concatenation of the client ID suffix into the RenderControls method. I’m not certain if this will cause unforeseen problems, but it seemed to fix my repeater issue.

I’ve never added to an open source project before; how do I go about uploading my fix?

Reply to this comment
8:29 pm - May 21, 2008

I believe you use the upload patch function to submit the updated file(s). I’m new to CodePlex myself, so I’m not 100% sure.

If you have trouble, you can always email me the changes directly and I’ll take care of it.

Reply to this comment
8:00 am - May 22, 2008

I uploaded just the file I changed; I hope that’s the right way to go about this. I haven’t had a ton of time to test it in different situations, but I should have some in the evening. I hope this fix will help some people out.

Reply to this comment
Sean Devlin
6:13 pm - May 22, 2008

I’ve played around with the control a little bit, and my change doesn’t seem to have broken anything.

If anyone needs this and cannot wait for a new release, just go into the InlineEditBox.cs file and look in the OnLoad method. There’s a line there appending the ClientIDSuffix to the ID. Take that line and move it to the beginning of the RenderControl method. I’ve done some superficial testing, and this seems to work out.

Reply to this comment
4:36 pm - May 23, 2008

Thanks, Sean. I’ll apply the patch and update the release.

Reply to this comment
8:46 am - May 20, 2008

Another problem i have noticed is I can’t seem to set the Rows property if i set the textbox mode to multiline. The columns is working but changing rows doesn’t seem to affect anything.


Reply to this comment
8:47 am - May 20, 2008

Ignore me, i set the ResizeTextboxHeight to false and this fixed it.

Reply to this comment
7:27 am - May 22, 2008

Concatenation of the client ID suffix into the RenderControls method worked perfectly thank you very much!

Is all i done was added:

just before this bit of code:


Reply to this comment
7:52 pm - May 22, 2008

Hi, I was expecting the update of the control for Repeater but… in my case I dont “repeat” the control using a DataControl, I’m creating dynamic usercontrols each one have the InlineControl inside.
I add my usercontrols to the page by LoadControl(“pathhere/ctrSection.ascx”) and then Controls.Add(ctrSection). After applying the updates I get the first InlineControl rendered as Label and the rest as TextBox… now I have all rendered as TextBox.
I debug the InlineEdit source(c# and javascript) and I notice the following:
-When I set ClientSuffix I get javascript error(missing ; before statement) in the first line of script: var ieCaption_mysuffix1 = {. due to this error not of the script is executed and the Labels are not showed.
– If I dont set the ClientSuffix I get no javascript error because only the script for first control is injected to page then the script are executed and I get the first Label correctly hiding the Textbox but not the rests of Labels and I dont know why because I dont get any other javascript error.
so, seams that the missing “;” is affecting the script but I’m not javascript fans so please can you check it ???
Thanks a lot.
I’m testing in Vista64, IIS7, IE7, Mozilla2.0.0.14.

Reply to this comment
Sean Devlin
10:18 pm - May 26, 2008

Hey guys,

I was fiddling with this over the weekend and trying to add some new functionality, but I ran into some snags. I thought I’d post here to see if anyone has any ideas.

The feature I was trying to add was dynamic resizing of the textbox, specifically in multiline mode. Basically, I wanted the textbox to initially be the same size as the label, but then to grow as the user types.

I had some success with changing the rows and cols attributes of the textarea in the keydown event, but there were some problems. The main problem was that I also wanted to style the text to a font that wasn’t fixed width. As a result, the characters didn’t really correspond to cols and rows correctly.

I guess this means I need to alter the width and height directly, but I’m not sure how to calculate these based on the current string.

Any ideas on how to attack this problem?

Reply to this comment
Sean Devlin
7:43 pm - May 27, 2008

I put a little more time into this, and I think I found a solution. I still have a lot of wrinkles to iron out, but the concept seems to work.

My solution was basically to add another span to the control with visibility set to hidden and position set to absolute. You’ll see why these are important in a second.

On the keydown event, I set the inner HTML of the hidden label to that of the textbox. Then I measure the label’s offsetWidth and offsetHeight properties and adjust the textbox’s styles accordingly. I use maxHeight and maxWidth properties to keep things from getting out of hand in any direction.

So why did we need to set those styles on the hidden label? Setting visibility to hidden differs from setting display to none in that it allows the element still to take up space in the document flow. But we don’t want this blank space crowding some other elements out, so we set its position to absolute. This takes it out of the flow, but still allows it to take up space. Now we have a fully dimensional element that doesn’t show up or affect the rest of our document.

Anyway, like I said: I have a lot of tweaking to do. The concept seems to work. I’ll let you guys know when I have something more robust.

Reply to this comment
Sean Devlin
10:15 am - June 2, 2008

Sadly, I’ve given up on this functionality. I thought I had something workable, but there were too many tiny details that didn’t seem to have any satisfying resolution. If anyone is still interested in this and wants to give it a shot, let me know.

Reply to this comment
3:28 am - May 28, 2008

Hi guys, no one try to test my situation explained above ?? repeating inlineedit in usercontrol loaded dynamically by LoadControl…
Thanks for your attention..

Reply to this comment
2:32 pm - June 13, 2008

This script is amazing; seeing as how I started learning ASP.NET (just ASP, not C#) and AJAX this week, figuring out how to do this on my own would have been a daunting task.

I’ve seen a couple people in the comments refer to saving text back to a database after it’s been updated. I just finished coding this, and since I had so much trouble figuring it out, I thought I’d share my method of doing it, so that others can (hopefully) benefit. It involves a combination of javascript and asp.net/C# code:

First off, the asp:textbox control has no useful methods for knowing when the inline text has been added (the main reason this took so long to figure out). Yes, there is OnTextChanged, but it never actually fired for me. My InlineEditBox is located inside a repeater, so it can draw from a database properly, and I added the following to it’s attributes:

In the code behind section I put in code to handle the OnLoad event:

updateMessage is the javascript function I wrote that runs when a textboxes’ blur event fires. The ClientIDSuffix and ClientID are repeater/database information I need for later.

Back on the ASP page, I added in two hidden textboxes to store the ClientIDSuffix and ClientID of the textbox that gets changed:

Then there is the javascript function that actually runs when the blur event is trigged:

Nothing too fancy here, I’m taking the data about the individual textbox in the repeater that was changed and storing it into the hidden textboxes. I need the ID for datatbase updating, and the ClientIDSuffix helps tie to the individual repeater item.

Finally, back in the Page_Load method, I add in code to see if a postback has happened, and grab the updated values.

I’m not going to post the AjaxTestDataSource code, since that’s trivial if you already know how to bind a datasource to a repeater in the first place.

Sorry for the long comment, if I had my own blog to link to I would have posted that. I think some of this functionality could be added straight to the InlineEditBox class, but I’m not even going to try. I’m new at this, so there might be a simpler way to do this; if so, I’d love to hear it :)

Hope this is helpful for someone.

Reply to this comment
4:45 pm - June 13, 2008

Yes, actually I would like to see more database related usage examples. People using this please share your knowledge and experience…

Reply to this comment
8:06 pm - June 13, 2008

Take a look at the original post that this control is based on. It shows how you would use a page method to store the data on blur (same as the CallBackFunction on the control).

Reply to this comment
10:35 am - June 23, 2008

Well, another week has gone by playing around with using the Inline Edit control, and while I still find it extremely useful, I’ve ran into a couple issues that I feel are worth mentioning.

First off, the page I was doing testing on involved a series of comments being added to a list, with each comment then being editable later on. Everything was fine for the first couple of comments, but it didn’t take me long to notice just how much javascript was being added once the comments hit a large amount. By the time it was equaling 316KB of data being transferred for each Update Panel refresh, I knew that it had to be dealt with. I fixed it by making the comments shown 10 on a page, and being able to navigate through them, but in the future, I think I might need them all on one page in some cases.

Secondly, html code just doesn’t play nice with the control. I didn’t realize this until I started doing HTML encoding to try and keep the database from breaking (or rather, stop the exceptions being thrown). The problem comes when you try and put html into a box when you’re editing, and from what I can tell, the problem is putting the code between span tags, which is how the script works. Span tags don’t like partial html tags inside of them – it seems like somewhere there is a catch to try and autocomplete the tags, but it causes the label to show up as blank (although database insertion is still done). Also, as some other people have found, certain tags tend to be removed as well.

It seems like that for my purposes, I might have to edit the control to take out some of the things I don’t need (save on javascript loaded for each control), and perform html encoding through javascript in a few key places. I’m not using VS 2008, so doing so isn’t as simple as I’d like, but copying code is less a problem than using javascript, which I’m probably never going to like :)

If I come up with a good way to handle the html tag issues, or have some breakthrough on reducing javascript, I’ll post something and/or update on CodePlex.

Reply to this comment
4:29 pm - July 8, 2008

Well, I’m afraid I’ve sort of gone the way that Sean did with his attempts to add more functionality to this control. I’m no longer actively working on, but I thought I’d update on what I did actually do.

For the html issues, I made progress, but never quite perfected it. I made a copy of the control and tweaked it, adding a property called allowHTML.

When set to false, any characters that might mess up the label get converted to their unicode values when text is being swapped between elements. A & char will still show up as & in both the label and edit box, but it won’t get read as the start of a special code.

When set to true, valid html tags will get read, and modify text as they should inside the label. If you edit a label, the tags will reappear so you can edit them if needed. I haven’t tested this for complex html, but it works for simple things like bold text. The key here, is it must be a valid html tag, or it will still break the label. That and it doesn’t play well with random < characters.

I had to make some changes to the way the label was actually changed, because of problems with events being triggered on the wrong element (why some people noticed that some tags were being stripped when a label was edited), and differences in the properties of an event in IE and FF.

In the end, it comes down to there is no simple way to guard against bad HTML being entered (at least not that I know of). I thought of using something like BB code to allow certain tags, which would work, but it would be a lot of overheard. If anyone actually wanted to see what I did get finished, I’d gladly share it somewhere, with the disclaimer that it’s not perfected. I have no idea if I’ll ever get around to fixing the issues that are still there.

Reply to this comment
4:24 am - November 27, 2008

Hi, I’ve downloaded your component but I cannot succeed in using it? How would I install it?

Reply to this comment
7:37 am - December 15, 2008


Its really a nice control. but its behaving strangely in my case.

I am using it inside a ascx control. so while rendering it behaves gr8 for the first most instance of that control on page.

for all further instances it just shows text boxes and no labels ??

I dont know whatz wrong with it…

Any Idea? what i am missing?


Reply to this comment
10:55 am - January 27, 2009

There is a bug with this control, when you set the clientIdSuffix en make a postback, it will not remember the new value.

Was there a reason to add a ClientIdSuffix instead of just using the ClientId?

We fixed this by:
– removing the ClientIdSuffix
– removing this.ID += this.ClientIDSuffix from the RenderControl override
– changed every this.ID to this.ClientId
– changed the next lines in the BuildInitScript, where we just added il:
var il” + this.ClientID + ” = {” + @”

$addHandler(this.label, ‘click’, il” + this.ClientID + @”.click);”;

$addHandler(this.label, ‘dblclick’, il” + this.ClientID + @”.click);”;

$addHandler(this.textbox, ‘blur’, il” + this.ClientID + @”.blur);

$addHandler(this.textbox, ‘keydown’, il” + this.ClientID + @”.keydown);

var textbox = il” + this.ClientID + @”.textbox;

if (!il” + this.ClientID + “.pressedEscape)”;

var label = il” + this.ClientID + @”.label;

il” + this.ClientID + @”.pressedEscape = false;

il” + this.ClientID + @”.pressedEscape = true;

il” + this.ClientID + @”.label.style.display = ”;

il” + this.ClientID + @”.init();

These adjusment seems to work in a quick test, also in a repeater.

Reply to this comment
Tim McCurdy
10:49 am - February 25, 2009

If you’re going to make an Ajax Extender, then why don’t you just add the ability for the developer to define what controls he wants extended? I don’t know why all the Ajax Extenders are written in this manner of only being able to attach to one control. In WinForms, an Extender and attach to the whole set of Controls defined for it. For example:

This makes it much easier to control and understand and you still only ever need one Extender and one instance of the JavaScript loaded.

Reply to this comment
Tim McCurdy
10:50 am - February 25, 2009

Sorry, previous post got example stripped out…

If you’re going to make an Ajax Extender, then why don’t you just add the ability for the developer to define what controls he wants extended? I don’t know why all the Ajax Extenders are written in this manner of only being able to attach to one control. In WinForms, an Extender and attach to the whole set of Controls defined for it. For example:

<ajaxtoolkit:InlineEditExtender ID=”ext1″ runat=”server”>
<Control LabelID=”lblLabel1″ TextID=”TextBox1″ />
<Control LabelID=”lblLabel2″ TextID=”TextBox2″ />

This makes it much easier to control and understand and you still only ever need one Extender and one instance of the JavaScript loaded.

Reply to this comment
8:27 am - July 8, 2009


I’m trying to figure out how to keep the label’s value in the textbox after you click on it. I can see that the previous version (non-extender) version of the code allowed this using:
TextBox1.value = Label1.innerHTML;

Weirdly, the desired behaviour is happening in one instance of the control for one DB record, but in no other cases.

great work btw. thanks

Reply to this comment
8:02 am - April 29, 2010

Any example or some source code is available

Reply to this comment
3:53 pm - June 27, 2010

can anybody help me…………..
everything works fine but when i refreshed the page the original text appears
thanks in advance

Reply to this comment
2:37 am - February 14, 2011
Reply to this comment
9:36 am - February 14, 2011

I see the question, but it’s deleted now. Did you get it figured out?

Reply to this comment
5:44 pm - March 13, 2011

Dave, any suggestions on say, dynamically creating a new inline editbox element using javascript (jquery in my case) and reinit’ing all of the events/handlers via javascript? in other words, i have an “add new item” link, that when clicked clones the previous item if one exists, and increments any attributes necessary by 1 (id, name, href, etc), problem is, i need to be able to init that newly added item’s js (that js for doing that all is inline within the inlineeditbox control), but am not too clear on how to do that, since it doesn’t look like the scope of doing such a thing is available to call from other files, etc. Any help would be incredible. Thanks!

Reply to this comment
6:02 pm - March 13, 2011

More specifically, has anyone updated this awesome control to more closely follow the asp.net scriptcontrol pattern or at the very least have the JS extracted to an external JS file so that the methods, etc could be called from other files with a bit more ease?

Reply to this comment
8:51 pm - March 14, 2011

I don’t know if this helps, but you can manipulate/call the control’s JS from other files. JavaScript’s scope is global, across all JS in the page and all included files.

Reply to this comment
9:15 pm - March 14, 2011

dave, any suggestion on what i need to be calling? seeing the rendered script in firebug, i see that the label id is the control that ends up calling a chained method of “.init()”. tried doing a $get(“labelid”).init(); i tried a $(“#labelid”).init(); i know it’s got to be something easy that i’m just now catching.

any suggestions? thanks again for the help.

Reply to this comment
10:49 pm - March 15, 2011

I looked at the code a bit (it’s available here: http://inlineeditbox.codeplex.com/), and I don’t see a great way for you to extend it the way that you want. If I were you, I would probably avoid the .NET control approach at this point and use a jQuery plugin (there are several, if you search for “inline edit jquery plugin”, or similar).

Reply to this comment
1:58 am - May 24, 2012


I am trying to use the control in the repeater/Gridview. I have followed every replay here but was not able to solve.

I am not able to save the edited text in the database. I will explain this in more.
I have one grid View control where I have used inline editbox control. this grid view contains a check control and a text next to it. and I would like to allow user to edit this text as this text sometime is very big.

so when I edit the text and click on save button and use the grid view / repeater in loop and find the inline edit box control it shows only old value which is bind to it. it doesnot show the the latest edited values which i will need to store in DB.

Please every one I request your help here.

Thank you in advance for your help.


Reply to this comment

Leave a Reply

Basic HTML is allowed (e.g. <a>, <blockquote>, <strong>, <em>).

Use <pre lang="x">code</pre> to include code blocks with syntax highlighting, where x is asp, csharp, html, javascript. Even inside <pre> and <code> blocks, the open angle brackets in HTML and XML need to be encoded (i.e. convert any < to &lt;).