Kendo DataBound объект e.model VS Редактировать объект e.model - PullRequest
Новая
       52

Kendo DataBound объект e.model VS Редактировать объект e.model

0 голосов
/ 28 января 2020

Я использую событие Kendo DataBound для печати модели из строки, инициирующей событие, проблема, с которой я сталкиваюсь, заключается в том, что модель не определена при использовании DataBound, отличного от использования события Edit. 

.Events(e => { e.DataBound(@<text>function(e) { alert(e.model); }</text>) })

Проблема в том, что, очевидно, e.DataBound не обрабатывает аргумент e как Edit, Cancel и остальные события.

При попытке с e.Edit(@<text>function(e) { alert(e.model); }</text>) объект e.model загружается со свойствами и значениями .

Есть ли способ достичь этого?

1 Ответ

0 голосов
/ 30 января 2020

Этого можно добиться, используя только jQuery: 

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

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/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/2020.1.114/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
  <script>
  	$(function() {
      $('#grid').kendoGrid({
         dataSource: {
           data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
         },
      });
      
      let grid = $("#grid").data("kendoGrid");
      
      $("#grid").on('click', 'tbody td', function(e) {
        let $td = $(e.target),
            dataItem = grid.dataItem($td.parent()),
            cellContent = dataItem[$td.data('field')];
        
        console.log($td, dataItem, cellContent);
      });
    });
  </script>  
</head>
<body>
  <div id="grid"></div>
</body>
</html>

Демо

Или с помощью события change сетки. Но чтобы использовать это событие, вам нужно установить сетку selectable на true: 

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

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/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/2020.1.114/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
  <script>
  	$(function() {
      $('#grid').kendoGrid({
         dataSource: {
           data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
         },
         selectable: true,
         change: function() {
           let dataItem = this.dataItem(this.select());
           
           console.log(dataItem);
         }
      });
    });
  </script>  
</head>
<body>
  <div id="grid"></div>
</body>
</html>

Демо

...