Edit Cells on Double-Click in Grid

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

How can I edit cells on double-click in an editable Grid when selection is enabled?

Solution

1. Disable the built-in editing mechanism of the Grid.
2. Use the editCell and closeCell methods within the dblclick event of the td elements.

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/orders.js"></script>


<div id="grid"></div>

<script>
    $(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
        data: orders,
        pageSize: 6,
        schema: {
            model: {
            id: "OrderID"
            }
        }
        },
        pageable: {
        buttonCount: 5
        },
        scrollable: false,
        persistSelection: true,
        navigatable: true,
        columns: [
        {
            field: "ShipCountry",
            title: "Ship Country",
            width: 300
        },
        {
            field: "Freight",
            width: 300
        },
        {
            field: "OrderDate",
            title: "Order Date",
            format: "{0:dd/MM/yyyy}"
        }
        ]
    });

      $("#grid tbody").on("dblclick", "td", function(e) {
          var cellElement = this;
          var cell = $(cellElement);
          var grid = $("#grid").getKendoGrid();
          grid.editCell(cell);
      });

      $("#grid tbody").on("blur", "td", function(e) {
        var cellElement = this;
        var cell = $(cellElement);
        var grid = $("#grid").getKendoGrid();
                grid.closeCell(cell);
     });

    });
</script>