Unable inline editing in kendo ui grid for jquery without hitting the controller method.

[Umang]

I have a jQuery grid where i enabled inline editing for some fields, but I want to edit multiple rows and allow to get data updated locally, and on any button click it should it the method/api. But if I set the autosync property to false I can not update the record in the grid.

@{
    Layout = null;
}

<link href="https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.100/styles/kendo.default-v2.min.css" />
<script src="~/Scripts/kendo.all.min.js"></script>

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            var crudServiceBaseUrl = "/Kendo",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/IndexGrid",
                            dataType: "json"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/UpdateUserDetails",
                            type : "POST",
                            dataType: "json"
                        },
                        //destroy: {
                        //    url: crudServiceBaseUrl + "/detailproducts/Destroy",
                        //    dataType: "jsonp"
                        //},
                        parameterMap: function (options, operation) {
                            debugger;
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    batch: true,
                    pageSize: 20,
                    autoSync: true,
                    //aggregate: [{
                    //    field: "TotalSales",
                    //    aggregate: "sum"
                    //}],
                    //group: {
                    //    field: "Category.CategoryName",
                    //    dir: "desc",
                    //    aggregates: [
                    //        { field: "TotalSales", aggregate: "sum" }
                    //    ]
                    //},
                        schema: {
                        model: {
                            id: "UserLink",
                            fields: {
                                UserLink: { editable: false, nullable: true },
                                UserName: { type: "string", editable: true },
                                Mobile: { type: "number", editable: true },
                                Email: { type: "string", editable: true },
                                DOB: { type: "date", editable: true },
                                CourseOpt: { type: "string", editable: true, nullable: true },
                            }
                        }
                    }
                });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                columnMenu: {
                    filterable: false
                },
                height: "100%",
                editable: "popup",
                pageable: true,
                sortable: true,
                navigatable: true,
                resizable: true,
                reorderable: true,
                groupable: true,
                filterable: true,
                dataBound: onDataBound,
                toolbar: ["excel", "pdf", "search", "create", "save", "cancel"],
                pdfExport: function (e) {
                    const width = e.sender.wrapper.width();
                    e.sender.wrapperClone.width(width);
                    e.sender.wrapperClone.addClass('k-clone');
                },
                columns: [
                    {
                        field: "UserName",
                        title: "UserName",
                        width: 300
                    },
                    {
                        field: "Mobile",
                        title: "Mobile"
                    },
                    {
                        field: "Email",
                        title: "Email ID",
                        width: 130,
                    },
                    {
                        field: "DOB",
                        title: "DOB",
                        editor: datePickerEditor,
                        width: 125
                    }, {
                        field: "CourseOpt",
                        title: "CourseOpt",
                        editor: clientCourseEditor,
                        width: 200,
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: 120 }],
                      saveChanges: function (e) {
                        // Manually sync changes
                        dataSource.sync();
                    }
            });
        });

        function clientCourseEditor(container, options) {
            $('<input required name="CourseOpt">')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataTextField: "Title",
                    dataValueField: "CourseLink",
                    dataSource: {
                        transport: {
                            read: {
                                url: "/Kendo/CourseDtls",
                                dataType: 'json'
                            }
                        }
                    }
                });
        }

        function datePickerEditor(container, options) {
            $('<input data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDatePicker({
                    format: "dd/MM/yyyy"
                });
        }

        function onDataBound(e) {
            debugger;
            var grid = this;
            grid.table.find("tr").each(function () {
                var dataItem = grid.dataItem(this);
                kendo.bind($(this), dataItem);
            });
        }

        //function returnFalse() {
        //    return false;
        //}
    </script>
</div>

[Nikolay]

Hi Umang,

Mixing different types of editing Grid modes is not supported. 

You can however implement custom logic in the save event handler to achieve the desired. Here is a sample logic for ProductName column only:

            save: function(e) {
              // get ProductName value
              let productName = e.container.find("#ProductName").data("kendoTextBox").value()
              e.preventDefault();
              // get uid of the row 
              let dataUID = e.container.attr("data-uid")
              let id = e.model.id-1;
              var grid = $("#grid").data("kendoGrid");
              //get the data item
              var dataItem = grid.dataItem("tbody tr:eq(" + id + ")");

              //click the cancel vutton
              $(e.container).find(".k-grid-cancel-command").click();
              // find the ProductName cell that was edited
              let productNameCell = $('#grid tbody').find("tr[data-uid=" + dataUID +"]").find("td").first();
              //update the cell and the property without syncing the data source
              productNameCell.html(productName);
              dataItem.ProductName = productName;
              dataItem.dirty = true;
            }

Dojo demo: https://dojo.telerik.com/UNUYEbOQ

Please note this is a customization that is not officially supported and the logic is entirely up to you.

Regards,
Nikolay
Progress Telerik