、私はフィドルに別々剣道グリッドを有する

剣道グリッドの一つに2つの機能を組み合わせる
私は、グリッド内の各列にThreeDotsを選択すると、それは削除示すべき
フィドルにseprately機能を削除有します小さなポップアップで削除をクリックすると確認のポップアップが開きます。
私はそれを特定の行を削除する必要がありますし、私がそれを削除する必要がありますいいえをクリックした後削除しないでください。 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; 
}

出典

2017-08-13 texi rv

剣道は、行を削除することができます機能が組み込まれていますので、あなたが別々に機能を削除することの目的が何であるかわからないの下のコードとフィドルを提供

。削除する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デモ削除の確認

出典

2017-08-14 23:52:36

、私はフィドルに別々剣道グリッドを有する

答えて

関連する問題