AutoComplete not working for Numeric values

7 posts, 0 answers
  1. Matt
    Matt avatar
    8 posts
    Member since:
    Feb 2011

    Posted 27 Mar 2013 Link to this post

    I am using the Autocomplete control on an asp.net MVC3 razor page.  I bound the autocomplete to a list of measurements in my model.  The Datatextfield is a property on a measurement with a datatype of decimal ex. 1.25.  However, I get an error Object doesn't support this method 'ToLowerCase'.  Can I not use a DataTextField which is not a string?  My datasource is a list of numbers, not strings.

    The error 'object doesn't support this method toLowerCase' happens on the code below:

    function anonymous(d, __f, __o) {
    return (d.measurement.toLowerCase().lastIndexOf('1', 0) == 0)
    }


    Here is my configuration:

    @(Html.Kendo().AutoComplete()
    .Name("measuresautocomplete")
    .BindTo(Model.measures)
    .DataTextField("measurement")
    .Filter(FilterType.StartsWith)
    )
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 28 Mar 2013 Link to this post

    Hello Matt,

     
    The "startswith" filter cannot be applied to integers, as Number object does not have indexOf method. You can bind AutoComplete to integers and filter them using "eq" filter.

    All the best,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Matt
    Matt avatar
    8 posts
    Member since:
    Feb 2011

    Posted 28 Mar 2013 Link to this post

     This did not work Filter("eq").  The Kendo web documentation says there are only 3 supported filtertypes "startstwith, contains and endswith".  The only 2 filtertypes shown in the the FilterType enum are FilterType.StartsWith and FilterType.Contains.   

    Can you give me an example of how to configure the Autocomplete for a numeric value?  Thanks.
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 29 Mar 2013 Link to this post

    Hello Matt,

     
    I prepared a simple test project, which shows how to achieve your goal.

    Kind regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Matt
    Matt avatar
    8 posts
    Member since:
    Feb 2011

    Posted 03 Apr 2013 Link to this post

    Hello Georgi,

    Unfortunately your example does not achieve my goal.  I would like to bind the Autocomplete to a datasource and use a property on that datasource that is not a string as the datatextfield.  Your example is binding to a function that returns and object in Json format which is text format.
     
    So am I correct that the autocomplete does not support datasource's with non string properties? 
    Is there any documentation on the telerik site about using the "eq" filter in the autocomplete?

    Below is the code that throws the error"function not supported".  Could telerik not fix this by applying a toString() before the toLowerCase()?

    function

     

     

    anonymous(d, __f, __o) {
    return ((d.measurement|| '').toLowerCase() == '2')
    }

    Thanks,
    Matt

     

  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 05 Apr 2013 Link to this post

    Hello Matt,

    We are still not sure what is your exact setup. Could you please modify the project and send it back so we can get a better idea of your case?

    Thank you in advance for the cooperation.

    Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Timothy
    Timothy avatar
    37 posts
    Member since:
    Aug 2011

    Posted 11 Apr 2013 Link to this post

    How this for an idea use either as a UIHint or specify as an Editor template
    @model int
    @{
       var autoComp = ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_auto";
       @Html.HiddenFor(m => m)
       if (ViewData["width"] != null)
       {
          @(Html.Kendo().AutoComplete()
             .Name(autoComp)
             .Placeholder("Please select a value")
              .Filter("contains")
              .MinLength(3)
              .DataTextField("Description")
              .Suggest(true)
             .DataSource(ds =>
             {
                ds.Read(read => {
                      read.Action(MVC.Admin.ActionNames.ProductAutoComplete, MVC.Admin.Name).Data(@<text>
                         function prodAutoComplete(e) {
                            return {
                               text: $("#@autoComp").val()
                            };
                         }
                      </text>
                      );
                   }
                )
                .ServerFiltering(true);
             })
             .HtmlAttributes(new { style = "width:" + ViewData["width"].ToString() })
             .Events(e =>
             {
                e.Select(@<text>
                   function prodAutoSelect(e) {
                      var dataItem = this.dataItem(e.item.index());
                      $('#@ViewData.TemplateInfo.GetFullHtmlFieldName("")').val(dataItem.ProductID);
                      }
                </text>);
             })
          )
       }
       else
       {
          @(Html.Kendo().AutoComplete().Placeholder("Please select a value")
              .Name(autoComp)
              .Filter("contains")
              .MinLength(3)
              .DataTextField("Description")
              .Suggest(true)
             .DataSource(ds => {
                ds.Read(read => {
                   read.Action(MVC.Admin.ActionNames.ProductAutoComplete, MVC.Admin.Name).Data(@<text>
                      function prodAutoComplete(e) {
                         return {
                            text: $("#@autoComp").val()
                         };
                      }
                   </text>
                   );
                }
             )
             .ServerFiltering(true);
             })
             .Events(e =>
             {
                e.Select(@<text>
                   function prodAutoSelect(e) {
                      var dataItem = this.dataItem(e.item.index());
                      ps_Fn.onAutoSelect('@ViewData.TemplateInfo.GetFullHtmlFieldName("")', dataItem);
                   }
                </text>);
             })
          )
       }
    }
Back to Top
UI for ASP.NET MVC is VS 2017 Ready