Error rendering data with autocomplete - Object #<Object> has no method 'slice' - how to resolve?

2 posts, 0 answers
  1. B
    B avatar
    8 posts
    Member since:
    Jul 2013

    Posted 23 Jul 2013 Link to this post

    I am following the Using Kendo UI with MVC4 WebAPI OData and EF article.  After installing KendoUI and making sure all references are set, I type in three characters, and get the following error:
    • Uncaught TypeError: Object #<Object> has no method 'slice'
    I cleaned up kendo.web.min.js and the error is occuring around line 3498:
    success: function (n) {
         var i = this,
             r = i.options;
         return i.trigger(wt, {
             response: n,
             type: "read"
         }), n = i.reader.parse(n), i._handleCustomErrors(n) ? (i._dequeueRequest(), t) : (i._pristine = et(n) ? e.extend(!0, {}, n) : n.slice ? n.slice(0) : n, i._total = i.reader.total(n), i._aggregate && r.serverAggregates && (i._aggregateResult = i.reader.aggregates(n)), n = i._readData(n), i._pristineData = n.slice(0), i._data = i._observe(n), i._addRange(i._data), i._process(i._data), i._dequeueRequest(), t)

    The Kendo UI widgets are loading just fine as well as the css:

    <link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/kendo/kendo.web.min.js"></script>
    <script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
    <script src="~/Scripts/appScripts.js"></script>
    And I am seeing the same error both with using the Razor MVC helper/extension:

    @(Html.Kendo().AutoComplete()
        .Name("userAutoComplete")                   // specifies the "id" attribute of the widget
        .DataTextField("USERNAME")
        .DataSource(source =>
            {
                source.Read(read =>
                    {
                        read.Url("/api/user");
                    })
                      .ServerFiltering(true);       // if true, the DataSource will not filter the data on the client
            }
        )
    )
    and through directly through JS:

    /// <reference path="kendo/kendo.aspnetmvc.min.js" />
    /// <reference path="kendo/kendo.core.min.js" />
    /// <reference path="kendo/kendo.autocomplete.min.js" />
    /// <reference path="kendo/kendo.web.min.js" />
     
    $(document).ready(function () {
        // load up KendoUI
         
        // gets data from /api/user
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/api/user"
                }
            }
        });
     
        $("#userSearch").kendoAutoComplete({
            dataSource: dataSource,
            dataTextField: "USERNAME",
            minLength: 3
        });
     
        $("#userSearch").on('input', function () {
            console.log($("#userSearch").val());
        });
     
    }); // $(document).ready()


    I'm sure this is something simple that I may be missing.  I have tried both with the web and all js files.

    Any assistance would be appreciated.


    Thanks.

  2. B
    B avatar
    8 posts
    Member since:
    Jul 2013

    Posted 24 Jul 2013 Link to this post

    The problem was in the data hierarchy.  The first level did not contain an array, which JS was expecting.  The resulting data was contained in /data/$values.  If the array was contained in /data, I wouldn't have experienced this issue.

    To resolve this I specified a schema and returned the value of /data/$values from the function:

    // gets data from /api/user
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/api/user"
            }
        },
        schema: {                               // describe the result format
            data: function(data) {              // the data which the data source will be bound to is in the values field
                console.log(data.$values);
                return data.$values;
            }
        }
    });

    This completely solved the problem.

    One thing to mention however, I couldn't find any support for adding a data schema to the AutoComplete MVC extension, so the following would not work:

    @(Html.Kendo().AutoComplete()
          .Name("userAutoComplete")                   // specifies the "id" attribute of the widget
          .Filter("startswith")
          .Placeholder("Type user name...")
          .DataTextField("USERNAME")
          .DataSource(source =>
              {
                  source:
                  source.Read(read =>
                      {
                          read.Url("/api/user");
                      })
                      .ServerFiltering(true);       // if true, the DataSource will not filter the data on the client
              }
          )
    )



  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top