Kendo UI grid команда запускает несколько функций из разных командных кнопок - PullRequest
Новая
       8

Kendo UI grid команда запускает несколько функций из разных командных кнопок

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

У меня есть сетка интерфейса пользователя Kendo с 3 командными кнопками: 

$('#Grid').kendoGrid({
    columns: [{
        field: "Data1",
    },
    {
        field: "Data2"
    },
    {
    command: [{
        text: " ",
        click: testFunction,
        iconClass: "fa fa-align-justify"
    },
    {
        text: " ",
        click: testFunction2,
        iconClass: "fa fa-code"
     },
     {
         text: " ",
         click: testFunction3,
         iconClass: "fa fa-database"
     }]
     }],
     dataSource: {
          pageSize: 10,
          data: data
     }
});

С этими функциями: 

testFunction: function () {
    alert("testFunction");
},

testFunction2: function () {
    alert("testFunction2");
},

testFunction3: function () {
    alert("testFunction3");
}

Но когда я нажимаю одну из командных кнопок, все 3функции запускаются.

Кто-нибудь знает, почему это происходит?

Есть ли способ предотвратить такое поведение, так что срабатывает только функция, подключенная к нажатой кнопке?

1 Ответ

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

Добавьте свойство name к каждой кнопке, например: 

command: [{
    text: " ",
    click: testFunction,
    iconClass: "fa fa-align-justify",
    name: "btn1"
}

Демо : 

<!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() {
      var testFunction= function () {
        alert("testFunction");
      },

      testFunction2= function () {
          alert("testFunction2");
      },

      testFunction3= function () {
          alert("testFunction3");
      };
      
      $('#Grid').kendoGrid({
          columns: [{
              field: "Data1",
          },
          {
              field: "Data2"
          },
          {
          command: [{
              text: " ",
              click: testFunction,
              iconClass: "fa fa-align-justify",
            name: "btn1"
          },
          {
              text: " ",
              click: testFunction2,
              iconClass: "fa fa-code",
            name: "btn2"
           },
           {
               text: " ",
               click: testFunction3,
               iconClass: "fa fa-database",
            name: "btn3"
           }]
          }],
        dataSource: {
          pageSize: 10,
          data: [{a: 1}]
        }
      });
    });
  </script>
</head>
<body>
  <div id="Grid"></div>
</body>
</html>
...