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

Duplicating multiple rows in Grid

5 Answers 660 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Duke
Top achievements
Rank 1
Duke asked on 20 Dec 2016, 09:43 PM

Hi, Kendo newbie here,

I've been evaluating whether the Grid control or the spreadsheet control is best for my application requirements.  I'm leaning toward the Grid, but I'd like to get a second, third, nth opinion.

In general, I think the Spreadsheet is overkill, and I like the aesthetic of the Grid much more.  However, here are some features I need that I don't see in the Telerik demos.

I'd like my user to be able to easily duplicate one or more rows:

- Either by checking off the rows with shift-clicks, or in some other way highlight and select multiple rows.

- duplicate the selected rows with a button and/or keystroke

 

Thoughts?

Thanks in advance.

5 Answers, 1 is accepted

Sort by
0
Accepted
Dan
Top achievements
Rank 1
answered on 21 Dec 2016, 03:17 PM

Hi Duke,

You can do something along these lines:

Turn on multiple selection for the grid to allow the user to select multiple rows by holding ctrl.

Use selectable: "multiple" in the grid initialization

Then you could create a button that gets the data Items corresponding to the selected rows and add copies of them into the dataSource. 

1. Get the selected rows by doing grid.select(). 
2. Iterate on this list of selected rows and do grid.dataItem($(row)) to get the data Item associated to the selected row.
3. Copy the data item's properties into a new object
4. Add this object into the dataSource by doing grid.dataSource.data.push(obj).

Hope this helps,

Dan

0
Dimiter Topalov
Telerik team
answered on 22 Dec 2016, 01:45 PM
Hi Duke,

The desired functionality is not officially supported by the Kendo UI Grid, but can be achieved via some custom logic, similar to the one, suggested by Dan.

Adding items to the dataSource can be also done via the add() and insert() methods.

Regards,
Dimiter Topalov
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.
0
Duke
Top achievements
Rank 1
answered on 22 Dec 2016, 04:13 PM

Thanks a lot, Dan.  It looks like you've been there before!

I like what you describe here, and I'm going to try that approach.  In your opinion, how well does it work (that is - are there glitches, hiccups with execution on large row sets, etc)?  What I'm driving at is: would it be a better approach just to implement spreadsheet control, aesthetics aside?

Thanks again.

0
Dan
Top achievements
Rank 1
answered on 23 Dec 2016, 03:05 PM

Hi Duke,

Unfortunately, I haven't worked with kendo's spreadsheet widget before. However, looking at the API for the spreadsheet here:
http://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet
I see that there are only a few events at your disposal as compared to the grid. In addition, setting up the dataSource seems to be a bit different (not sure how you would get paging in the spreadsheet widget).

You could make your grid serverside pageable and only display a fixed amount of rows per page.

To duplicate the rows, you could duplicate them locally and wait for the user to press a save button to save them. Or you could save the rows in the db once they duplicate and simply make the grid re-read. 

Since you're leaning toward the grid, I'd say give it a try with a simple example just to see if it performs well with the amount of data you have.

Dan.

0
Duke
Top achievements
Rank 1
answered on 12 Jan 2017, 10:42 PM

I wanted to provide an update to this... having looked more closely at the user's needs, it's looking like the UI ASP.NET MVC Spreadsheet control (candidate for the longest name ever for a control?) is the way to go.  The users need to be able to quickly duplicate rows and carry column values down quickly, and it looks like the spreadsheet is better tooled for that.

Thanks for the quick and helpful replies!

Tags
Grid
Asked by
Duke
Top achievements
Rank 1
Answers by
Dan
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Duke
Top achievements
Rank 1
Share this question
or