MaskedTextBox with AutoComplete Functionality

8 posts, 1 answers
  1. Nikhil
    Nikhil avatar
    9 posts
    Member since:
    Jun 2012

    Posted 22 Dec 2015 Link to this post

    Hi, I want to show Suggention List with MaskedTextBox at Client Side. I have achieved this using JQuery UI Plugin by storing items in cookie and escaping underscore(_) and hyphen (-) in searching. Below is the code

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
    <!DOCTYPE html>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
          <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
         <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
        <title></title>
     
    </head>
    <body>
        <form id="form1" runat="server">
         <div>
            <table>
                <tr>
                    <td>
                        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
                        <telerik:RadMaskedTextBox ID="TextBox1" CssClass="txtNIN" runat="server" Mask="######-####"></telerik:RadMaskedTextBox>

                    </td>
                </tr>
                            <tr>
                    <td>
                        <asp:Button runat="server" ID="asd" Text="submit" OnClientClick="add()" />

                    </td>
                </tr>
            </table>
     

        </div>
           <%-- <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags"/>
    </div>--%>
        </form>
    </body>
    </html>
        <script type="text/javascript">
            var arr = [];
            $(function () {
                var myCookie = getCookie("SSNKey");
                if (myCookie == null || myCookie == "") {
                    arr = [];
                    var json_str = JSON.stringify(arr);
                    createCookie('SSNKey', json_str);
                }
                else {
                    var json_str = getCookie('SSNKey');
                    arr = JSON.parse(json_str);
                }
                $("#TextBox1").autocomplete({
                    minLength: 0,
                    source: function (request, response) {
                        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term.replace(/_/g, "").replace("-", "")), "i");

                        var matching = $.grep(arr, function (value) {
                            return matcher.test(value);
                        });
                        response(matching);
                    },
                    select: function (event, ui) {
                        event.preventDefault();
                        var selectedObj = ui.item;
                        var y = ["_", "_", "_", "_", "_", "_", "-", "_", "_", "", "_"];
                        for (var i = 0; i < selectedObj.value.length; i++) {
                            y[i] = selectedObj.value.charAt(i);
                        }
                        $find("<%= TextBox1.ClientID %>").set_value(y.toString().replace(/,/g, ""));
                    }
                })
                    .focus(function () {
                    $(this).autocomplete("search", "");
                });
            });
            function createCookie(name, value, days) {
                if (days) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    var expires = "; expires=" + date.toGMTString();
                }
                else var expires = "";
                document.cookie = name + "=" + value + expires + "; path=/";
            }
            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1);
                    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
                }
                return "";
            }
            function add() {
                var x = document.getElementById('TextBox1').value.replace(/_/g, "").replace("-","");
                if (arr.indexOf(x) == -1) {
                    arr.unshift(x)
                    if (arr.length > 5) {
                        arr.pop();
                    }
                    var json_str = JSON.stringify(arr);
                    createCookie('SSNKey', json_str);
                }
            }

    </script>

    but Requirement is I can't use JQuery Plugin, I have to use Telerik, so Please suggest how can i achieve this by customizing any other control or any other way.
  2. Nikhil
    Nikhil avatar
    9 posts
    Member since:
    Jun 2012

    Posted 24 Dec 2015 Link to this post

    I am still stuck for RadMaskedTextBox with AutoComplete Functionality. Telerik control's some functionality is in minify JavaScript file like on type any character in RadCombobox, it show filtered dropdownlist with highlight character (Character which is entered in combobox). so if i think to combine RadMaskedTextBox and RadComboBox then underscore(_) and hyphen (-) of RadMaskedTextBox will create issue in autosuggestion and i can't modify this autosuggestion functionality because it is in telerik's minified javascript file. Please suggest if any one can, by customizing control or any other way.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1801 posts

    Posted 24 Dec 2015 Link to this post

    Hello Nikhil,

    I am afraid that there is no control in our suite that could be modified in the way that you are requesting. The only thing that I could suggest is that you bind the masked values (including the underscore and hyphen symbols) and use the RadAutoCompleteBox control.


    Best Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Nikhil
    Nikhil avatar
    9 posts
    Member since:
    Jun 2012

    Posted 24 Dec 2015 in reply to Konstantin Dikov Link to this post

    Thanks Konstantin for your reply. you have suggested to bind masked values with RadAutoCompleteBox but It will create the following problems:

    1. There will not come underscore and hyphen symbols as come in RadMaskedTextBox also shown in above attached image.

    2.  After enter any character in RadAutoCompleteBox the DropDownList will come with underscore and hyphen but In DropDownList there should only come values because underscore and hyphens is only for look and feel of RadMaskedTextBox.

  6. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 25 Dec 2015 Link to this post

    Hi,

    You can combine the AutoCompleteBox with the RadMaskedTextBox, so that changing the value inside the Masked TextBox will trigger the AutoCompleteBox query. Here's some sample code that does exactly that:
    <script>
     
        function pageLoad() {
            auto = $find("RadAutoCompleteBox1");
            box = $find("TextBox1");
     
            $telerik.$(document).on("keydown", ".riTextBox", function(e) {
     
                setTimeout(function() {
                    auto._dropDown.clear();
                    auto._dropDown.close();
     
                    auto.query(box.get_value());
                }, 10);
            });
        }
     
    </script>
     
     
    <telerik:RadMaskedTextBox runat="server" ID="TextBox1"
        Mask="######-####">
    </telerik:RadMaskedTextBox>
     
    <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1"
        CollapseAnimation-Type="None"
        ExpandAnimation-Type="None"
        style="height: 0px; overflow: hidden">
    </telerik:RadAutoCompleteBox>
    RadAutoCompleteBox1.DataSource = new string[] { "123124", "123123", "2131", "2343" };

    All you need to add to this is handle the OnClientEntryAdding event and set the value to the MaskedTextBox.

    Please keep in mind that this is a rather hacky solution and we can't quarantee 100% accuracy in all scenarios.

    Regards,
    Bozhidar
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Nikhil
    Nikhil avatar
    9 posts
    Member since:
    Jun 2012

    Posted 04 Jan in reply to Bozhidar Link to this post

    thanks Bozhidar it is really helpful  code.

    only one problem now i am facing is that on dropDownClosing event in javascript i am filling RadMaskedTextBox with value highlighted in dropdownlist of RadAutoCompleteBox so when click in dropdownlist then it is fine the highlighted value is filled in RadMaskedTextBox but problem is when i click outside of dropdownlist and RadMaskedTextBox then the dropdownlist is closing and filling highlighted value in RadMaskedTextBox which should not be.

  8. Nikhil
    Nikhil avatar
    9 posts
    Member since:
    Jun 2012

    Posted 04 Jan Link to this post

    Below is the code:

     function dropDownClosing(sender, eventArgs) {
            if ($telerik.$('.RadAutoCompleteBoxPopup .racItemHovered').text() != "" && box.get_value() != "" && $telerik.$('.RadAutoCompleteBoxPopup .racItemHovered').text().indexOf(box.get_value()) > -1)
            {
                box = $find("TextBox1");
                box.set_value($telerik.$('.RadAutoCompleteBoxPopup .racItemHovered').text());
            }
        }

     

  9. Nikhil
    Nikhil avatar
    9 posts
    Member since:
    Jun 2012

    Posted 04 Jan Link to this post

    Sorry but I didn't find any way to delete my above two Post. Now i have found solution for my problem.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017