[Solved] Grid Update Event Not Called

[Raymond]

I have the following grid defined in my HTML;

<kendo-grid id="reportGrid"
        k-sortable="true"
        k-pageable="true"
        k-filterable="true"
        k-resizeable="true"
        k-selectable="'row'"
        k-options="reportGridOptions">
</kendo-grid>

and in my adminController.js file I have;

$scope.reportGridOptions = {
    dataSource: {
        transport: {
            read: function (options) {
                $.ajax({
                    url: "/Home/GetReports",
                    dataType: "json",
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
            update: function (options) {
                $.ajax({
                    url: "/Home/UpdateReport",
                    dataType: "json",
                    type: "post",
                    data: options.data,
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result)
                        alert("An error occurred updating the report");
                    }
                });
            },
            create: function (options) {
                $.ajax({
                    url: "/Home/UpdateReport",
                    dataType: "json",
                    type: "post",
                    data: options.data,
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result)
                        alert("An error occurred creating the report");
                    }
                });
            },
            batch: false,
            pageSize: 10,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number", editable: false, nullable: true, defaultValue: 0 },
                        name: { type: "string", validation: { required: true } },
                        reportTypeId: { type: "number", validation: { required: true } },
                        reportType: { type: "string" },
                        reportDt: { type: "date", validation: { required: true } },
                        releasedDt: { type: "date" },
                        updatedBy: { type: "string", editable: false, nullable: true },
                        updatedDtTm: { type: "date", editable: false, nullable: true },
                        rowVersion: { type: "string", editable: false, nullable: true },
                    }
                }
            },
            sort: [{ field: "reportDt", dir: "asc" }]
        },
        error: function (e) {
            // The error message returned will contain the name of the procedure followed by a colon followed by the error message;
            // <procedure name>:<errorr1></br><error2>...</br><errorn>
            var err = e.errorThrown.split(":");
            console.log(err[0]);
            console.log(err[1]);

            // Set the error title and message then display the modal error dialogue...
            $scope.formData.errorTitle = err[0];
            $scope.formData.errorMsg = err[1];

            // If the changes aren't "applied" the dialogue won't contain the title and the message...
            $scope.$apply();

            // Display the error...
            $('#errorDialogue').modal('show');
        }
    },
    //height: "500px",
    toolbar: ["create"],
    editable: { mode: "inline", update: true, destroy: false },
    columns: [
        { field: "reportTypeId", title: "Rpt Type ID", width: "100px" },
        { field: "reportType", title: "Report Type", width: "100px", editor: '<input name="\'reportTypeId\'" kendo-drop-down-list required k-data-text-field="\'name\'" k-data-value-field="\'id\'" k-data-source="lstRptTypes" data-bind="value:' + "reportTypeId" + '"/>' },
        { field: "name", title: "Report Name", width: "200px" },
        { field: "reportDt", title: "Report Date", format: "{0:d MMM yyyy}", width: "125px" },
        { field: "releasedDt", title: "Released", format: "{0:d MMM yyyy}", width: "125px" },
        { command: ["edit"], title: " ", width: "220px" }
    ]
};

The data is displayed correctly when the grid is loaded as can be seen in the attached Grid1.png image.

The custom editor for the report type displays the correct options and when the report is changed to "Sustain" the Report ID is updated correctly as can be seen in Grid2.png and Grid3.png respectively.

However when I select Update nothing happens.  I have tried placing breakpoints within the "success:" and "error:" functions in both the "update" and "create" transport sections and also in the server-side code but none of the breakpoints are ever reached.

I also tried using;

dataSource: {
    transport: {
        read: {
            url: "/Home/GetReports",
            dataType: "json",
            type: "post"
        },
        update: {
            url: "/Home/UpdateReport",
            dataType: "json",
            type: "post"
        },
        create: {
            url: "/Home/UpdateReport",
            dataType: "json",
            type: "post"
        },
        batch: false,
        pageSize: 10,
        schema: {
            model: {
                id: "id",
                fields: {
                    // Field data types are String (default), Number, Boolean or Date...
                    id: { type: "number", editable: false, nullable: true, defaultValue: 0 },
                    name: { type: "string", validation: { required: true } },
                    reportTypeId: { type: "number", validation: { required: true } },
                    reportType: { type: "string" }, //, validation: { required: true }, defaultValue: { reportTypeId: 1, reportName: "Phase 1" }
                    reportDt: { type: "date", validation: { required: true } },
                    releasedDt: { type: "date" },
                    updatedBy: { type: "string", editable: false, nullable: true },
                    updatedDtTm: { type: "date", editable: false, nullable: true },
                    rowVersion: { type: "string", editable: false, nullable: true },
                }
            }
        },
        sort: [{ field: "reportDt", dir: "asc" }]
    },
    error: function (e) {
        // The error message returned will contain the name of the procedure followed by a colon followed by the error message;
        // <procedure name>:<errorr1></br><error2>...</br><errorn>
        var err = e.errorThrown.split(":");
        console.log(err[0]);
        console.log(err[1]);

        // Set the error title and message then display the modal error dialogue...
        $scope.formData.errorTitle = err[0];
        $scope.formData.errorMsg = err[1];

        // If the changes aren't "applied" the dialogue won't contain the title and the message...
        $scope.$apply();

        // Display the error...
        $('#errorDialogue').modal('show');
    }
},

but this didn't work either.

Any assistance in regards to this would be appreciated.

[Alexander Popov]

Hi Raymond,

Have you tried putting a debugger in the update function, before the Ajax request? Also, are there any error in the browser's console or network tabs that might give us a hint what goes wrong?

Regards,
Alexander Popov
Telerik

 

 

[Raymond]

Hi Alexander,

I had tried placing a console log statement prior to the Ajax request but it was never hit.  I have since tried stripping everything out of page and code not associated with the report grid as follows;

@{
    Layout = null;
}

<!DOCTYPE html>
<html ng-app="ImrApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Controls Reporting - Administration</title>

    @Styles.Render("~/Content/css")

    <link href="~/Content/kendo/2015.1.318/kendo.common-bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2015.1.318/kendo.bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2015.1.318/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2015.1.318/kendo.dataviz.default.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2015.1.318/kendo.bootstrap.mobile.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootbox.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="~/Scripts/kendo/2015.1.318/kendo.all.min.js"></script>
    <script src="~/App/ImrApp.js"></script>
    <script src="~/App/DataService.js"></script>
    <script src="~/App/ValidationDirective.js"></script>
    <script src="~/App/Administration/adminController.js"></script>
    <script src="~/Scripts/moment.js"></script>
    <script src="~/Scripts/moment-timezone-with-data-2010-2020.js"></script>

    @Scripts.Render("~/bundles/modernizr")
</head>

<body ng-controller="adminController">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse navbar-default collapse">
                <img class="navbar-left hidden-xs" height="50" src="/Images/Origin_100x143.jpg" />

                <p class="navbar-brand">Project Controls Reporting</p>

                <img class="navbar-right hidden-xs" height="50" src="/Images/APLNG_143x143.jpg" />

                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Reporting", "RptIndex", "Report")</li>
                    <li>@Html.ActionLink("Charts", "ChtIndex", "Chart")</li>
                    <li>@Html.ActionLink("Administration", "Administration", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        <div class="lead">
            <div class="row">
                <div class="col-md-12">
                    <h4>Internal Monthly Cost and Progress Report</h4>
                </div>
            </div>
        </div>

        <fieldset>
            <legend>Administration</legend>

            <div class="row">
                <ul class="nav nav-tabs" style="margin-bottom: 10px;">
                    <li class="active"><a data-toggle="tab" href="#Users">Users</a></li>
                    <li><a data-toggle="tab" href="#Reports">Reports</a></li>
                    <li><a data-toggle="tab" href="#Sections">Sections</a></li>
                    <li><a data-toggle="tab" href="#Charts">Charts</a></li>
                </ul>

                <div class="tab-content">
                    <div id="Reports" class="tab-pane fade">
                        <div class="row">
                            <div class="col-md-12">
                                <span style="font-weight:bold">Reports</span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <kendo-grid id="reportGrid"
                                            k-sortable="true"
                                            k-pageable="true"
                                            k-filterable="true"
                                            k-resizeable="true"
                                            k-selectable="'row'"
                                            k-options="reportGridOptions">
                                </kendo-grid>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        <!-- Error dialogue -->
        <div id="errorDialogue" class="modal fade" role="dialog" tabindex="-1">
            <div class="modal-dialog modal-vertical-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <a href="#" class="close" data-dismiss="modal">×</a>
                        <h4 ng-bind-html="formData.errorTitle"></h4>
                    </div>

                    <div class="modal-body">
                        <p ng-bind-html="formData.errorMsg"></p>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="spinner" class="modal"><!-- Used to display the spinner --></div>
    </div>
</body>
</html>

and;

001.ImrApp.controller('adminController',
002.    ["$scope", "$modal", "$compile", "DataService",
003.    function adminController($scope, $modal, $compile, DataService) {
004.        "use strict";
005.
006.        $scope.formData = {};
007.
008.        // Common procedure to handle displaying error messages...
009.        function displayError(title, message) {
010.            $scope.formData.errorTitle = title;
011.            $scope.formData.errorMsg = message;
012.            $scope.$apply();
013.            $('#errorDialogue').modal('show');
014.        };
015.
016.        // Loads the list of report types for use with editor in the reports grid...
017.        $scope.lstRptTypes = new kendo.data.DataSource({
018.            type: "json",
019.            transport: {
020.                read: {
021.                    url: "/Home/GetReportTypes",
022.                    datatype: "json"
023.                }
024.            }
025.        });
026.
027.        // ======================================================================================================================================================
028.        // Set the report grid options
029.        // ------------------------------------------------------------------------------------------------------------------------------------------------------
030.        var reportModel = new kendo.data.Model.define({
031.            id: "id",
032.            fields: {
033.                id: { type: "number", editable: false, nullable: true, defaultValue: 0 },
034.                name: { type: "string", validation: { required: true } },
035.                reportTypeId: { type: "number", validation: { required: true } },
036.                reportType: { type: "string" }, //, validation: { required: true }, defaultValue: { reportTypeId: 1, reportName: "Phase 1" }
037.                reportDt: { type: "date", validation: { required: true } },
038.                releasedDt: { type: "date" },
039.                updatedBy: { type: "string", editable: false, nullable: true },
040.                updatedDtTm: { type: "date", editable: false, nullable: true },
041.                rowVersion: { type: "string", editable: false, nullable: true },
042.            }
043.        });
044.
045.        var reportDataSource = new kendo.data.DataSource({
046.            transport: {
047.                read: function (options) {
048.                    console.log("Report read...")
049.
050.                    $.ajax({
051.                        url: "/Home/GetReports",
052.                        dataType: "json",
053.                        success: function (result) {
054.                            options.success(result);
055.                        },
056.                        error: function (result) {
057.                            displayError("Report Grid - Read", result.statusText)
058.                        }
059.                    });
060.                },
061.                update: function (options) {
062.                    console.log("Report update...")
063.
064.                    $.ajax({
065.                        url: "/Home/UpdateReport",
066.                        dataType: "json",
067.                        type: "post",
068.                        data: options.data,
069.                        success: function (result) {
070.                            options.success(result);
071.                        },
072.                        error: function (result) {
073.                            displayError("Report Grid - Read", result.statusText);
074.                        }
075.                    });
076.                },
077.                create: function (options) {
078.                    console.log("Report create...")
079.
080.                    $.ajax({
081.                        url: "/Home/UpdateReport",
082.                        dataType: "json",
083.                        type: "post",
084.                        data: options.data,
085.                        success: function (result) {
086.                            options.success(result);
087.                        },
088.                        error: function (result) {
089.                            displayError("Report Grid - Create", result.statusText);
090.                        }
091.                    });
092.                },
093.                //parameterMap: function (data, operation) {
094.                //  if (operation !== "read") {
095.                //      return kendo.stringify(data);
096.                //  }
097.                //},
098.                schema: reportModel,
099.                batch: false,
100.                pageSize: 10,
101.                sort: [{ field: "reportDt", dir: "asc" }]
102.            },
103.            change: function (e) {
104.                var data = this.data();
105.
106.                if (e.action == undefined) {
107.                    console.log("Report: read (" + data.length + ")");
108.                }
109.                else {
110.                    console.log("Report: " + e.action);
111.                }
112.            }
113.        });
114.
115.        var reportColumns = [
116.                { field: "reportTypeId", title: "Rpt Type ID", width: "100px" },
117.                { field: "reportType", title: "Report Type", width: "100px", editor: '<input name="\'reportTypeId\'" kendo-drop-down-list required k-data-text-field="\'name\'" k-data-value-field="\'id\'" k-data-source="lstRptTypes" data-bind="value:' + "reportTypeId" + '"/>' },
118.                { field: "name", title: "Report Name", width: "200px" },
119.                { field: "reportDt", title: "Report Date", format: "{0:d MMM yyyy}", width: "125px" },
120.                { field: "releasedDt", title: "Released", format: "{0:d MMM yyyy}", width: "125px" },
121.                { command: ["edit"], title: " ", width: "220px" }
122.        ];
123.
124.        // Set the report grid options...
125.        $scope.reportGridOptions = {
126.            dataSource: reportDataSource,
127.            toolbar: ["create"],
128.            editable: { mode: "inline", update: true, destroy: false },
129.            columns: reportColumns
130.        };
131.        // ------------------------------------------------------------------------------------------------------------------------------------------------------
132.
133.        // Actions to perform once the document has been setup...
134.        $(document).ready(function () {
135.            $scope.formData.userId = $('#UserId').html();
136.        });
137.    }]);

The console log shows the expected entries for the datasource read and change events and also shows the "itemchange" action when the record is modified.  However the only network activity is the call to get the report types for column editor when "edit" is selected.  Clicking "update" doesn't create any network activity nor does it execute the "console.log" statement on line 62 (see attached ReportUpdate1.png).

I also attempted to add a record with similar results (see attached ReportUpdate2.png).

Regards,

Ray

[Vladimir Iliev]

Hello Raymond,


From the provided information it's not clear for us what might be the reason for current behavior.  Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

 

Regards,
Vladimir Iliev
Telerik