Create new and Delete operations do not work on my jQuery Grid.

0 Answers 36 Views
BottomNavigation Button FloatingActionButton General Discussions Grid TextBox
Ar
Top achievements
Rank 1
Ar asked on 23 Nov 2021, 07:59 AM

I have API hosted on asp net core, through Swagger and Postman it works just fine, but when I try to access it through Jquery Grid of Kendo it only reads data but doesn't add nor delete.

Can you tell me what am I doing wrong here?

My  .NET Controllers:

 [HttpDelete]
        public async Task<ActionResult> Delete(Guid id)
        {
            await _mediator.Send(new DeleteProductCommand.Command { Id = id });
            return NoContent();
        }

 [HttpPost]
        [ProducesResponseType(StatusCodes.Status200OK)]
        public async Task<ActionResult<ProductResponse>> Create([FromBody] CreateProductCommand command) => await _mediator.Send(command);

 

My Jquery Grid

<script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "https://localhost:44393/api",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + "/Product",
                                    dataType: "json"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Product/Create",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    type: "POST"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Product/Delete",
                                    type: "DELETE",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType: 'json'
                                },
                                parameterMap: function (options, operation) {
                                    if (operation !== "read" && options) {
                                        return kendo.stringify(options);
                                    }
                                }

                            },

                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "id",
                                    fields: {
                                        id: { editable: false, nullable: false },
                                        productName: { type: "string", editable: true },
                                        productSKU: { type: "string", editable: true },
                                        productType: { type: "string", editable: true },
                                    }
                                }
                            }
                        });



                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        columnMenu: {
                            filterable: false
                        },

                        height: 680,
                        editable: "inline",
                        pageable: true,
                        sortable: true,
                        navigatable: true,
                        resizable: true,
                        reorderable: true,
                        groupable: true,
                        filterable: true,
                        dataBound: onDataBound,
                        toolbar: ["excel", "pdf", "create", "search", "save", "delete"],
                        columns: [{
                            selectable: true,
                            width: 75,
                            attributes: {
                                "class": "checkbox-align",
                            },
                            headerAttributes: {
                                "class": "checkbox-align",
                            }
                        }, {
                            field: "productName",
                            title: "Product Name",
                            template: "productName",
                            width: 300
                        }, {
                            field: "productSKU",
                            title: "productSKU",
                            width: 105
                        }, {
                            field: "productType",
                            title: "productType",
                            width: 130,
                        }, {
                            field: "id",
                            title: "id",
                            width: 105
                        },
                            { command: "destroy", title: "Action", width: 120 }],
                    });
                });          


                function onDataBound(e) {


                } ;

</script>

                                     
Nikolay
Telerik team
commented on 25 Nov 2021, 10:30 AM

No answers yet. Maybe you can help?

Tags
BottomNavigation Button FloatingActionButton General Discussions Grid TextBox
Asked by
Ar
Top achievements
Rank 1
Share this question
or