JQuery Remove（）は実際にグリッドから行を削除しません。

Question

グリッドから行を削除しようとしていましたが、最後にいくつかの検索をしてグリッドから行を削除できるようになりました。行が本当に削除されたことを二重チェックに行ったので、それは実際に削除されていないことに気付きました。

グリッドにあるフィルタを使用してこれを見つけました。削除された行データの1つをフィルタリングしたときに再び表示され、フィルタをクリアすると、削除されたすべての行が再び表示されました。

ここで私は多くのことを混乱させています。なぜ、行が隠されていて実際には削除されていないのですか。実際に行を削除してから行を削除し、これがうまくいかない理由は、グリッド内のデータが失われ、再度再入力する必要があるためです。今私はそれを見ているので、私は行を隠していると私はグリッドからすべてのデータを取ると私は行が削除されているため、私は問題が起こるだろうデータベースに追加する理由。

基本的な道場hereを作成して、私が言っていることが実際に起こっていることを示しました。

$(document).ready(function() { 
 
    var junkData = [{ 
 
     "DiscountID": 1, 
 
     "DealerDiscount": "15" 
 
    }, { 
 
     "DiscountID": 2, 
 
     "DealerDiscount": "16" 
 
    }, { 
 
     "DiscountID": 3, 
 
     "DealerDiscount": "17" 
 
    }, { 
 
     "DiscountID": 4, 
 
     "DealerDiscount": "18" 
 
    }, { 
 
     "DiscountID": 5, 
 
     "DealerDiscount": "19" 
 
    }, { 
 
     "DiscountID": 6, 
 
     "DealerDiscount": "20" 
 
    }, { 
 
     "DiscountID": 7, 
 
     "DealerDiscount": "21" 
 
    }, { 
 
     "DiscountID": 8, 
 
     "DealerDiscount": "22" 
 
    }, { 
 
     "DiscountID": 9, 
 
     "DealerDiscount": "23" 
 
    } 
 

 
    ]; 
 

 
    ShowGrid(junkData); 
 
}); 
 

 
function ShowGrid(userdata) { 
 

 
    $("#grid").kendoGrid({ 
 
    noRecords: { 
 
     template: "No Records Available" 
 
    }, 
 
    dataSource: { 
 
     data: userdata 
 
    }, 
 
    schema: { 
 
     model: { 
 
     DiscountID: "DiscountID" 
 
     } 
 
    }, 
 
    filterable: { 
 
     mode: "row" 
 
    }, 
 
    columns: [{ 
 
     title: "<input id='checkAll', type='checkbox', class='check-box' />", 
 
     template: "<input name='Selected' class='checkbox' type='checkbox'>", 
 
     width: "30px" 
 
     }, { 
 
     field: "DealerDiscount", 
 
     title: "Dealer Discount", 
 
     template: "<div style='text-align: center'>#= DealerDiscount #</div>" 
 
     }, { 
 
     title: "Delete", 
 
     template: "<button type='button' class='removeit'>X</button>" 
 
     } 
 
    ], 
 
    scrollable: true, 
 
    height: 856 
 
    }); 
 
} 
 

 
$(document).on('click', 'button.removeit', function() { 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
});

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.default.min.css"> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
 

 
<div id="grid"></div>

Answer 1

あなたは、モデルからのデータ/レコードを削除する必要がありますので、UIが、grid'dモデル/データソースで利用可能な、まだそのレコード/データから行のみ削除しました。

次のコードスニペットを試してください。

$(document).on('click', 'button.removeit', function() { 
    var currentrow = $(this).closest('tr'); 
    currentrow.remove(); 
    var grid1 = $('#grid').data('kendoGrid'); 
    var currItem = grid1.dataSource.getByUid($(currentrow).data('uid')); 
    grid1.dataSource.remove(currItem); 
    return false; 
});