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

MVC Implementation works - JS doesn't

1 Answer 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Randy
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 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?

1 Answer, 1 is accepted

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

Hello,

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

Regards,
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.
Tags
Grid
Asked by
Randy
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or