This is a migrated thread and some comments may be shown as answers.
Multirow select only returning first row of grid
4 Answers 21 Views
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 20 Apr 2016, 06:27 PM

My grid has "selectable: "row multiple"" set, and I want to make copies of all selected rows when a "Copy" custom button is pressed.

Please take a look at my code so far:

$('a.k-grid-copy').click(function (e) {
    e.preventDefault();
    var grid = $("#grid").data("kendoGrid");
    grid.select().each(function () {
        console.log(this);
        var selected = grid.dataItem(this);
        console.log(selected);
        grid.dataSource.add({
            a: selected.a,
            b: selected.b,
            c: selected.c
        });
                    
    });
});

When I console.log(this) in the body of the .each() function, the rows are logged correctly. However, grid.dataItem(this) will return the first selected row in the first loop iteration, then for all subsequent iterations, it will return the first row of the grid (whether or not it is selected). Why is this happening? As I stated above, this for each iteration is CORRECT, but when you set var selected to grid.dataItem(this), selected becomes the first selected row on the first iteration in .each(), then it becomes the first row in the grid on all subsequent iterations.

Here is a Dojo that recreates the problem: http://dojo.telerik.com/ApAJU

The issue only appears when selecting multiple rows. Try selecting any number of rows > 1, press the Copy button, and see the console. The <tr> elements are correct, but the JS objects are not. This does not happen when you do not add the rows after (a.k.a if you ONLY log and do not create copies, there is no problem). Thus, there is something wrong with adding the copies.

Thanks

Andy

4 Answers, 1 is accepted

Sort by
0
Andy
Top achievements
Rank 1
answered on 20 Apr 2016, 06:36 PM

I ended up finding a workaround where I store all the copied rows in an array during the .each(), and then re-loop through that array and add each row to the dataSource. 

However, if you could still provide an explanation as to why this behaviour occurred, that would be great.

0
Dimiter Madjarov
Telerik team
answered on 22 Apr 2016, 08:43 AM

Hello Andy,

The reason for this behavior is the invocation of grid.dataSource.add() in the loop. Modifying the dataSource will redraw the Grid table according to the new dataItems, so the selection is not existing after the first iteration.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chinmay
Top achievements
Rank 1
answered on 31 Mar 2021, 06:47 PM
Thanks a lot, this post helps me to select multiple rows on custom command button click.
0
Anton Mironov
Telerik team
answered on 02 Apr 2021, 11:02 AM

Hi Chinmay,

I am glad that the provided approach is the chosen one as per the requirements of your application.

If further assistance is needed, do not hesitate to contact the team.

 

Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Andy
Top achievements
Rank 1
Answers by
Andy
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Chinmay
Top achievements
Rank 1
Anton Mironov
Telerik team
Share this question
or