Angular TypeScript FlexGrid standard JSON Format

Angular TypeScript FlexGrid standard JSON Format

Posted by: Gopala.Chintakindi on 27 September 2018, 6:55 pm EST

• 

  Gopala.Chintakindi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 September 2018, 6:55 pm EST - Updated 3 October 2022, 8:21 pm EST

  We are working on trying to come up with standard JSON format for FlexSheet and FlexGrid so that services will provide data to UI as per this standard JSON format.

  We are able to come up for FlexSheet. Please see below. Our idea is JSON will have collection of columns and each column will have collection of cells and each cell will have its value and styles and properties.

  We are trying to use same JSON design for FlexGrid. For starting point, do you have a sample where we get data from service ( including column headers ) and show it on FlexGrid ? .
  
  

  

  1928×1400 99.4 KB

• 

  Gopala.Chintakindi

  • Post Options:
  • Link
    Copy

  Posted 27 September 2018, 6:58 pm EST

  Please show us the JSON data/format in your sample so that we can understand how JSON data is shown on FlexGrid.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 September 2018, 4:45 am EST

  FlexGrid expects source data to be an array of objects then no of rows are determined by the no of elements in the itemsSource array and columns are the bindings with the keys of the object in the array.
  
  For e.g
  
  Valid Data (1)
  
  let data =[{id:1,country:“US”,sales:789,active:true},…]

  Valid data (2)
  
  let data=[{id:1, address:{country:“US”,city:“Pitsburg”},sales:789,active:true}]

  Now, as your data structure, you need to write a converter function that would take sheets data and convert it to appropriate data(array of objects) for FlexGrid.
  
  You may refer to the following sample which implements the same: https://stackblitz.com/edit/angular-awhn2s?file=app%2Fapp.component.ts

  ~Sharad

• 

  Gopala.Chintakindi

  • Post Options:
  • Link
    Copy

  Posted 28 September 2018, 1:33 pm EST

  Thank you very much. This is what I did

  <wj-flex-grid #flexGrid id="flexGrid" [itemsSource]="flexGridSheetData" style="height:380px; width:550px; max-width:800px;float:left;" [headersVisibility]="1" (initialized)="flexGridInitialized(flexGrid)">
      <ng-template ngFor let-colDef [ngForOf]="flexGridSheetColumnDefinitions">
          <wj-flex-grid-column [header]="colDef.header" [binding]="colDef.binding">
          </wj-flex-grid-column>
      </ng-template>
  </wj-flex-grid>
  
  

  public flexGridInitialized(flexGrid: wjcGrid.FlexGrid) {
          flexGrid.collectionView.moveCurrentToPosition(-1);
      }
  

  
   wjFlexGridColumns: ISheetColumn[] = [];
   flexGridSheet: any = {};
   flexGridSheetData: any;
   flexGridSheetColumnDefinitions: any[];
    
      ngOnInit() {
          this.commonService.getFlexGridData().subscribe(
              (response: ISheetData) => {
                  this.wjFlexGridColumns = response.sheetColumns.columns;
                  this.flexGridSheet.numberofRows = this.getNumberOfRows();
                  this.flexGridSheet.numberOfColumns = this.getNumberOfColumns();
  
                  if (this.flexGridSheet.numberOfColumns > 0) {
                      this.flexGridSheet.columns = [];
                      this.wjFlexGridColumns.map(
                          (column: ISheetColumn) => {
                              const col: any = {};
                              col.binding = column.binding;
                              col.header = column.header;
                              if (this.hasCells(column)) {
                                  col.cells = [];
                                  column.cells.map(
                                      (cell: ISheetCell) => {
                                          col.cells.push(
                                              {
                                                  rowIndex: cell.row,
                                                  colIndex: cell.column,
                                                  value: cell.value
                                              }
                                          );
                                      }
                                  );
                              }                            
                              this.flexGridSheet.columns.push(col);
                          }
                      );
                  }
                  const flexGridSheetData = this.convertSheetDataForGridUse();
                  this.flexGridSheetData = flexGridSheetData.data;
                  this.flexGridSheetColumnDefinitions = flexGridSheetData.columnDefinitions;
              },
              (error: any) => {
  
              }
          );
  
      }
  	
  	public getNumberOfRows(): number {
          let numberOfRows: number = 0;
          if (this.hasWjFlexGridColumns()) {
              this.wjFlexGridColumns.map(
                  (column: ISheetColumn) => {
                      if (this.hasCells(column)) {
                          if( numberOfRows < column.cells.length) {
                              numberOfRows = column.cells.length;
                          }
                      }
                  }
              );
          }       
          return numberOfRows;
      }
  
      public getNumberOfColumns(): number {
          let numberOfColumns: number = 0;
          if (this.hasWjFlexGridColumns()) {
              numberOfColumns = this.wjFlexGridColumns.length;
          }      
          return numberOfColumns;
      }
  
      public hasWjFlexGridColumns(): boolean {
          if (this.wjFlexGridColumns !== null && this.wjFlexGridColumns !== null &&
              this.wjFlexGridColumns.length > 0) {
                  return true;
              } else {
                  return false;
              }
      }
  
      public hasCells(column: ISheetColumn): boolean {
          if (column !== null && column !== null && column.cells !== null && column.cells !== undefined &&
              column.cells.length > 0) {
                  return true;
              } else {
                  return false;
              }
      }
  
      public convertSheetDataForGridUse(): any {     
          const data = new Array(this.flexGridSheet.numberofRows);
          for (let i = 0; i < data.length; i++) {
              data[i] = {};
          }
  
          const columnDefinitions = [];
          for (let i = 0; i < this.flexGridSheet.numberOfColumns; i++) {
              const currentColumn = this.flexGridSheet.columns[i];
              columnDefinitions.push(
                  {
                      binding: currentColumn.binding,
                      header: currentColumn.header
                  }
              );
              for (let j = 0; j < currentColumn.cells.length; j++) {
                  data[currentColumn.cells[j].rowIndex][currentColumn.binding] = currentColumn.cells[j].value;
                }
          }
          const returnValue = {
              columnDefinitions: columnDefinitions,
              data: data
            };
          return  returnValue;
      }