FlexGrid how can i perform validation on paste from excel

FlexGrid how can i perform validation on paste from excel

Posted by: deepakdaash on 20 April 2018, 11:40 pm EST

• 

  deepakdaash

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 April 2018, 11:40 pm EST

  I am tapping into paste dom eventlistner & pasted event to get the clipboard data and add clipboard data to datasource collection. This works as expected but wijmo is also adding the pasted data directly without going through this. How can i prevent that ? Or is this way not recommended ? Are there any better options where i can validate both pasted data and data in the source ?

  
  new wjGrid.FlexGrid("#customergrid", {
                  autoGenerateColumns: false,
                  columns: this.gridColumns,
                  itemsSource: this.RawData,
                  allowAddNew: true,
                  pasted: this.Pasted,  
                });
  
  Pasted(){
  		    if (e.row == this.wjGrid.rows.length - 1) {
                      if (this.pastedData.split("\n").length > 1) {
                          var pastedDataArray = this.pastedData.split("\n");
                          for (var i = 1; i < pastedDataArray.length ; i++) {
                              // Add data to collection View
                              var newItem=this.wjGrid.editableCollectionView.addNew();
                              var itemToAdd = pastedDataArray[i].split("\t");
                              console.log('present');
  				
  	         	    //Validation & cleansing logic
  
                              newItem.someColumn = itemToAdd[1];   //cleansed data                      
  
  
                              this.wjGrid.editableCollectionView.commitNew();                            
                          }
                      }
                  }        
                  
      this.wjGrid.select(e.row, e.col);
  }
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 April 2018, 10:10 pm EST

  Hi,
  
  If you want to perform validation on data paste then you need to handle pasting event and cancel it so that FlexGrid doesn’t paste data.
  
  Then perform validation and paste data as required.

  Refer to the following example:- https://stackblitz.com/edit/angular-nqksa1?file=app%2Fapp.component.ts

  ~Manish

• 

  deepakdaash

  • Post Options:
  • Link
    Copy

  Posted 28 April 2018, 10:17 pm EST

  Thanks bro , but my problem is that when i am canceling in the pasting event my paste event tied to dom is not yet fired so i am only seeing empty data. But in pasted event the paste event has already been fired and i can see the data. How can i make the pasting event delayed ?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 29 April 2018, 7:12 pm EST

  Hi Deepak,
  
  You may accomplish pasting using pastingCell event. For this, you need to set allowAddNew to true if you would like to add new row while pasted rows are greater then targeted rows (Data to be pasted).

  Please refer to the updated sample:
  
  https://stackblitz.com/edit/angular-nigjgc?file=app/app.component.html

  ~Manish

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy

  Posted 11 July 2022, 9:14 am EST

  Hi Manish,

  I want to paste the data only on blank row. How can I achieve that? The above sample lets me paste on blank row as well as non-blank row.

  Thank you,
  
  Muhammad

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 12 July 2022, 3:53 am EST

  Hello,

  You may handle the pastingevent of the FlexGrid and cancel the paste if the current row is not a blank row. Please refer to the code snippet and sample link below demonstrating the same:

  
    pasting(grid, e) {
      if (
        grid.rows[e.row].dataItem ||
        !(grid.rows[e.row] instanceof wjGrid._NewRowTemplate)
      ) {
        e.cancel = true;
      } else {
        //paste data into blank rows(new row template)
        console.log('pasting cell', grid, e, e.row, e.col, e.data);
      }
    }
  
  

  Sample link: https://stackblitz.com/edit/angular-mwfpge?file=src%2Fapp%2Fapp.component.ts

  API link: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#pasting

  Regards

• 

  muhammad.f.mehboob

  • Post Options:
  • Link
    Copy

  Posted 13 July 2022, 1:41 am EST

  Thanks Sonu! Its working now.