Multiple questions on grid

[Ran Wang]

Hello, I'd like answers to three questions:

First, I have a grid in which one of the grid is not allowed to edit (read-only) and this grid is in batch edit mode.

I'd like to allow the user using the TAB key to change focus horizontally but only focus on cells that are not disabled, for example, I have a grid with column1 column2 and column3, and column 1 & 3 are allowed to edit but column 2 is read-only, when user change focus using TAB key from column1, how can the focus be on column3 in stead of column2?

Second, when I use TAB and focus on a cell that contains an existing string, the cell is selected but the text inside is not selected, how can I focus and automatically select all text inside that cell?

Third, when a new row is created in the grid, I notice a "-" is inserted in all the cells of that row, how can I prevent this?

Thanks in advance.

Ran

[Balaji Sekar]

Hi Ran, 

 

Greetings from the Syncfusion support. 

 

Query #1:  I have a grid with column1 column2 and column3, and column 1 & 3 are allowed to edit but column 2 is read-only, when user change focus using TAB key from column1, how can the focus be on column3 instead of column2? 

Before proceeding your query please ensure that you need to ignore the disable the focusing on read-only column while tab pressing or if we misunderstood your query please share the exact on your requirement it will help to validate further. 

Query #2: when I use TAB and focus on a cell that contains an existing string, the cell is selected but the text inside is not selected, how can I focus and automatically select all text inside that cell? 

Based on your query we suspect that you want to focusing on cell with inside of text value also while tab press action but it is not feasible to focusing both elements while tab press. 

 

Query #3: when a new row is created in the grid, I notice a "-" is inserted in all the cells of that row, how can I prevent this? 

We checked the reported problem at our end but we are unable to reproduced the mentioned problem so please share the exact replicate procedure, sample and video demonstration it will help to validate further. 

Regards, 

Balaji Sekar 

[Ran Wang]

Hi Balaji,

Thanks for your response, for the first query, effectively, I want to skip disabled cells when pressing tab key.

Thanks and have a nice day,

Ran

[Balaji Sekar]

Hi Ran, 

 

Thanks for your update. 

 

Based on your query we have achieved that skipping the cell focusing in the disabled column(allowEditing as false) while press a tab key on Grid using focus event from focusModule.  

 

Please refer the below code example and sample for more information. 

 

[app.component.ts] 

function created() { 

  var grid = this; 

  grid.focusModule.focus = function(e) { 

    this.parent.notify("virtaul-cell-focus", e); 

    grid.focusModule.removeFocus(); 

    var focusingCell = grid.focusModule.getContent().getFocusInfo().element; 

    var colIndex = parseInt(focusingCell.getAttribute("aria-colindex"), 10); 

    var isEdit = grid.columns[colIndex].allowEditing; 

    if (e && e.key === "Tab" && !isEdit) { 

      var a; 

      isskipe = true; 

      a = grid.focusModule.getContent().getFocusInfo().element 

        .nextElementSibling; 

 

      var newEle = { 

        element: a, 

        elementToFocus: a, 

        outline: true, 

        uid: a.parentElement.getAttribute("data-uid") 

      }; 

      grid.focusModule.addFocus(newEle, e); 

    } else if (isskipe) { 

      var a1 = grid.focusModule.getContent().getFocusInfo().element 

        .nextElementSibling; 

      if (a1 == null) { 

        isskipe = false; 

        a1 = grid.focusModule.getContent().getFocusInfo().element.parentElement 

          .nextElementSibling.firstElementChild; 

      } else { 

        var newEle1 = { 

          element: a1, 

          elementToFocus: a1, 

          outline: true, 

          uid: a1.parentElement.getAttribute("data-uid") 

        }; 

        grid.focusModule.addFocus(newEle1, e); 

      } 

    } else { 

      grid.focusModule.addFocus( 

        grid.focusModule.getContent().getFocusInfo(), 

        e 

      ); 

    } 

  }; 

} 

 

Sample link: https://stackblitz.com/edit/9xclat-zvm4dj 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar