kendo grid multiple cell selection

2 posts, 0 answers
  1. balamurugan
    balamurugan avatar
    1 posts
    Member since:
    Dec 2016

    Posted 02 Jan Link to this post

    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>

     

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    269 posts

    Posted 03 Jan Link to this post

    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 visualization (charts) and form elements.
Back to Top