Inline Editing and add new row on demand

Inline Editing and add new row on demand

Posted by: ylipkin on 12 April 2020, 2:43 pm EST

• 

  ylipkin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 April 2020, 2:43 pm EST

  In the flexgrid i need to utilize some common tasks:

  1. all rows have to be in readonly mode
  2. on user request only selected row going to the edit mode
  3. user has to confirm saving of edited data
  4. on confirmation data saved to the database
  5. on user request add new row

  From all provided editing demos Inline Editing covers all tasks but #5.
  
  https://www.grapecity.com/wijmo/demos/Grid/Editing/InlineEditing/purejs

  Tried in the demo code to remark isReadOnly: true and add
  
  allowAddNew: true and newRowAtTop: true
  
  New row created but buttons template loaded for edit mode (<div id=“tplBtnEditMode”) instead of view mode (<div id=“tplBtnViewMode”).
  
  After this currentEditItem = null and commitEdit() and cancelEdit() not working.

  What is the way to add new row to the grid using Inline Editing?
  
  If allowAddNew not working with Inline Editing, button outside of the grid with ability to add new row with buttons template will works for me.

• 

  ylipkin

  • Post Options:
  • Link
    Copy

  Posted 13 April 2020, 1:38 am EST

  Forget to add
  
  6. preload one of the editors with predefined value - let say current year

  I could preload at formatItem event. But don’t know how to do it only for NEW row

  Thank you

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 13 April 2020, 5:07 am EST

  Hi Yakov,

  It would be better if you used a button outside of the FlexGrid to add a new row because allowAddNew only works with a non read-only grid and also it is not properly compatible with inline editing.
  
  To add a new row, simply call the CollectionView’s addNew method and commit it using the commitNew method.
  
  Also, to initialize the new item with certain values, you can use the CollectionView’s newItemCreator property.

  Please refer to the sample link below for reference:

  https://stackblitz.com/edit/js-tu6gai

  Regards,
  
  Ashwin

• 

  ylipkin

  • Post Options:
  • Link
    Copy

  Posted 13 April 2020, 6:35 pm EST

  Hi Ashwin,

  Thanks, code from the sample works perfectly in the my project.
  
  I try to find at internet how to add new row at the top of the grid by changing view.addNew() to something like view.addNewAtTop() with almost no luck.
  
  Is it possible to add new row at the top or even more - at any given selected row - with auto scroll to new row?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 April 2020, 12:30 am EST

  Hi,

  There is no direct way to add a new item using the CollectionView at any appropriate position. You will need to manually remove the added item and move it to the appropriate index. Please refer to the updated sample below:

  https://stackblitz.com/edit/js-rqrgp7

  ~regards

• 

  ylipkin

  • Post Options:
  • Link
    Copy

  Posted 14 April 2020, 12:01 pm EST

  Hi

  I didn’t think to manipulate CollectionView directly for my task. Thank you for providing so good solution. I kind of hope that you guys already thought about this and build in to use with Inline Editing as well Anyway, the code what you provide somehow more flexible and in general better then just plain “addNewAtTop”
  
  Thank again for so awesome help. This discussion might be close.