Как динамически добавить строку внизу Kendo inline Grid - - PullRequest
Новая
       9

Как динамически добавить строку внизу Kendo inline Grid -

0 голосов
/ 11 октября 2018

Как добавить строку в нижней части встроенной сетки Kendo Динамически в Угловая 4 .

  1. Как автоматически добавить новую строку при добавлении последней ячейки последней строки?

1 Ответ

0 голосов
/ 11 октября 2018

Трудно помочь вам без кода.Но вот что вы можете сделать: 

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

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/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.911/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      $("#grid").kendoGrid({
        dataSource: {
          data: [{ Name: "John Doe", Age: "31" }]
        },
        editable: "incell"
      });
      
      $("#grid").on("focusout", "input", function() {
        let grid = $("#grid").data("kendoGrid"),
            $td = $(this).closest("td"),
            $tr = $td.parent(),
            tdCount = $tr.find("td").length;
        
        if ($td.index() == (tdCount - 1)) {
          // Add a new empty row at the beginning
          //grid.addRow();
          
          // Add a new empty row at the end
          grid.dataSource.add({});
          grid.editCell(grid.tbody.find("tr:last td:first")); // Open the cell for editing
        }
      });
    });
  </script>
</head>
<body>
  <div id="grid"></div>
</body>
</html>

Основной код: 

$("#grid").on("focusout", "input", function() {
    let grid = $("#grid").data("kendoGrid"),
        $td = $(this).closest("td"),
        $tr = $td.parent(),
        tdCount = $tr.find("td").length;

    if ($td.index() == (tdCount - 1)) {
      // Add a new empty row at the beginning
      //grid.addRow();

      // Add a new empty row at the end
      grid.dataSource.add({});
      grid.editCell(grid.tbody.find("tr:last td:first")); // Open the cell for editing
    }
});

Демо

...