Редактировать ячейку Kendo Grid с помощью кнопки внутри ячейки - PullRequest
Новая
       6

Редактировать ячейку Kendo Grid с помощью кнопки внутри ячейки

0 голосов
/ 06 ноября 2018

Моя проблема заключается в следующем:

Я добавил кнопки редактирования строки сетки в качестве шаблонов. Теперь я хочу разрешить редактирование текста ячейки, когда я нажимаю «кнопку редактирования» внутри этой ячейки.

enter image description here

У кого-нибудь есть идеи, как мне это сделать? Как включить редактирование ячейки, в которой находится кнопка?

Добавление шаблона: 

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

Вот что я пробовал 

$(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");
                                });

Если у кого-нибудь есть идеи, это было бы замечательно. Извините, если пост уже существует, но я не смог найти ответы на этот вопрос. Если есть, пожалуйста, укажите мне на них.

1 Ответ

0 голосов
/ 06 ноября 2018

Ты почти понял. Чтобы использовать editCell(), вам нужно передать ему элемент td. Вы передаете button.

Просто измени это ... 

var cell = $(cellElement);

К этому ... 

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>

Демо

...