Kendo grid CRUD doesn’t persist in the server side

The create method sends “null” values, the delete method returns a 404 not found, and the put method only clears the edited field. (all methods are working in postman).

I’m not sure how Kendo UI sends the to the API, but my create method waits for the parameters in the body, the delete method waits for the id in the URL(localhost:3000/api/comment/32). My put method also waits for parameters in the body (JSON).

I’m probably doing something wrong, but I don’t know what it is.

Here is the code and the screens (the screen is from the post method):

enter image description here

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="styles/kendo.common.min.css">
    <link rel="stylesheet" href="styles/kendo.default.min.css">
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">

  </head>
  <body>
   
<div id="example">
    <div id="gridComment"></div>
    <script>
        $(document).ready(function () {
            
          var commentDataSource = new kendo.data.DataSource({
            //autoSync : true,
            transport: {
                            read:{
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "get",
                                //contentType: "application/json"
                            },
                            update: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "put",
                                //contentType: "application/json"
                            },
                            create: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "post",
                            },
                            destroy: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "delete",
                                //contentType: "application/json"
                            },
                            
                        },
                        schema:{
                            type: "json",
                            model:{
                                id: "idvatc",
                                fields:{
                                    idvatc: { type: "number", editable : false},
                                    commen: { nullable: true},
                                }   
                            }
                        },
                        batch: true,

          })

             $("#gridComment").kendoGrid({
                    dataSource : commentDataSource,
                    editable: true,
                    confirmation: false,
                    toolbar: ["save", "cancel","create"],
                    columns : [{
                        field : "commen",
                        title : "Comment"
                    },
                    { command: ["edit","destroy"], title: "Actions", width: 200 }
                    ],
                    

                });


        });

        
    </script>

    
</div>


    

</body>
</html>

Answer

Ok, I think I see your problem. Kendo is sending a application/x-www-url-formencoded content type and I’m guessing your endpoint only accepts application/json. Two solutions, either make your endpoint accept x-www-url-formencoded or prefilter the Ajax request before it is sent.

Haven’t done any Nodejs work so I can’t offer pointers. However, if your endpoint is Java, in Spring it was simply removing the @ResponseBody annotation.

Next option is to prefilter the Ajax request. This example modifies the URL, so this could work in your Delete method. First off is modifying your transport to something like so:

transport: {
    read: {
        url: url,
        contentType: 'application/json',
        dataType: 'json',
        type: options.httpRequestType,
        beforeSend: beforeSend, // function to call before sending the request
        data: function(data) {
            if (options.httpRequestType === 'POST') {
                return {
                    preFilterMe: true,
                    parameters: options.parameters,
                    page: data.page,
                    itemsPerPage: data.pageSize,
                };
            }

            return {
                page: data.page,
                itemsPerPage: data.pageSize,
            };
        },
    },
},

In the above example, if the request is a POST, it returns more data to be used in prefiltering.

Here I change the URL and put the JSON data in the body if it is a POST and prefilter is true.

$.ajaxPrefilter(function(options, originalOptions, xhr) {
    if (originalOptions.type === 'POST' && 
        originalOptions.data.preFilterMe) {
        
        options.url = options.url + '?page=' + originalOptions.data.page
            + '&itemsPerPage=' + originalOptions.data.itemsPerPage;

        if (originalOptions.data.parameters.length > 0) {
            options.data = JSON.stringify(originalOptions.data.parameters);
        }
    }
});

Hope this example will guide you to a solution.