Catch event and getvalue of popup edit fields

[skunkies]

Dear All, quite newby with Kendo UI I am trying to adapt the grid editing-popup example (in the zip file).
I would like to catch the event of the update button and use the $.ajax function to send the values to update my database (same thing for delete and add).
How I can do that?
My code is as follow.
Thanks for your help

01.<script>
02.                $(document).ready(function () {
03.                    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
04.                        dataSource = new kendo.data.DataSource({
05.                            transport: {
06.                                read:  function (options) {
07.                                        $.ajax({
08.                                            type: 'GET',
09.                                            url: "http://localhost/telererik-kendoui/datasource.php",
10.                                            dataType: "json",
11.                                            success: function (result) {
12.                                                options.success(result);
13.                                            }
14.                                        });
15.                                },
16.                                update: function (e) {alert(this.data);options.success();
17.                                },
18.                                destroy: {
19.                                    url: crudServiceBaseUrl + "/Products/Destroy",
20.                                    dataType: "jsonp"
21.                                },
22.                                create: {
23.                                    url: crudServiceBaseUrl + "/Products/Create",
24.                                    dataType: "jsonp"
25.                                },
26.                                parameterMap: function(options, operation) {
27.                                    if (operation !== "read" && options.models) {
28.                                        return {models: kendo.stringify(options.models)};
29.                                    }
30.                                }
31.                            },
32.                            batch: true,
33.                            pageSize: 20,
34.                            schema: {
35.                                model: {
36.                                    id: "ProductID",
37.                                    fields: {
38.                                        ProductID: { editable: false, nullable: true },
39.                                        ProductName: { validation: { required: true } },
40.                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
41.                                        Discontinued: { type: "boolean" },
42.                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
43.                                    }
44.                                }
45.                            }
46.                        });
47.
48.                    $("#grid").kendoGrid({
49.                        dataSource: dataSource,
50.                        pageable: true,
51.                        height: 550,
52.                        toolbar: ["create"],
53.                        columns: [
54.                            { field:"ProductName", title: "Product Name" },
55.                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
56.                            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
57.                            { field: "Discontinued", width: "120px" },
58.                            { command: ["edit", "destroy"], title: " ", width: "200px" }],
59.                        editable: "popup"
60.                    });
61.                });
62.            </script>

[skunkies]

I though that it was quite obvious, but it seems that is not.....

[Daniel]

Hello,

If you wish to use the ajax method to make the requests then you should use custom functions for the operations as demonstrated in the documentation:

• update
• create
• destroy

For example:

update: function(options) {
    $.ajax({
        ...
        success: function(result) {
          options.success(result);
        },
        error: function(result) {
          options.error(result);
        }
    });
}

Regards,
Daniel
Telerik

 

 

[skunkies]

Hi thanks for your answer.
However, how I can get the data row to send to my server to update the database?

[Daniel]

Hello again,

The records are available in the options data and you can pass the data with the ajax method data option e.g.

update: function(options) {
    $.ajax({
        url: URL,
        type: "POST",
        contentType: "application/json",
        dataType: "json",
        data: kendo.stringify(options.data),
        success: function(result) {
          options.success(result);
        },
        error: function(result) {
          options.error(result);
        }
    });
}

However, what exactly should be sent depends on the service that you are using.

Regards,
Daniel
Telerik

 

 

[skunkies]

Hi,
thanks for your answer, butI have made a copy/paste of your code and set the url which points to a php file which take the data row and make an update to my database.
I got the following error when I click on the update button : Uncaught SyntaxError: Unexpected number - kendo.all.min.js:9 

[Daniel]

Hi,

The most likely reason for the error is that the response from the server is not valid. Could you check what is the response?

Regards,
Daniel
Telerik

 

 

[skunkies]

Hi Daniel,
In fact my php script take the data row, make an insert in the db and check if the isert has been successfull.
I yes, I return Ok, else, KO.
very simple for the moment.
I imagine to return the data row values if the insert has be done successfully to update the table.
Where am wrong?
One more thing, how I can output the kendo.stringify(options.data) in the console.log (not the kendo console, the Chrome console) ?

[Daniel]

Hi,

The response from the server should be the created item(s) with assigned ID returned as JSON instead of Ok, KO.

Outputting the value to the browser console can be done with the console.log method.

Regards,
Daniel
Telerik

 

 

[skunkies]

Could you please give me an example of a JSON correct response??

[skunkies]

I have now a JSON answer like this :[{"ProductID":1,"ProductName":"Myupdate","UnitPrice":11,"UnitsInStock":31,"Discontinued":true}​]

, but I got the following error 
Uncaught SyntaxError: Unexpected number

[Daniel]

Hi,

The JSON that you provided looks correct. Could you check what is the response from the server in the network traffic? Perhaps something else is also outputted by the server that is causing the error.  If only the JSON is outputted then could you provide the code that you are currently using for the grid and on the server so I can check the exact setup?


Regards,
Daniel
Telerik

 

 

[G]

Hi Please find attached my sample

[skunkies]

Hi Daniel,
Have you had the time to look on my issue?
It is really strange...

[Daniel]

Hi,

The error will be thrown with the provided code because a function is used for the update operation but not for read. If a custom function is used, then a function should be specified for all operations:

transport: {
    read:  function(options) {
        $.ajax({
            url: "../../datasource.php",
            dataType: "json",
            success: function(result) {
              options.success(result);
            },
            error: function(result) {
              options.error(result);
            }
        });
    },
    update: function(options) {
        $.ajax({
            url: "update.php",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: kendo.stringify(options.data),
            success: function(result) {
              options.success(result);
            },
            error: function(result) {
              options.error(result);
            }
        });
    },
    ...

Otherwise, you should set just the request options and use the parameterMap function to serialize the data:

transport: {
    read:  {
        url: "../../datasource.php",
        dataType: "json",
    },
    update: {
        url: "update.php",
        type: "POST",
        contentType: "application/json",
        dataType: "json"
    },
    ...
    parameterMap: function(options, operation) {
        if (operation !== "read") {
            return kendo.stringify(options);
        }
    }

Regards,
Daniel
Telerik

 

 

[skunkies]

Hi,  I am still getting an error...
I tried the both options (use a function for all operations and changed the ParameterMap as you indicated) but now the error is on success. I got this 
Uncaught TypeError: undefined is not a function on the line options.success(result);
Can you help please?

[Daniel]

Hello,

I am not sure what could be causing this error. I attached a small test project. Please check it and let me know if I am missing something.

Regards,
Daniel
Telerik