Kendo ui KendoUI网格主按钮和详细按钮错误

如果主行和明细行按钮使用相同的名称，则会收到这些按钮的双击事件。我认为剑道ui用k-grid-{Your Button Name}类属性来绑定事件。不要在主控行和明细行中使用相同的按钮名称

name: btnName,
template: '<a class="k-button k-button-icontext k-grid-' + btnName +'" ><span class="k-icon k-i-refresh"></span></a>',
click: function (e) {

---

网格将带有k-Grid-xxx类的按钮解释为内置命令，这些命令确实应该具有唯一的名称。如果不需要这样做，您可以设置CSS类，该类不以k-grid模式开头，并通过jQuery手动附加click处理程序

I create two button functions for delete operation. 

第一个函数名是deleteButton，它总是返回相同名称的“Delete”按钮

第二个函数名是deleteButton2，由于prmName参数的原因，它可以返回不同的名称按钮

请检查确认信息中的PRUDDUCT名称，查看详细信息网格中的两个按钮。我们将看到不同的消息

因为相同名称的按钮触发“主”和“详细”的两次单击事件。 您可以在调试中看到它

因此，我们不使用相同的名称为细节和主网格按钮

var sampleData=[{ 产品编号：1， 产品名称：苹果iPhone 5s， 介绍：新日期2013年8月10日， 售价:525， 中止：错误， 单位股票：10 }, { 产品编号：2， 产品名称：HTC One M8， 介绍：新日期2014年2月25日， 单价：425， 中止：错误， 单位股票：3 }, { 产品编号：3， 产品名称：诺基亚5880， 介绍：新日期2008年10月2日， 售价:275元， 中止：是的， 单位股票：0 }]; 函数数据源{ 返回新的kendo.data.DataSource{ 运输：{ 阅读：功能E{ e、 成功样本数据； }, 创建：函数{ e、 data.ProductID=nextIdsampleData； sampleData.push.data； e、 成功数据； }, 更新：functione{ sampleData[GetIndexBydSampleData，e.data.ProductID]=e.data； e、 成功； }, 破坏：功能{ sampleData.StipleGetIndexBydSampleData，e.data.ProductID，1； e、 成功； } }, 错误：functione{ alertStatus:+e.status+；错误消息：+e.ErrorRown； }, 页面大小：10， 批次：假， 模式：{ 型号：{ id:ProductID， 字段：{ ProductID:{ 可编辑：false， 可为空：真 }, 产品名称：{ 验证：{ 必填项：true } }, 介绍：{ 类型：日期 }, 单价：{ 类型：数字， 验证：{ 要求：正确， min:1 } }, 中止：{ 类型：布尔型 }, 单位股票：{ 类型：数字， 验证：{ 分:0,， 必填项：true } } } } } }; }; var sampleDetailData=[{ 产品编号：11， 产品名称：详细信息产品1 }, { 产品编号：12， 产品名称：详细信息产品2 }, { 产品编号：13， 产品名称：详细信息产品3 }]; 函数详细信息数据源{ 返回新的kendo.data.DataSource{ 运输：{ 阅读：功能E{ e、 successsampleDetailData； }, 创建：函数{ e、 data.ProductID=nextIdsampleDetailData； sampleDetailData.push.data； e、 成功数据； }, 更新：functione{ sampleDetailData[GetIndexBydSampleDetailData，e.data.ProductID]=e.data； e、 成功； }, 破坏：功能{ sampleDetailData.StipleGetIndexBydSampleDetailData，e.data.ProductID，1； e、 成功； } }, 错误：functione{ alertStatus:+e.status+；错误消息：+e.ErrorRown； }, 页面大小：10， 批次：假， 模式：{ 型号：{ id:ProductID， 字段：{ ProductID:{ 可编辑：false， 可为空：真 }, 产品名称：{ 验证：{ 必填项：true } } } } } }; }; 函数细节初始化{ var detailRow=e.detailRow； detailRow.finddetailGrid.kendoGrid{ dataSource:detailDataSource， pageable:对， 工具栏：[创建]， 栏目：[{ 字段：ProductName， 标题：手机 }, { 命令：[编辑，删除按钮，删除按钮2详细删除]， 标题：， 宽度：200px }], 可编辑：{ 模式：弹出， 确认：错误 } }; }; 函数nextiprmdata{ 返回prmData.length+1； }; 函数getIndexBydPMData，id{ var idx， l=prmData.length； 对于变量j；j 对 不

---

我不会把这个问题称为bug。您正在经历的是事件传播。您的detail delete按钮和master delete按钮共享相同的名称，Kendo UI使用此名称作为元素类名称（即“k-grid-delete”）关联事件的一部分，如您所知

当您在子详细信息按钮上触发click事件时，它会向上传播DOM树。瞧，当事件冒泡时，它会发现一个具有相同类名的主删除按钮，因此，它的单击事件也会触发

要停止这种行为，请停止删除按钮的单击事件中的传播

var deleteButton = function() {
  return {
    name: "Delete",
    click: function(e) {
      // insert this line - it stops the event from bubbling up the DOM tree
      e.stopPropagation();

      var grid = this;
      var row = $(e.currentTarget).closest("tr");
      var data = this.dataItem(row);
      dWindow.content(windowTemplate(data));
      dWindow.open().center();

      $("#yesButton").click(function() {
        grid.removeRow(row);
        dWindow.close();
      });
      $("#noButton").click(function() {
        dWindow.close();
      });

      console.log('deleteButton hit!');
    }
  };
};

---

这不是一个bug。您没有正确使用它。我对所有删除操作都使用确认方法。如果你想使用相同的方法，你可以看到这个bug。请提供一个工作示例来说明这个bug。Brett，我为这种情况发布了一个示例。我不会把这种行为称为bug。请参阅我的答案。谢谢您的回答，但常规定义创建了相同的类元素，并且对这两个元素都正确工作。如果我们忽略它，我们可能会有一些问题。但是你没有使用常规的定义，即destroy。您正在创建自定义操作，因此，框架希望您自己处理这样的条件。