Friday 28 February 2014

Show Number of Characters Remaining in Textbox or Textarea inside gridview.



Hello dear, 

    This operation can easily perform but it became tedious task when you have to do this for gridview controls (textbox) and evvn much tedious when there is
    multiple textbox with same ids (in case of multiple rows in gridview).  I have aslo faced this situation and after expendign more then 5 hrs I came to solve
    this problem. Here is the code. This may help you!

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

    <script src="../../../Resources/JSFiles/jquery-1.7.2.min.js" type="text/javascript"></script>

  
    <script type="text/javascript">
        $(function() {
            var maxlength = 120;
            $("[id^=grStudentRemark] input[type=text]").on("keypress", function(e) {
                var Len = $(this).val().length;
                var remChar = maxlength - Len;

                if (remChar > -1) {
                    $(this).next('span').text(remChar);
                }
                if (Len > maxlength) {
                    //e.preventDefault();
                    $(this).val($(this).val().substring(0, maxlength));
                }
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

          
        <asp:GridView ID="grStudentRemark" runat="server" AutoGenerateColumns="False" BackColor="White"
            Visible="false" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3"
           GridLines="Vertical">
            <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
            <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
            <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#000000" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="#DCDCDC" />
            <Columns>
                <asp:TemplateField HeaderText="Remark">
                    <ItemTemplate>
                       <asp:TextBox ID="txtMultipleRemark1"
                            MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
                                ID="r1" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label><br />
                       <asp:TextBox ID="txtMultipleRemark2"
                            MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
                                ID="r2" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label><br />
                       <asp:TextBox ID="txtMultipleRemark3"
                            MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
                                ID="r3" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label><br />
                       <asp:TextBox ID="txtMultipleRemark4"
                            MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
                                ID="r4" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label><br />
                       <asp:TextBox ID="txtMultipleRemark5"
                            MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
                                ID="r5" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
    </asp:GridView>
               
    </div>
    </form>
</body>
</html>



Cheers!!!

No comments:

Post a Comment