Question

我在小提琴中单独使用了剑道网格，
我在小提琴中分别删除了功能
当我在网格中的每一行中选择ThreeDots时，它应该在小弹出窗口中显示删除，当你点击删除确认弹出窗口时应该打开。
点击“是”后，它应删除该特定行，当我选择“否”时，不应该删除删除。试图以jquery方式显示我的删除确认框..提供下面的代码
你们能告诉我如何结合我的代码。
提供下面的代码和小提琴

http://jsfiddle.net/cjyh8Lyc/4/ https://jsfiddle.net/9qpLukrL/

<div class="sports">
    <div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
        <div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
                        <div class="kendoContent">Are you sure you want to upload file</div>
        </div><div class="clearFloat"></div>

        <div class="row kendoPopUpFooter textAligncenterImp">
                        <button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
                        <button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
        </div><div class="clearFloat"></div>
    </div>
</div>

$('.sports').show();
$('.sports').hide();


#runningDocumentsPopup .sports {
    position: relative;
}
.sports .kPopupConfirmationBox {
    display: block;
    z-index: 3;
    left: calc(50% - 175px);
    width: 350px;
    position: absolute;
}

.sports {
    display: none;
}

Answer 1

不确定你在单独删除功能的目的是什么，因为kendo内置了可以删除行的功能。你可以附加一个javascript函数来删除（你的代码在一个单独的文件中。

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="grid"></div>
  <script>
    var data = [
      { Id: 1, Name: "Decision 1", Position: 1 },
      { Id: 2, Name: "Decision 2", Position: 2 },
      { Id: 3, Name: "Decision 3", Position: 3 }
    ];

    var dataSource = new kendo.data.DataSource({
      //data: data,
      transport: {
        read: function(e) {                                
          e.success(data);
        },
        update: function(e) {                                
          e.success();
        }, 
        create: function(e) {
          var item = e.data;
          item.Id = data.length + 1;
          e.success(item);
        }
      },
      schema: {
        model: {
          id: "Id",
          fields: {
            Id: { type: "number" },
            Name: { type: "string" },
            Position: { type: "number" }
          }
        }
      }
    });

    var grid= $("#grid").kendoGrid({
      dataSource: dataSource,  
      scrollable: false,    
      editable : true,
      navigatable: true,
      toolbar:  ["save","cancel", "create"],
      columns: ["Id", "Name", "Position",{template:"<a class='mybutton'><span class=''></span>ThreeDots</a>"}]            
    }).data("kendoGrid");  

    grid.element.on('click','.mybutton',function(){


        //var dataItem = grid.dataItem($(this).closest('tr'));    
        //alert(dataItem.Name + ' was clicked');

         //built in kendo function to remove row          
         grid.removeRow($(this)); 



    })

  </script>
</body>
</html>

带删除确认的

Jsbin Demo演示

将两个功能合并为一个用于剑道网格

1 个答案: