This is a migrated thread and some comments may be shown as answers.

MVC Implementation works - JS doesn't

1 Answer 60 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Randy asked on 07 Apr 2017, 12:50 PM

I have a grid that works perfectly using the MVC wrapper. However, I'm trying to implement the same grid using JavaScript and am running into an odd issue. Here is my JavaScript code, and my MVC controller method it's calling:

function setupGrid() {
    var dataSource = new{
        dataType: "json",
        type: "GET",
        pageSize: 25,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        transport: {
            read: '/Closeout/ReadCloseoutHistory/'
        schema: {
            data: "Data",
            model: {
                fields: {
                    CloseoutDate: { type: "datetime" },
                    BeginDate: { type: "datetime" },
                    EndDate: { type: "datetime" }

        name: "grid",
        dataSource: dataSource,
        sortable: true,
        error: function(e) {
        toolbar: ["excel", "pdf"],
        scrollable: {
            virtual: true
        mobile: true,
        resizeable: true,
        reorderable: true,
        columnMenu: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    contains: "Contains",
                    eq: "Equal to",
                    neq: "Not equal to",
                    gte: "Greater than or equal to",
                    lte: "Less than or equal to"
        pdf: {
            allPages: true,
            paperSize: "A4",
            landscape: true,
            avoidLinks: true,
            scale: 0.6,
            repeatHeaders: true,
            templateId: "page-template",
            fileName: "CloseoutHistory.pdf",
            margin: {top: "2cm", right: "1cm", bottom: "1cm", left: "1cm"},
        excel: {
            fileName: "CloseoutHistory.xlsx",
            proxyURL: "Customer/ExcelExport",
            filterable: true
        columns: [{
            field: "CloseoutDate",
            title: "Closeout Date",
            width: 100
        }, {
            field: "BeginDate",
            title: "Begin Date",
            width: 100
        }, {
            field: "EndDate",
            title: "End Date",
            width: 150


Controller code:

       public ActionResult ReadCloseoutHistory([DataSourceRequest] Kendo.Mvc.UI.DataSourceRequest request)
                var resultSet = this.CloseoutData.GetList(this.GetClientId()).ToDataSourceResult(request);
                return Json(resultSet, JsonRequestBehavior.AllowGet);
            catch (Exception exception)


The MVC version of the grid works as expected. The JavaScript version generates a server error of 500. The controller method is getting called and seems to return ok. However, something is causing a 500 (internal server) error. I also get a "Maximum call stack size exceeded" error from

Can you see anything wrong with my JavaScript implementation?

1 Answer, 1 is accepted

Sort by
Boyan Dimitrov
Telerik team
answered on 11 Apr 2017, 08:46 AM


Please refer to the attached project that shows how to implement such scenario. 

Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question