Creating a new row when enter key is pressed

5 posts, 1 answers
  1. Aravind
    Aravind avatar
    21 posts
    Member since:
    Oct 2015

    Posted 22 Oct 2015 Link to this post

    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.

  2. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 27 Oct 2015 Link to this post

    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!
     
  3. Aravind
    Aravind avatar
    21 posts
    Member since:
    Oct 2015

    Posted 27 Oct 2015 in reply to Konstantin Dikov Link to this post

    Oh ok, thank you!
  4. Alexandra
    Alexandra avatar
    2 posts
    Member since:
    Sep 2020

    Posted 02 Sep 2020 in reply to Konstantin Dikov Link to this post

    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? 
  5. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 07 Sep 2020 Link to this post

    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/.

Back to Top