'Kendo Grid edit cell from button inside the cell

My problem is the following:

I've added to a grid row edit buttons as templates. Now what i want to do is to allow editing of the cell text when i click the "edit button" inside that cell.

Does anyone has any idea how can i acive this ? How can i enable the edit of the cell in which the button is ?

Adding the template:

template:
     "#if(" + columnWeekField + "!=null && IsEditable){#\<strong >#: " + columnWeekField + "# </strong> <span>(#:" + columnWeekFieldSum + "#) </span>  <button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button > \
                                             #}\

Here is what i've tried

$(grid.tbody).on("click", "[name='EditCell']", function (e) {

                                    var cellElement = this;
                                    var cell = $(cellElement);
                                    var grid = $("#grid").getKendoGrid();

      grid.editCell(cell);

                                    console.log("button clicked");
                                });

If anyone has any idea that would be great. I'm sorry if the post already exists but i couldn't find any answers on this. If there are please point me to them.

Solution 1:^[1]

You almost got it. To use editCell() you need to pass the td element to it. You are passing the button.

Just change this...

var cell = $(cellElement);

To this...

var cell = $(cellElement).closest("td");

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      let grid = $("#grid").kendoGrid({
        dataSource: {
          data: [{ A: 1, B: 2, C: 2}]
        },
        columns: [{
          field: "A",
          template: "#= data.A #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
        },{
          field: "B",
          template: "#= data.B #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
        },{
          field: "C",
          template: "#= data.C #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
        }],
        editable: true
      }).data("kendoGrid");
      
      $(grid.tbody).on("click", "[name='EditCell']", function (e) {
        var cellElement = this;
        var cell = $(cellElement).closest("td");
        var grid = $("#grid").getKendoGrid();

        grid.editCell(cell);
      });
    });
  </script>
</head>
<body>
  <div id="grid"></div>
</body>
</html>

Demo

Solution 2:^[2]

With kendo grid for jquery, something like this worked for me $("#grid").kendoGrid({

                    editable: "incell",
                    scrollable: true,
                    resizable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        previousNext: true,
                        responsive: false

                    },

                    noRecords: {
                        template: "<div class='container'>" + "<div class='row mb-3 '>" + "<div class='col-5 mx-auto'>" + "<div class='d-flex flex-column'>" +
                            "<img  class='w-50 mt-3 align-self-center' src='/Content/EbizAssets/No-Invocies-Found.svg'>" +
                            "<span><strong>No invoices found.</strong></span>" +
                            "</div>" + "</div>" + "</div>" + "</div>"
                    },
                    columns: [
                        {
                            selectable: true
                        },
                        {
                            field: "CustomerName",
                            title: "Customer Name",
                            editable: true
                        },
                                                
                        {
                            field: "AmountDue",
                            title: "Amount Due",
                            template:
                                "<span>$#= parseFloat(data.AmountDue).toFixed(2) #<span>" +
                                "<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-so' />",
                            width: 200,
                            format: "{0:c2}",
                            /*editable: true*/
                            
                        },
                        {
                            field: "EmailAddress",
                            title: "Email Address",
                            width: 260,
                            editable: false,
                            template: "#= EmailAddress #<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-ea' />"
                        },
                        
                    ],
                    selectable: "multiple, row",
                }).data("kendoGrid");
                
            }
        });
    });
} },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	DontVoteMeDown
Solution 2

'Kendo Grid edit cell from button inside the cell

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]