Saturday, November 01, 2008

DevExpress Controls: Creating Characters Counters for Memo / Text boxes

I had to do this for a client so I thought I would share it. It uses the DevExpress ASPxGridView and Editor controls in an ASP.Net solution.

Here's some code to create a character counter for your text/memo boxes.  It's fairly common with regular javascript but it can be tricky with custom controls.

I used KeyUp because TextChanged only fires when you LEAVE the control.

Also note the use of GetText() to get the content. I struggled (stupidly!) with this trying to use the javascript text property.  The ASPxEditor javascript controls have their own javascript methods. GetText and SetText. (if you want to get scared, look at the amount of javascript that is generated when using an ASPxGridView control on a form)

<dxe:ASPxMemo ID="txtInfo" runat="server" Width="100%" Height="76px">
                <ClientSideEvents KeyUp="function(s,e){
                var ele = s.GetText();
                lblInfo.SetText(ele.length + '/4000 characters left');}" />
                </dxe:ASPxMemo>
<dxe:ASPxLabel ID="ASPxLabel1"  ClientInstanceName="lblInfo"  runat="server" Text="(maximum 4000 chars)">
                </dxe:ASPxLabel>

 Hope you find it useful. Here' s a link to my forum post.

 

HowTo: JavaScript Character Counters for Memo / Text boxes - Developer Express Inc.

No comments: