Cell goes in editable mode on single click

Cell goes in editable mode on single click

Posted by: nilesh_nichal on 1 June 2022, 3:32 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 1 June 2022, 3:32 pm EST

  In wj-flex-grid, I want the cell to go in editable mode only when I double click on a cell.
  
  In current scenario, the cell goes in editable mode in two cases -

  1. When we double click on cell.
  2. Whenever we do single click on a cell and after few seconds if I again do single click on that same cell, it goes in editable mode.

  We want only the 1st use case to be executed and not the second one.
  
  Please suggest if there is any solution to stop the cell to go in editable mode for 2nd use case.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 6 June 2022, 12:31 am EST

  Hello,

  We apologize for the delayed response, to achieve the desired functionality you may handle the selectionChanged event of the FlexGrid and add a custom class to the cell element after delay as per your requirement then you can handle the beginningEdit event to prevent the editing of that cell by checking the added class. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/js-rwgov9?file=index.js

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 7 June 2022, 10:56 pm EST

  Hi,
  
  The given solution works well. Thanks.

  However, it does not work correctly for the below test case:

  Step-1 : Click (single click) on the last row cell, e.g, “Greece”
  
  Step-2 : Click outside the grid
  
  Step-3 : Click(single click) again back on the previous cell
  
  Step-4 : Click outside the grid
  
  Step-5 : Now double click back the previous cell.

  Expected : It should get editable now
  
  Actual: It is not clickable now.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 8 June 2022, 10:46 pm EST

  Hello,

  The observed issue occurred because on moving focus outside the grid the cell with the ‘test’ class doesn’t get re-render thus it remains to be inactive. To resolve the issue you may handle the lostFocus event of the FlexGrid and remove the classes from the previous cells containing the class. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/js-rnwdgj?file=index.js

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 31 October 2022, 12:20 am EST

  Hi Thanks for the response, but the given solution does not work for below case.

  1.when we click double click in the cell(bring the cell in edit mode)
  
  2.Click outside the grid(in blank space)
  
  3.Again single click in the cell

  Actual result: The cell goes in edit mode.
  
  Expected result : The cell should remain in read only mode and should not go in edit mode.

  Our Requirement:
  
  In read mode we have 2 buttons(eg b1, b2) in wjmo cell.
  
  In edit mode we have other 2 different(eg up, del) buttons.

  Pleas find below link where the similar kind of code is written(your given solution is also included in it).
  
  https://stackblitz.com/edit/wijmo-angular-flexgrid-sbf32u?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  Issue faced:
  
  Test Case:
  
  1.Double click on cell(edit mode) 2 buttons up,del are seen
  
  2.Click on up button
  
  3.Click outside the grid (in blank space)
  
  4.Again single click(on b1 button) on previously double clicked cell

  Actual result : The cell goes in edit mode(up, del button are shown)

  Expected result: The cell should not go in edit mode(b1,b2 buttons should be seen)

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 31 October 2022, 8:49 pm EST

  Hi,

  Thank you for the sample. To achieve the required functionality, you may simply mark the column as read-only and manually trigger the edit on doubleclick, please refer to the following updated sample and do let me know if I missed something:
  
  https://stackblitz.com/edit/wijmo-angular-flexgrid-2cq7vw?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

  ~sharad