New to Kendo UI for jQuery? Download free 30-day trial

Retrieve deleted rows on click

Environment

Product Grid for Progress® Kendo UI®
Product Version 2018.3.911

Description

Is there any way to can retrieve deleted Rows on Click of custom button using incell editing?

Solution

It is possible to get hold of the destroyed items in the data source with the help of the destroyed() internal method. It returns a collection of the destroyed items before they are synced. However, please be cautious of its usage and test it when moving to new versions. Since it is not a publically revealed property, it may be subject to change.

```       
    function getDestroyed(){
        var grid = $("#grid").data("kendoGrid");
        var destroyed = grid.dataSource.destroyed();
        kendo.alert(kendo.stringify(destroyed));
    }
```
    <div id="example">
        <button class="k-button k-primary" onclick="getDestroyed()">Get Detroyed</button>
        <div id="grid"></div>
        <script>
            function getDestroyed(){
              var grid = $("#grid").data("kendoGrid");
              var destroyed = grid.dataSource.destroyed();
              kendo.alert(kendo.stringify(destroyed));
            }

            var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                dataSource = new kendo.data.DataSource({
                     transport: {
                         read:  {
                             url: crudServiceBaseUrl + "/Products",
                             dataType: "jsonp"
                         },
                         update: {
                             url: crudServiceBaseUrl + "/Products/Update",
                             dataType: "jsonp"
                         },
                         destroy: {
                             url: crudServiceBaseUrl + "/Products/Destroy",
                             dataType: "jsonp"
                         },
                         create: {
                             url: crudServiceBaseUrl + "/Products/Create",
                             dataType: "jsonp"
                         },
                         parameterMap: function(options, operation) {
                             if (operation !== "read" && options.models) {
                                 return {models: kendo.stringify(options.models)};
                             }
                         }
                     },
                     batch: true,
                     pageSize: 20,
                     schema: {
                         model: {
                             id: "ProductID",
                             fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                Discontinued: { type: "boolean" },
                                UnitsInStock: { type: "number", validation: { min: 0, required: true } 
                            }
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                navigatable: true,
                pageable: true,
                height: 550,
                toolbar: ["create", "save", "cancel"],
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                    { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                    { field: "Discontinued", width: 120},
                    { command: "destroy", title: "&nbsp;", width: 150 }],
                editable: true
            });
        </script>
    </div>

See Also

In this article
Not finding the help you need? Improve this article