[Kendo UI] 엑셀데이터 Grid에 붙여넣기

엑셀의 데이터를 Grid에 그대로 붙여 넣을 때 사용한다.

 

Grid의 Cell이 정의되어있지 않을때에도 동작하는지 테스트 필요.

 

<div id="grid"></div>
<textarea id="ta" style="opacity: 0"></textarea>
<script>
$("#grid").kendoGrid({
    selectable: "multiple cell",
    allowCopy: true,
    columns: [
    { field: "productName0" },
    { field: "productName1" },
    { field: "productName2" },
    { field: "productName3" },
    { field: "productName4" }
    ],
    dataSource: [
    { productName0: "Tea", productName1: "Tea", productName2: "Tea", productName3: "Tea", productName4: "Tea" },
    { productName0: "Coffee", productName1: "Coffee", productName2: "Coffee", productName3: "Coffee", productName4: "Coffee"},
    { productName0: "Ham", productName1: "Ham", productName2: "Ham", productName3: "Ham", productName4: "Ham"},
    { productName0: "Bread", productName1: "Bread", productName2: "Bread", productName3: "Bread", productName4: "Bread"}
    ]
});

var grid = $('#grid').data('kendoGrid');

grid.element.on('keydown', function(e) {
    if(e.keyCode===86 && e.ctrlKey===true){
    var textarea = $("#ta");
    textarea.val("");
    textarea.focus();

    setTimeout(function(e){
        var value = $.trim(textarea.val());
        var grid = $("#grid").data("kendoGrid");
        var rows = value.split('\n');
        var data = [];

        for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].split('\t');
        for (var j = 0; j < cells.length; j++) {
            data.push(cells[j]);
        }
        };
        var select = grid.select();
        select.each(function(i, e){
        var cell = $(this);
        var row = cell.closest("tr");
        var dataItem = grid.dataItem(row);
        var dataField = $(grid.thead.find("th")[cell[0].cellIndex]).attr("data-field");

        dataItem[dataField] = data.shift()
        });
        grid.refresh();

    },1)
    }
})
</script>

Kendo Grid

참고 : https://docs.telerik.com/kendo-ui/knowledge-base/grid-copy-columns-from-excel-paste-on-selected-columns