Grid / Inline editing using AngularJS

[ziental]

Hello,

I'm using the grid with AngularJS on a screen where I need to make the data change "in line."
The 'update' method needs to check whether that operation can be done or not (depending on business rules).
But when I make the call to the API method I get an error.
Follow my code.

$scope.gridOptions = {
                    columns: [
                        {
                            command: [
                                { name: "edit", text: " "},
                                { name: "destroy", text: " " }
                            ], title: " ", width: 230
                        },

                        { field: "StateID", title: "ID", width: 70 },
                        { field: "StateCode", title: "Code", width: 70 },
                        { field: "StateName", title: "Name" }
                    ],
                    dataSource: {
                        pageSize: 5,
                        batch: false,
                        transport: {
                            read: {
                                url: "/Definitions/Country/State_Get_List/" + ID,
                                dataType: "json",
                                type: "GET",
                                contentType: "application/json; charset=utf-8"
                            },
                            update: function (opt) {
                                $http.post(urlTest, '"' + opt.data.model + '"')
                                    .success(function (res) {
                                        if (res === '0') {
                                            alert('you can not update this');
                                        }
                                        else {
                                            alert('Success!');
                                        }
                                    });

                            },
                            create: function (opt) {
                                alert('create');
                                opt.sucess();
                            },
                            destroy: function (opt) {
                                alert('destroy');
                                opt.sucess();
                            }
                        },
                        schema: {
                            model: {
                                id: "StateID",
                                fields: {
                                    StateID: { editable: false, type: "number", nullable: true },
                                    StateCode: { type: "string" },
                                    StateName: { type: "string" }
                                }
                            }
                        }
                    },
                    filterable: false,
                    sortable: true,
                    autoBind: true,
                    navigatable: true,
                    pageable: true,
                    height: 390,
                    editable: "inline",
                    toolbar: ["create"]
                };

 

My API method (ASP.NET MVC):

[HttpPost]
public JsonResult State_Save([System.Web.Http.FromBody]State state)
{
    string _return = "0";

    // I WILL CHECK IF THIS UPDATE WILL BE OK,
    // IF NOT I WILL CHANGE TO "1"

    return Json(_return, JsonRequestBehavior.AllowGet);
}

The list of states appears, but when I try to edit and click the "Update" button the below error appears.

jQuery.Deferred exception: Unexpected number SyntaxError: Unexpected number

 

 

 

[ziental]

Only one fix in the code above, the Update url is wrong.

 

$scope.gridOptions = {
    columns: [
        {
            command: [
                { name: "edit", text: " "},
                { name: "destroy", text: " " }
            ], title: " ", width: 230
        },

        { field: "StateID", title: "ID", width: 70 },
        { field: "StateCode", title: "Code", width: 70 },
        { field: "StateName", title: "Name" }
    ],
    dataSource: {
        pageSize: 5,
        batch: false,
        transport: {
            read: {
                url: "/Definitions/Country/State_Get_List/" + ID,
                dataType: "json",
                type: "GET",
                contentType: "application/json; charset=utf-8"
            },
            update: function (opt) {
                $http.post("/Definitions/Country/State_Save/", '"' + opt.data.model + '"')
                    .success(function (res) {
                        if (res === '0') {
                            alert('you can not update this');
                        }
                        else {
                            alert('Success!');
                        }
                    });

            },
            create: function (opt) {
                alert('create');
                opt.sucess();
            },
            destroy: function (opt) {
                alert('destroy');
                opt.sucess();
            }
        },
        schema: {
            model: {
                id: "StateID",
                fields: {
                    StateID: { editable: false, type: "number", nullable: true },
                    StateCode: { type: "string" },
                    StateName: { type: "string" }
                }
            }
        }
    },
    filterable: false,
    sortable: true,
    autoBind: true,
    navigatable: true,
    pageable: true,
    height: 390,
    editable: "inline",
    toolbar: ["create"]
};

[Konstantin Dikov]

Hi Zdzislaw,

The error is due to the response from the AJAX request, which should be a valid JSON. You could check the following forum thread for the same error:

• https://www.telerik.com/forums/update-success-but-js-error-uncaught-syntaxerror-unexpected-number

Best Regards,
Konstantin Dikov
Progress Telerik