MVC Implementation works - JS doesn't

2 posts, 0 answers
  1. Randy
    Randy avatar
    75 posts
    Member since:
    Jul 2009

    Posted 07 Apr 2017 Link to this post

    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?

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 11 Apr 2017 Link to this post

    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.
Back to Top