This is a migrated thread and some comments may be shown as answers.

kendo grid multiple cell selection

1 Answer 579 Views

Grid

This is a migrated thread and some comments may be shown as answers.

balamurugan asked on 02 Jan 2017, 01:40 PM

Hi,

I am working in the kendo grid copy and paste functionality from the excel sheet.

Please find the attached file and help me out to select multiple cell by clicking on the control button.

Thanks in Advance

Regards,

Bala

Not able to attach the code. Please refer the below code which I am currently using

<html>

<head>
<title>

</title>

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>

<body>
<div style="width:auto; height:auto">
<div id="grid_json_copy" style="float:left;"></div>

<div style="float:left;width:4%;"> </div>

<div id="grid_json_paste" style="float:left;"></div>

<div style="clear:both;"></div>

</div>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
selectable: "multiple, cell",
allowCopy: true,
columns: [{
field: "productName"
},
{
field: "category"
},
{
field: "amount"
}
],
editable: true,
dataSource: [{
productName: "Tea",
category: "Beverages",
amount: "10.00"
},
{
productName: "Coffee",
category: "Beverages",
amount: "10.00"
},
{
productName: "Ham",
category: "Food",
amount: "10.00"
},
{
productName: "Bread",
category: "Food",
amount: "10.00"
}
]
}).on('focusin', function(e) {
// get the grid position
var offset = $(this).offset()
// crete a textarea element which will act as a clipboard
var textarea = $("<textarea>");
// position the textarea on top of the grid and make it transparent

textarea.css({
position: 'absolute',
opacity: 0,
top: offset.top,
left: offset.left,
border: 'none',
width: $(this).width(),
height: $(this).height()
})
.appendTo('body') .on('paste', function() {
// handle the paste event
setTimeout(function() {
// the the pasted content
var value = $.trim(textarea.val());
// get instance to the grid
var grid = $("#grid").data("kendoGrid");
// get the pasted rows - split the text by new line
var rows = value.split('\n');

var item = grid.select();
var currentRowIndex;

item.each(function() {
currentRowIndex = $(this).closest("tr").index();
})

var selectedColumnIndex = [];
var rowIndex;
for (var i = 0; i < item.length; i++) {
selectedColumnIndex[i] = item[i].cellIndex;

}

var items = grid.dataSource.data();
var count = 0;

for (var i = currentRowIndex; i <= items.length; i++) {

var item = items[i];

if (count > rows.length) {
break;
}

var cells = rows[count].split('\t');

var productName = item.productName;
var category = item.category;
var amount = item.amount;
var copiedColumnCount = 0;

for (var j = 0; j < 3; j++) {

if (selectedColumnIndex.indexOf(j) > -1) {

if (cells[copiedColumnCount] != 'undefined') {
if (j === 0) {
productName = cells[copiedColumnCount];
}
if (j === 1) {
category = cells[copiedColumnCount];
}
if (j === 2) {
amount = cells[copiedColumnCount];
}
copiedColumnCount++;

}
}

}

grid.dataSource.remove(item);

var datasource = grid.dataSource;
var newRecord = {
productName: productName,
category: category,
amount: amount
};

//Inserting new row
datasource.insert(i, newRecord);

count++;
}
},0);
}).on('focusout', function() {
// remove the textarea when it loses focus
$(this).remove();
});
// focus the textarea
setTimeout(function() {
textarea.focus();
},0);

});
</script>
</body>

</html>

1 Answer, 1 is accepted

answered on 03 Jan 2017, 11:34 AM

Hi Balamurugan,

Thank you for the provided code snippet. I can see that it is based on a How-to article we have in our documentation here:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/excel/copy-from-excel-to-grid

I have a couple of suggestions related to the snippet:

1) Reduce and simplify the logic which obtains the dataItems from the selected cells(rows) with the help of the Kendo UI Grid API

- to obtain the selected dataItems from a multiple cell selectable Kendo UI Grid, you may use the select() method:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select

Note that the selectable type is 'cell', as a result, the select method will return a collection of <td> elements.

- loop over these elements to get their parents (the parent is a <tr> - corresponding to the row to which the selected dataItem is bound)

- use the Kendo UI Grid dataItem() method to get the dataItem bound to the <tr>

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

This is how the above looks in code:

// collect and remove all selected dataItems

var selectedRows = grid.select();

for (var i = 0; i < selectedRows.length; i++) {

var rowElement = $(selectedRows[i]).parent();

var dataItem = grid.dataItem(rowElement);

grid.dataSource.remove(dataItem);

}

2) Run the loop for creating new items from zero for each of rows.

I have updated the provided sample with these changes and you may run it here:

http://dojo.telerik.com/oDala

I hope this helps you get to where you need to be.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.