kendo ui jquery grid - checkbox row dataitem 삭제

javascript function

// using timestamp insted of sequence 
function deleteRows(){
    var grid = $("#grid").data("kendoGrid");
    grid.selectedKeyNames().forEach(function (x) {
        //console.log(x);
        var item = grid.dataSource.get(x);	        
        delete grid._selectedIds[x];
        grid.dataSource.remove(item);
    });
    bpaGrid.refresh();
} 

index 가 아닌 name으로 dataitem을 찾고 삭제하는 함수

// Well known function on internet
function deleteRows_doc(){
    var gridAdditive = $("#grid").data("kendoGrid");
    gridAdditive.selectedKeyNames().forEach(function (x) {
    var item = gridAdditive.dataSource.get(+x);    
    //console.log(kendo.stringify(item));    
    delete gridAdditive._selectedIds[+x]
    gridAdditive.dataSource.remove(item);
} 

index 로 dataitem을 찾고 삭제하는 함수

 

kendo ui api

docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/removerow

removeRow - API Reference - Kendo UI Grid | Kendo UI for jQuery

index보다 name 으로 찾는 게 정확하다. 

 

datasource

var dataSource = new kendo.data.DataSource({
    data : {{request_url or data_list}}
    , schema: {
        model: {
            fields: {
                price1  		: { type: "string" }                        
                , price2  			: { type: "number" }                                                
                , amt1   			: { type: "number" }
                , amt2   			: { type: "number" }                
            },
            id : "id"
        }
    }
    //, pageSize: 5
});  

id : "id" 추가하고 id에 유니크한 값을 입력할 것이다.

 

grid

 

//grid
$("#bpa-grid").kendoGrid({
    columns: [
        { selectable: true, width: "30px" }            	
        , { field:"price1", 			width:100, attributes:{"class":"r"}, title:"단가1"
            , template: "<div><input type=\"text\" name=\"price1\" value=\"#: currency(price1) #\" class=\"r\" style=\"width:100%;\" /></div>" }
        , { field:"price2", 			width:100, attributes:{"class":"r"}, title:"단가2"
            , template: "<div><input type=\"text\" name=\"price2\" value=\"#: currency(price2) #\" class=\"r\" style=\"width:100%;\" /></div>" }                    
        , { field:"amt1", 				width:100, attributes:{"class":"r"}, title:"합계1"
            , template: "<div><input type=\"text\" name=\"amt1\" value=\"#: currency(amt1) #\" readonly=\"readonly\" class=\"r\" style=\"width:100%;\" /></div>" }
        , { field:"amt2", 				width:100, attributes:{"class":"r"}, title:"합계2"
            , template: "<div><input type=\"text\" name=\"amt2\" value=\"#: currency(amt2) #\" readonly=\"readonly\" class=\"r\" style=\"width:100%;\" /></div>" }                    
        , { field:"id", 		hidden: true }                
    ]
    , dataSource: dataSource
    , height: 200
    , width: 500
    , resizable : false
    , filterable: false
    , persistSelection: true
    , sortable: true
    , pageable: false
    , excel: {
        fileName: "tempList.xlsx"
        , allPages: true
    }                        
    , dataBound: function(e){
        e.preventDefault();
        var grid = $("#grid").data("kendoGrid");
        var data = grid.dataSource.data();
        $.each(data, function (i, row) {
            if(data[i].id == ""){
                setTimeout(function(){
                    var guid = (window.performance && window.performance.now && window.performance.timing && window.performance.timing.navigationStart ? window.performance.now() + window.performance.timing.navigationStart : Date.now()) * 10000;		  	
                    data[i].id = guid;                			
                },500);
            }					
        });
    }
    , selectable: "multiple, row"
    , change: function(e) {
        var selectedRows = this.select();
        for (var i = 0; i < selectedRows.length; i++) {
            var dataItem = this.dataItem(selectedRows[i]);
            selectedDataItems.push(dataItem);
        } 

        //selectedDataItems contains all selected data items
        //console.log(this.selectedKeyNames().join(", "));
        }
}); 

databound -> $.each -> data[i].id = 유니크한 timestamp 값을 입력하고 키로 사용한다.