Creating a new row when enter key is pressed

[Aravind]

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.

[Konstantin Dikov]

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:

• http://dojo.telerik.com/iHUta

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

 

 

[Aravind]

Oh ok, thank you!

[Alexandra]

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? 

[Georgi]

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:

• http://dojo.telerik.com/iriKimAM

Regards,
Georgi
Progress Telerik