How to bind data into the model using binding property after import excel in gr

How to bind data into the model using binding property after import excel in gr

Posted by: mayank.topiwala on 15 August 2019, 8:35 pm EST

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 August 2019, 8:35 pm EST

  Hi,
  
  I am using import excel functionality to import the data from excel sheet to wijmo flex grid. The current behavior works fine when I import the data using header property but when I try to save this data into my model (which use binding property), it wouldn’t happen. Please let me know how to achieve import functionality using “binding” property ? Also please suggest how to set width dynamically to * after imports so that it covers full grid.

  Below is the code I am using to try to implement this feature:

  bindImportedDataIntoModel() {
      const newData = _.cloneDeep(this.getImportedCVData());
  
      let columns = JSON.parse(this.flex.columnLayout).columns;
      this.data = new wjcCore.CollectionView(newData);
      this.flex.autoGenerateColumns = true;
      this.flex.itemsSource = this.data;
      this.flex.collectionView.refresh();
  
      const newCol = JSON.parse(this.flex.columnLayout).columns;
      newCol.splice(0, columns.length);
      columns = { columns: newCol };
      this.flex.columnLayout = JSON.stringify(columns);
      this.model[0] = _.cloneDeep(newData);
    }
  
    getImportedCVData() {
      const arr = [];
      let nullRow = true;
      for (let row = 0; row < this.flex.rows.length; row++) {
        nullRow = true;
        const item = {};
        for (let column = 0; column < this.flex.columns.length; column++) {
          const cellValue = this.flex.getCellData(row, column, false);
          if (cellValue) {
            nullRow = false;
            if (this.flex.columns[column].header) {
              item[this.flex.columns[column].header] = cellValue;
            }
          } else {
            if ((column === this.flex.columns.length - 1) && nullRow) {
              break;
            }
          }
        }
        if (nullRow) {
          break;
        }
        arr.push(item);
      }
      return arr;
    }
  

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 16 August 2019, 12:00 am EST

  Hi Team- any update on this ?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 August 2019, 5:02 pm EST

  Hi Mayank,

  When we load an excel file to the FlexGrid, the FlexGrid is not in the bound mode and therefore the binding property of columns is not available. You will need to create the binding from the header property of the columns:

  
  getImportedCVData() {
      ...
            if (this.flex.columns[column].header) {
              var binding = this._convertHeaderToBinding(this.flex.columns[column].header);
              item[binding] = cellValue;
            }
          }
  ...
    }
  
  _convertHeaderToBinding(header: string) {
      return header.replace(/\s/, '').toLowerCase();
    }
  
  

  Also, to set the width of the columns, you can iterate over each column and set its width property to ‘*’ after the excel data is loaded:

  wjcGridXlsx.FlexGridXlsxConverter.loadAsync(this.flex, fileInput.files[0], {}, (w) => {
          this.bindImportedDataIntoModel();
          this.flex.columns.forEach(col => {
            col.width = '*';
          });
        });
  

  Please refer to the sample below:

  https://stackblitz.com/edit/angular-3z8oyv

  Regards,
  
  Ashwin