MVC Implementation works - JS doesn't

[Randy]

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 kendo.data.DataSource({
        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" }
                }
            }
        },
    });

    $("#gridDiv").kendoGrid({
        name: "grid",
        dataSource: dataSource,
        sortable: true,
        error: function(e) {
            gridErrorHandler();
        },
        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)
        {
            try
            {
                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 kendo.mobile.min.js.

Can you see anything wrong with my JavaScript implementation?

[Boyan Dimitrov]

Hello,

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

Regards,
Boyan Dimitrov
Telerik by Progress