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

5 Answers 15151 Views
Data Source
Pavlos
Top achievements
Rank 1
Pavlos asked on 09 Oct 2015, 12:05 PM

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
Telerik team
commented on 13 Oct 2015, 07:11 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

5 Answers, 1 is accepted

Sort by
2
Mike
Top achievements
Rank 1
answered on 27 Feb 2019, 09:21 PM

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
Top achievements
Rank 1
commented on 27 Feb 2019, 09:37 PM

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
Top achievements
Rank 1
commented on 27 Feb 2019, 09:42 PM

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.
0
Ashleigh L
Top achievements
Rank 1
answered on 22 Oct 2015, 08:15 PM

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
Telerik team
commented on 23 Oct 2015, 08:17 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Ashleigh L
Top achievements
Rank 1
commented on 26 Oct 2015, 06:07 PM

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
Telerik team
commented on 27 Oct 2015, 09:58 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Pavlos
Top achievements
Rank 1
commented on 27 Oct 2015, 10:03 AM

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
Telerik team
commented on 27 Oct 2015, 11:14 AM

Hello Pavlos,

 

Great!

 

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

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Graham
Top achievements
Rank 2
Iron
Iron
answered on 13 Sep 2016, 04:19 PM

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
Top achievements
Rank 1
commented on 01 Nov 2016, 10:55 AM

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
Telerik team
commented on 02 Nov 2016, 08:34 AM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Pascal
Top achievements
Rank 1
commented on 25 Nov 2016, 10:19 AM

Thanks Graham, you helped me solving the "e.slice is not a function" error on a combo box.
Kevin
Top achievements
Rank 1
commented on 22 Jan 2017, 10:38 PM

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
Top achievements
Rank 1
commented on 01 Feb 2017, 02:13 PM

Graham way to go, this resolved e.slice for me too.
Steven
Top achievements
Rank 1
commented on 03 Mar 2017, 04:02 AM

Yeah Graham!

Returning:

return Json(result, JsonRequestBehavior.AllowGet);

Instead of:

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

Solved my issue.

Shawn
Top achievements
Rank 1
commented on 15 May 2017, 09:49 PM

Graham's solution worked for me as well!
Graham
Top achievements
Rank 1
commented on 24 Jan 2018, 04:43 PM

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
Top achievements
Rank 1
commented on 15 Jan 2019, 10:50 PM

Worthless documentation.  Just a basic sample?  What about every single property that is not documented?  Do we just guess on each one?
Alex Hajigeorgieva
Telerik team
commented on 17 Jan 2019, 02:40 PM

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:


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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Mike
Top achievements
Rank 1
commented on 13 Feb 2019, 07:39 PM

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
Top achievements
Rank 1
commented on 13 Feb 2019, 07:42 PM

That would be nice!
Chris
Top achievements
Rank 1
commented on 13 Feb 2019, 07:43 PM

That would be nice!
Chris
Top achievements
Rank 1
commented on 14 Feb 2019, 05:38 PM

That would be nice!
Konstantin Dikov
Telerik team
commented on 15 Feb 2019, 11:04 AM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Mike
Top achievements
Rank 1
commented on 27 Feb 2019, 09:17 PM

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
Top achievements
Rank 1
Veteran
commented on 15 Sep 2020, 02:39 PM

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.
0
Chris
Top achievements
Rank 1
answered on 15 Feb 2019, 07:06 PM
For .NET Core, my solution was to change the data returned from the controller to either JsonResult or DataSourceResult, depending on the schema.
0
Mark
Top achievements
Rank 1
answered on 09 Mar 2021, 06:22 PM

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 */ ] }

}

}

Tags
Data Source
Asked by
Pavlos
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
Ashleigh L
Top achievements
Rank 1
Graham
Top achievements
Rank 2
Iron
Iron
Chris
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Share this question
or