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

kendo grid multiple cell selection

1 Answer 267 Views
Grid
This is a migrated thread and some comments may be shown as answers.
balamurugan
Top achievements
Rank 1
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%;">&nbsp;</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

Sort by
0
Alex Hajigeorgieva
Telerik team
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.
Tags
Grid
Asked by
balamurugan
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or