Append a new row on last column with keypress enter

Posted by: productinfo on 10 April 2018, 9:58 am EST

    • Post Options:
    • Link

    Posted 10 April 2018, 9:58 am EST

    Hello;

    We would like to append a new row when pressing enter key on last column. The example code works perfectly but when we edit any value on grid the example code does not work. It appends a new row but we can’t focus the new row.

    I uploaded the issue video on sendspace.

    Video link : https://www.sendspace.com/filegroup/aLZ%2BC9PBPSNTs5wpt3mdWg

    Example Code

    Html : ```

    <wj-flex-grid #flexGrid [itemsSource]=“collectionView” (keydown)=“keyDown(flexGrid,$event)”>

    <wj-flex-grid-column [header]=“‘a’” [binding]=“‘a’”>

    <wj-flex-grid-column [header]=“‘b’” [binding]=“‘b’”>

    <wj-flex-grid-column [header]=“‘c’” [binding]=“‘c’”>

    
    Ts : ```
    keyDown(flexGrid, event) {
        const e = event;
        const s = flexGrid;
        const n = (window.event) ? e.which : e.keyCode;
        const selectedCellRange = s.selection;
        if (n === 13) {
          e.preventDefault();
          if (s.selection.col !== s.columns.length - 1) {
              if (!s.columns[s.selection.col].isReadOnly) {
                if (s.activeEditor) {
                  s.endUpdate();
                  selectedCellRange.col = selectedCellRange.col + 1;
                  selectedCellRange.row2 = selectedCellRange.row;
                  selectedCellRange.col2 = selectedCellRange.col;
                  s.select(selectedCellRange, true);
                  s.startEditing(true, e.row, e.col, true);
                } else {
                  s.startEditing(true, e.row, e.col, true);
                }
              } else {
                selectedCellRange.col = selectedCellRange.col + 1;
                selectedCellRange.row2 = selectedCellRange.row;
                selectedCellRange.col2 = selectedCellRange.col;
                s.select(selectedCellRange, true);
              }
          } else if (s.selection.col === s.columns.length - 1) {
            if (s.selection.row === s.rows.length - 1 && n === 13) {
              this.setNewLine();
              this.linesCollectionView.refresh();
            }
            selectedCellRange.row = selectedCellRange.row + 1;
            selectedCellRange.col = 0;
            selectedCellRange.row2 = selectedCellRange.row;
            selectedCellRange.col2 = 0;
            s.select(selectedCellRange, true);
          }
        }
      }
    
    setNewLine() {
        this.columns.push({
          a: '',
          b: '',
          c: ''
        });
      }
    
  • Posted 11 April 2018, 8:04 am EST

    Hi,

    We are unable to replicate the issue at our end.Your code seems to be working fine.

    Here are our implementation steps:-

    • "* “Create a sample project with code snippet you provided.”

    • “Edit value in grid and tried to append row by pressing Enter in the last column”

    • “Tried to focus and edit newly inserted row”

    • “We were able to focus and edit the new row”

      "

    Please let us know if there are any additional steps to reproduce the issue or edit the following example to reflect your issue:- https://stackblitz.com/edit/angular-ebmmbj

    ~Manish

  • Posted 12 April 2018, 11:10 am EST

    The problem stems from the old version

  • Posted 13 April 2018, 5:29 am EST

    Hi,

    Thanks for notifying us. Please update with latest build 5.20181.436 and let us know if you have any issue with this.

    ~Manish

  • Posted 19 April 2018, 10:53 am EST

    Hi Manish,

    As I mentioned before, we had received an error which is new row couldn’t be add when cursor came the last row and column with enter button. After updating the version it was resolved. However for two days running we take an another error. I thought there is maybe an error in my code so I had tried your codes (you sent to me before) I took same error again.

    When the column is edit mode, updating must be completed and cursor must be focused next column by pressing the enter button. However if there is a row down below cursor pass that row and is lost the focusing on the grid (we have to click on the grid again for editing).

    When you run the above codes you will see the problem clearer.

    How can I solve this problem?

    Thanks.

  • Posted 19 April 2018, 11:10 pm EST

    HI,

    We are sorry, there were a code mistake in sample.

    You need to call stopImmediatePropagation method to prevent default FlexGrid selection on keyDown.

    Please find the updated demo sample:

    https://stackblitz.com/edit/angular-nspcjk?file=app/app.component.ts

    ~Manish

  • Posted 20 April 2018, 3:22 am EST

    Thanks Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels