How to limit the textbox with mode as MultiLine and inside a gridview using jquery?

Who is online? 0 guests and 0 members

home » forums » asp.net topics » client side web development » How to limit the textbox with mode as MultiLine and inside a gridview using jquery?

How to limit the textbox with mode as MultiLine and inside a gridview using jquery?

Posts under the topic: How to limit the textbox with mode as MultiLine and inside a gridview using jquery?

Posted: 3/16/2011

Sumit Arora

1414 points Starter

Joined on: 12/1/2008
Posts: 66

Hello,

I have a gridview which contains a textbox with the multiline mode . There are checkboxes and labels inside it as well.

I want to limit the maximum length of the textbox which is inside a gridview using keyup. But the keyup doesn't fire.
Below is the html of the page.

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

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function() {

            var grdValue = $('#<%=grdItems.ClientID %>').find('input:textarea');
           $('input[id$=txtName]').keyup(function(e) {
               var maxLength = 100;
                var textlength = this.value.length;
                if (textlength >= maxLength) {
                    alert(textlength);
                    //$('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
                    this.value = this.value.substring(0, maxLength);
                    e.preventDefault();

                }

                else {
                    alert(textlength);
                    //$('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
                }
            });
        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="grdItems" runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="txtName" runat="server" MaxLength="100" TextMode="MultiLine" Rows="4"></asp:TextBox><br />
                    (Maximum characters: 100)<br />
                    <span id="charStatus"></span>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

I'm binding the grid frm cs side.

What's that which im not doing correctly.

Any help or suggestions would be more then helpful.

Thanks & Regards,

Sumit Arora

tags Gridview, jquery, textbox multiline

Posted: 3/22/2011

Asif Qadri

117 points Lurker

Joined on: 6/2/2009
Posts: 10

You should bind your javascript function with textbox at RowDataBound event of grid view.

Asif Qadri

Posted: 3/23/2011

Hajan Selmani

8505 points Professional

Joined on: 5/3/2010
Posts: 391

Answered

Hello Sumit,

Try with this code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
        $('.txtMultlines').keyup(function(e) {            
                var maxLength = 100;
                var textlength = this.value.length;
                if (textlength >= maxLength) {
                    alert(textlength);
                    //$('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
                    this.value = this.value.substring(0, maxLength);
                    e.preventDefault();
                }
                else {
                    alert(textlength);
                    //$('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="grdItems" runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="txtName" class="txtMultlines" runat="server" MaxLength="100" TextMode="MultiLine" Rows="4"></asp:TextBox>

                    (Maximum characters: 100)

                    <span id="charStatus"></span>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

The only thing I do is just adding CLASS with name 'txtMultilines' to the TextBox. I'm doing this since you will have generated texboxes as many rows you will have in your GridView. Then, by using that class, I'm calling the keyup function, so your code inside $('.txtMultlines').keyup(function(e){
//here
});

will run for each textbox ;)!

Hope this helps.

Don't forget to Mark As Answer the answers that helped you solve your issue

Page 1 of 1 (3 items)