Best Practice for editing multiple column/rows

Best Practice for editing multiple column/rows

Posted by: jkim on 1 June 2020, 6:59 pm EST

• 

  jkim

  • Post Options:
  • Link
    Copy

  Posted 1 June 2020, 6:59 pm EST

  I am attempting to edit multiple fields in a column on my wijmo-grid. When doing so the cells are getting updated on the UI but when i refresh the page, only the last selected column/row gets updated(doing a put request to my backend server). I attempted to track down the issue and in my rowEditEnded function, it only grabs the last row of my selected columns. I’ve gone through the docs and there are some multirow functionality, should i try to implement this? or am i overcomplicating things?

  I also noticed my ‘selectionChanged’ is picking up multiple rows that need to be updated, but rowEditEnded fires off before the third ‘selectionChanged’ fires off.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 June 2020, 4:53 am EST

  Hi Jason,

  Can you please explain what exactly are you referring to when you say ‘editing multiple columns/rows’? Are editing multiple cells at a single time?

  The rowEditEnding event is only called once for each row. For example, if you will edit column A from 1st row, then the rowEditEnding event for this row will only fire if you will move to another row either by clicking of pressing Enter key.
  
  If you will remain in the same row, then this event will not be fired. But, the selectionChanged is fired for each change in the selected cell, it does not matter whether it is the same row or not.
  
  If you need to send the updated data to the server, then you may use the cellEditEnded event. This will fire for each of the cell that has been edited regardless of same row or not.

  Regarding multirow functionality, it seems that you are referring to the MultiRow control. This control is used to display a single data item in multiple rows but it works exactly like flexgrid. So, if you have a requirement to display a single data in multiple rows, the you may use this otherwise I would not suggest you to use this.

  Regards,
  
  Ashwin

• 

  jkim

  • Post Options:
  • Link
    Copy

  Posted 2 June 2020, 4:23 pm EST

  Thanks for the response Ashwin. To clarify my issue, I want ultimately edit multiple rows and send 1 http request to update all 3 rows instead of individually updating each row.

  I am trying to select 3 columns and paste in values, which ultimately will have to update 3 rows since im updating 1 cell per row. which event emitter should i be using to accomplish this? You specified the rowEditEnding event fires off once per row, but how about multiple rows edits?

• 

  jkim

  • Post Options:
  • Link
    Copy

  Posted 2 June 2020, 9:40 pm EST - Updated 3 October 2022, 4:15 pm EST

  I’ve been noticing some weird behavior. I am using the ‘pasting’ event emitter

                        (pasting)="pastedValues(flex, $event)"
  
  

      pastedValues(flex, event) {
          // console.log('PASTED event in something!!!!!!!!!!!!!!!!!!!!!!!', event);
          // let example = JSON.stringify(flex.selectedItems);
          console.log('PASTED flex in something!!!!!!!!!!!!!!!!!!!!!!!', 	 
          JSON.stringify(flex.selectedItems), flex.selectedItems);
          let pastedRows = [...flex.selectedItems];
  
          // let example2 = JSON.parse(example);
          console.log('this is pasted rows &&&&&&&&&&&&', pastedRows);
          this.pastedRowsFlag = true;
          this.updateExistingMember(this.dimensionId, pastedRows);
      }
  
  

  for some reason when i log out flex.selectedItems, i get different values when i try to stringify it. A bunch of the values become null and when i sent the PUT req body it isn’t sending the correct data. Below is a screenshot of my console logs. I have tested in firefox and chrome.

  

  326×806 67 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 June 2020, 12:43 am EST

  Hi,

  For different purposes, you will need to use different events. If you are pasting data, then you may use the pasted event. The event data provided will have a range property that can be used to check which rows are updated.

  Regarding pasting, we are sorry but were unable to replicate this issue at our end. Please refer to the sample below that we used to replicate the issue.

  https://stackblitz.com/edit/angular-uhma9z

  Can you please let us know whether we are missing something in order to replicate the issue? Also, the pasting event is fired before the actual paste operation occurs. So make sure that you are using it correctly. If you need the updated data, then use the pasted event.

  ~regards