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

Creating a new row when enter key is pressed

4 Answers 551 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aravind
Top achievements
Rank 1
Aravind asked on 22 Oct 2015, 12:29 PM

Hi all,

 

I tried using various code snippets for implementing this particular functionality of creating a new row when you press enter key WHILE YOU ARE EDITING in a particular cell.

$(document).on('keypress','body',function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == '13'){
    grid.addRow();

  } 
});‚Äč

 

The above code worked when you simply press enter key, but when you're editing a cell and pressing enter key, it did not create a new row.

 

I want to create a new row when you press enter key while editing a particular cell.

 

It would be really great if someone can help me regarding this.

Thanks in advance.

4 Answers, 1 is accepted

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 27 Oct 2015, 06:49 AM
Hello Aravind,

For achieving the desired result you can use a template for the column in question, which you need to add new row on enter and wrap the editor in a div element for example and handle its keydown/keypress event. Another option is to get reference to the cells in question within the dataBound event of the Grid for example and attach the same handler:
As you will notice, you are finding the Name column cells and we are attaching handler for the keydown event.

Hope this helps.


Regards,
Konstantin Dikov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Aravind
Top achievements
Rank 1
answered on 27 Oct 2015, 07:37 AM
Oh ok, thank you!
0
Alexandra
Top achievements
Rank 1
answered on 03 Sep 2020, 02:55 AM
Hi, Konstantin. 
I have the same question, that it is described above and your sample of code is very useful for me, but I notice the one problem in it. If you edit the cell in column Name in new row, fill it with some value and then press enter key, this cell will be empty again. How can we solve this issue? 
0
Georgi
Telerik team
answered on 07 Sep 2020, 08:01 AM

Hello Alexandra,

To reflect the change you could manually trigger the blur event of the input within the cell.

e.g.

				items.each(function (index) {
					var grid = e.sender;
					$(this).find("td:eq(" + nameColumnIndex + ")").keydown(function (e) {
						if (e.keyCode == "13") {
                                                       $(this).find('input:visible').trigger('blur');
							grid.addRow();
						}
					});
				})

Below you will find a modified version of the provided by my colleague sample:

Regards,
Georgi
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
Aravind
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Aravind
Top achievements
Rank 1
Alexandra
Top achievements
Rank 1
Georgi
Telerik team
Share this question
or