Uncaught TypeError: e.slice is not a function on data fetch

[Pavlos]

Hi!

I'm trying to make an ajax call to my controller function.
To get all the data that currently are in a grid's datasource.
Instead of calling directly to the grid's datasource.data() which only returns me the current grid page.

I go about this by instantiating a new kendo datasource.
But everything i try, yields "Uncaught TypeError: e.slice is not a function"

Thanks in advance.

public JsonResult ReadTimeRegistrationAjax([DataSourceRequest] DataSourceRequest request)
{
   var dataSourceResult = getStuff().ToList();
   return Json(dataSourceResult.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

var grid = $("#GridTimeRegistrations").data("kendoGrid");
        var dataurl = grid.dataSource.transport.options.read.url;

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: dataurl,
                    dataType: 'json'
                }
            },
        });

        dataSource.fetch(function() {
            var data = dataSource.data();
            console.log(data);
        }

[Kiril Nikolov]

Hello Pavlos,

 

Would it be possible to extract a runnable sample where the issue can be reproduced, as from the code shared here it is not possible for us to tell you why exactly this happens.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Mike]

Can't edit a post SMH

 

Anyway, using this DropDownList 

@(Html.Kendo().DropDownList()
      .Name("ddl_Companies")
      .HtmlAttributes(new { style = "width:100%;" })
      .OptionLabel("Select a Company...")
      .AutoBind(false)
      .DataTextField(@controller.LoggedInUserIsRootAdmin ? "RootName" : "Name")
      .DataValueField("CompanyId")
      .DataSource(source => { source.Read(read => { read.Action("GetCompaniesList", "Accounts", new {Area = "OrderPad"}).Data("GetSelectedClientId"); }); })
      .Events(e =>
          e.Change("ddl_Companies_OnChange").DataBound("ddl_Companies_OnDataBound"))
      .ToClientTemplate())

 

With this Controller function will cause the slice error as well:

[Route("GetCompaniesList")]
public IActionResult GetCompaniesList([DataSourceRequest] DataSourceRequest request, string clientId)
{
    var result = OrderPadDB.Companies.Where(x => x.ClientId.Equals(clientId)).ProjectToList<CompaniesDTOModel>();
    return Json(result.ToDataSourceResult(request));
}

 

Took at least an hour to figure out it needs to be:

[Route("GetCompaniesList")]
public IActionResult GetCompaniesList(string clientId)
{
    var result = OrderPadDB.Companies.Where(x => x.ClientId.Equals(clientId)).ProjectToList<CompaniesDTOModel>();
    return Json(result);
}

[Chris]

Yeah, as I mentioned you need to either use datasourceresult or not, to eliminate the error.  It depends if you are using ajax in your markup like so:  .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(7)
                            .Read(read => read.Action("GetUsers", "Admin").Type(HttpVerbs.Get)))

[Chris]

In your case, you are NOT using ajax, from what I can see.  So, you don't use the TODataSourceResult() function to convert your return data.

[Ashleigh L]

Happens to me all the time too, what usually fixes it is providing a model for the data:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: dataurl,
            dataType: 'json'
        }
    },
    schema : {
        type: "json",
        data: "Item",
        model: {
            fields: {
                Field1: { field: "Field1", type: "number" },
                Field2: { field: "Field2", type: "number" }
            }
        }
    }
});

(Also, I noticed when copying your code for my example, you've got a comma after the transport closing } that's not necessary).

[Kiril Nikolov]

Hello shimmoril,

 

Send us a sample of the data that you want to bind, so we can try to recreate the case and see what happens.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Ashleigh L]

I've posted about it before (http://www.telerik.com/forums/datasource-schema-model-for-templates) and didn't receive a helpful answer. Providing the schema model works 100% of the time though, and it's not a big deal to include it, so I dropped the original thread. I just wanted to share what worked for me w/ Pavlos.

[Kiril Nikolov]

Hello shimmoril,

 

I am happy to hear that you managed to fix the issue that you are having.

 

And thanks for sharing!

 

Regards,
Kiril Nikolov
Telerik

 

 

[Pavlos]

My appologies, I had submitted a ticket and it got solved there. 
Like shimmoril suggested adding a model is what did the trick for me.

I also added a Schema

schema: {
                data: "Data",
                total: "Total"
....
}

Which solved it for me. Sorry for the late reply I lost track of this post.
Thanks for following up though!

[Kiril Nikolov]

Hello Pavlos,

 

Great!

 

In case you have any further questions, please do not hesitate to contact us.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Graham]

To avoid this e.slice error I found that for a grid, my controller had to return as follows:

 

Json(vehiclesList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet)

 

Whereas for a DropDownList, EXACTLY the same data had to be returned like this:

 

Json(vehiclesList, JsonRequestBehavior.AllowGet)

[nitesh]

while upgrading kendo.all.js (v2014.3.1411) to (v2016.3.914 ) then getting error e.option.tools.slice .Please help me for same and find attachments.

 

Thanks

Nitesh

[Kiril Nikolov]

Hi,

Would it be possible to extract a sample where the issue can be reproduced and send it in a separate ticket? We will be happy to help

Regards,
Kiril Nikolov
Telerik by Progress

 

 

[Pascal]

Thanks Graham, you helped me solving the "e.slice is not a function" error on a combo box.

[Kevin]

Graham,

Your solution helped me with the same issue. In my case I had a MobileListView that required .ToDataSourceResult(request), while the MultipleSelectList did not. I had both controls referencing the same function, and when I fixed it for one, it would break the other. Now I know why!

Thanks!

[Zachary]

Graham way to go, this resolved e.slice for me too.

[Steven]

Yeah Graham!

Returning:

return Json(result, JsonRequestBehavior.AllowGet);

Instead of:

return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

Solved my issue.

[Shawn]

Graham's solution worked for me as well!

[Graham]

Hi, in case anyone else comes across this, this can happen if you load elements of the kendo js library twice; in my scenario I had incorrectly loaded reportviewer.kendo.xxxx.js and kendo.all.min.js

[Chris]

Worthless documentation.  Just a basic sample?  What about every single property that is not documented?  Do we just guess on each one?

[Alex Hajigeorgieva]

Hi, Chris,

I am sorry to hear that you are disappointed in our documentation.

We are constantly working on improving both its content and its UX. If you were looking for something specific but were not able to find it, we are always open to suggestions for enhancements and improvements. 

The reason for the troubles in this post is missing the correct data source types. When Kendo UI was originally created, clients who used Razor, also used the server side extension methods and the DataSourceRequest class and attribute and everything  just works by specifying data source of type Ajax() 

* it works because the data source is serialized to expect the DataSourceResult response

DataSource(dataSource => dataSource
   .Ajax()
   .Read(read => read.Action("Orders_Read", "Grid"))
)
public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
{
    // orders is IQueriable or IEnumerable
   return Json(orders.ToDataSourceResult(request));
}

Here is how a serialized data source should be configured when using the jQuery Kendo UI DataSource with the MVC server-side extensions:

"dataSource": {
    "type": 'aspnetmvc-ajax',
    "transport": {
        "read": {
            "url": "/Grid/Orders_Read"
        },
        "prefix": ""
    },
    "pageSize": 20,
    "page": 1,
    "total": 0,
    "serverPaging": true,
    "serverSorting": true,
    "serverFiltering": true,
    "serverGrouping": true,
    "serverAggregates": true,
    "filter": [],
    "schema": {
        "data": "Data",
        "total": "Total",
        "errors": "Errors",
        "model": {
            "fields": {
                "OrderID": {
                    "type": "number"
                },
            }
        }
    }
}

So when using the server-side extension methods the data source should be of type 'aspnetmvc-ajax', the script for this data source type should be included:

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"></script>

And the data source schema data and total should be specified (as a minimum) because the DataSourceResult class returns an object, not an array, hence the error e.slice is not a function for objects:

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI/DataSourceResult

We have an article about server operations that seems relevant to this post:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/binding/web-api-server-operations

Look forward to hearing about any specific questions that you may have.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Mike]

How about an even somewhat usable error message?  It's been three and a half years and this error is still ridiculously ambiguous.  How about we fix the code so it throws a somewhat reasonable error when this occurs?  

[Chris]

That would be nice!

[Chris]

That would be nice!

[Chris]

That would be nice!

[Konstantin Dikov]

Hello,

This is a really common issue and I think that throwing more informative error would be really beneficial. Nevertheless, we will discuss it within the team to see if there could be any downside of introducing try/catch and custom error.


Regards,
Konstantin Dikov
Progress Telerik

[Mike]

In case anyone else runs across this post, I just spent an hour chasing another example of the ridiculousness of this error message.

TELERIK FIX THIS ASAP!!!!

[Matthew]

It's been a long, long time since you've posted this, but...

I've overlooked this too many times too mention. Forgetting this issue and stumbling across this post rang the bell for me :)

Perhaps the techs could take note. Moving forward, maybe the techs could suggest that the end user should ensure the model being provided to the dropDownList actually has the fields specified by DataTextField and DataValueField properties.

It may also be valuable to end users for the kendo team to provide a FAQ concerning when and when not to return models as [DataSourceRequest] for components that implement dataSource.

[Chris]

For .NET Core, my solution was to change the data returned from the controller to either JsonResult or DataSourceResult, depending on the schema.

[Mark]

In my case, this issue is caused by data source not be able to be parsed. If you use the schema function to actually point the data to the correct part in your json object, it should start working for you. 

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema#schema.model

schema: {

data: function(response) {

return response.statuses; // twitter's response is { "statuses": [ /* results */ ] }

}

}