Adding New row in FlexGrid - Angular 2

Adding New row in FlexGrid - Angular 2

Posted by: venkat.sub on 21 September 2017, 10:39 am EST

• 

  venkat.sub

  • Post Options:
  • Link
    Copy

  Posted 21 September 2017, 10:39 am EST

  Hi,

  I am trying to add a new row on top in my Flexgrid on a button click. I am able to achieve, but having few problems like

  1. Whenever I click on other row without finish my editing and without clicking on save, the data is automatically sent to the last row. I don’t want that happen and I want the data to be saved and sent to last row only upon clicking save.

  2. Once my data is saved, I don’t want a plain row to be appearing on the top. A new row should be added only if I click on Add once again.

  3. My whole grid should be ReadOnly, but I am making it false to add a new row, but I want the other rows to be non-editable, only the newly added row which is not yet saved should be editable.

  Kindly can someone help me out with this. It will be more helpful if Angular 2 sample code is provided with this regard.

  Thanks,
  
  Venkat.

• 

  venkat.sub

  • Post Options:
  • Link
    Copy

  Posted 21 September 2017, 10:43 am EST

  To give more clarity on first point, RowEditEnding and RowEditEnded events are triggered along with CellEditEnding and CellEditEnded on SelectionChanged event.

  I dont want the RowEditEnding and RowEditEnded events to be triggered until I press the save button.

  Thanks,
  
  Venkat

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 September 2017, 10:52 am EST

  Hi,
  
  We are looking into the issue.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 September 2017, 2:56 am EST

  Hi Venkat,

  Here are the replies for your queries:

  Whenever I click on other row without finish my editing and without clicking on save, the data is automatically sent to the last row. I don’t want that happen and I want the data to be saved and sent to last row only upon clicking save.
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  
  As you press Enter key, new data added to CollectionView at last position. If you would like to push new rows at end only on save, you need to add row manually using Row class. Push newly added record in CollectionView using addNew and commitNew method.

  Once my data is saved, I don’t want a plain row to be appearing on the top. A new row should be added only if I click on Add once again.
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  After clicking save button, remove added rows from FlexGrid

  I want the other rows to be non-editable, only the newly added row which is not yet saved should be editable.
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  
  You need to make all rows readOnly on FlexGrid initialization instead of complete FlexGrid.

  Please refer to the plunker[1] that implements the same.

  Thanks,
  
  Manish Kumar Gupta

  [1] http://plnkr.co/edit/4tVvwx?p=preview

• 

  venkat.sub

  • Post Options:
  • Link
    Copy

  Posted 26 September 2017, 2:24 am EST

  Hi Manish,

  Thanks for your reply! I tried implementing the same in my code! Everything is working fine as expected except the readonly property. On FlexGrid Init, I am making all the rows as ReadOnly. Again if I click on AddNew, new row is added with ReadOnly. How to make the particular cell in the newly added row to be editable.

  Thanks for your help,
  
  Venkat

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 September 2017, 1:35 am EST

  Hi Venkat,

  Once, you make a row or column read only, you can not make cell editable for that row or column. If you would like to make a cell readonly, you need to handle beginningEdit event and cancel event for the cell you would like to make read only. Please use the following code snippet for the same:

  
  flex.beginningEdit.addHandler((s,e)=>{
  	if(e.row==0 && c==0){
  		e.cancel=true;
  	}
  });
  
  

  Thanks,
  
  Manish Kumar Gupta

• 

  eomeroff

  • Post Options:
  • Link
    Copy

  Posted 26 October 2017, 3:34 am EST

  What would be “c” in the example above?