Angular 4 FlexGrid set the width of a column on edition

Angular 4 FlexGrid set the width of a column on edition

Posted by: cesar-smerling on 14 September 2017, 3:14 am EST

• 

  cesar-smerling

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:14 am EST

  How can I set the width of a column when I edit a cell. And then when the edition is finished return to the old width. I tried with the begginingEdit and prepareCellForEdit but throws me that is not a method for the flex grid.

  I use ng-template for edition, this is the code:

  <wj-flex-grid #materialsGrid [itemsSource]="materialData" >
      <wj-flex-grid-column *ngFor="let col of materialColumns" [header]="col.header" [binding]="col.binding" >
          <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" *ngIf="col.binding === 'receptionMaterial'" let-cell="cell">
              <wj-combo-box [itemsSource]="materialCombo"
                            [(selectedValue)]="cell.value"
                            [isEditable]="false">
              </wj-combo-box>
          </ng-template>
          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" *ngIf="col.binding === 'matEdition'" let-cell="cell"  let-item="item">
              Edit ...
          </ng-template>
          <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" *ngIf="col.binding === 'matEdition'" let-cell="cell"  let-item="item">
              <div *ngFor="let prop of item.matEdition" >
                  <h5>{{prop.propertyName}}</h5>
                  <wj-input-number [(value)]="prop.value"
                                   [format]="'n'"
                                   [step]="1" style="width:130px;">
  
                  </wj-input-number>
                  <wj-combo-box [itemsSource]="getPropertyMeasure(prop)"
                                [isEditable]="false"
                                [(text)]="prop.measure" style="width:100px;">
                  </wj-combo-box>
              </div>
          </ng-template>
      </wj-flex-grid-column>
  </wj-flex-grid>

  I Want to set the width for the last CellEdit

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:14 am EST

  Hi Cesar,
  
  You can resize width of column using beginningEdit and cellEditEnded event. For your reference, please refer to the following code snippet for the same:

  /// HTML
  <wj-flex-grid #flex [itemsSource]="data" 
  (beginningEdit)="beginEdit(flex,$event)"  
  (cellEditEnded)="cellEdit(flex,$event)"
  style="height:400px;">
  <wj-flex-grid-column [header]="'Id'" [binding]="'id'" >
  <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
  <wj-auto-complete   [itemsSource]="country" 
              [displayMemberPath]="'country'"
              [selectedValuePath]="'id'"
              [(selectedValue)]="cell.value">
  </wj-auto-complete>
  </ng-template>
  </wj-flex-grid-column>
  </wj-flex-grid>
  /// TS
  beginEdit(s:wjGrid.FlexGrid,e:wjGrid.CellRangeEventArgs){
          console.log("begin");
          s.columns[e.col].width=400;
      }
      cellEdit(s:wjGrid.FlexGrid,e:wjGrid.CellRangeEventArgs){
          s.columns[e.col].width=104;
      }

  Hope it helps!

  Thanks,
  
  Manish Kumar Gupta

• 

  cesar-smerling

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:14 am EST

  Thanks, It works great for the width.

  Now I want to achieve the same with the height of the row. I tried the grid.autoSizeRow(rowIndex) but is not working.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:14 am EST

  Hi Cesar,
  
  Height can not be calculated correctly in edit mode, hence you need to set height in beginningEdit event. You can call autoSizeRow method in cellEditEnded event. Please refer to the following code snippet for the same:

    beginEdit(s:wjGrid.FlexGrid,e:wjGrid.CellRangeEventArgs){
          s.rows[e.row].height=200;
      }
      cellEditEnded(s:wjGrid.FlexGrid,e:wjGrid.CellRangeEventArgs){
          s.autoSizeRow(e.row);
      }

  Please also set autoSizeRows to false for wjFlexGridCellTemplate directive as follows:
  
  

  <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell" [autoSizeRows]="false">

  Hope it helps!

  Thanks,
  
  Manish Kumar Gupta

• 

  cesar-smerling

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:14 am EST

  It doesn’t seem to work. When I add the

   cellEditEnded(s:wjGrid.FlexGrid,e:wjGrid.CellRangeEventArgs){
          s.autoSizeRow(e.row);
      }

  making click to edit the cell call both methods (begin and end). This is my code:

  HTML

  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" *ngIf="col.binding === 'matEdition'" let-cell="cell"  let-item="item">
              Edit ...
          </ng-template>
          <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" *ngIf="col.binding === 'matEdition'" let-cell="cell"  let-item="item" [autoSizeRows]="false">
              <button class="btn btn-success" (click)="copyData(cell)">Copy</button>
              <button class="btn btn-success" (click)="pasteData(cell)">Paste</button>
              <button class="btn btn-success" (click)="addData(cell)">Add</button>
              <br/>
              <div *ngFor="let prop of item.matEdition" >
                  <h5>{{prop.propertyName}}</h5>
                  <wj-input-number [(value)]="prop.value"
                                   [format]="'n'"
                                   [step]="1" style="width:130px;">
                  </wj-input-number>
                  <wj-combo-box [itemsSource]="getPropertyMeasure(prop)"
                                [isEditable]="false"
                                [(text)]="prop.measure" style="width:100px;">
                  </wj-combo-box>
              </div>
          </ng-template>

  TS

  beginEdit(s:wjGrid.FlexGrid,e:wjGrid.CellRangeEventArgs){
          // s.autoSizeColumn(e.col);
          s.columns[e.col].width=350;
          // s.rows[e.row].height=300;
          console.log("Begin")
      }
      cellEdit(s:wjGrid.FlexGrid,e:wjGrid.CellRangeEventArgs){
          console.log("End");
          s.autoSizeColumn(e.col);
          // s.autoSizeRow(e.row);
      }

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:14 am EST

  Hi Cesar,
  
  The code provided works fine at our end. Please refer to the attached sample for the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/09/FlexGrid_CellResize_editing.zip

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 26 September 2017, 12:23 am EST

  Hi Manish, now it’s works but I have an error throwing me at the console:

  TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
      at DirectiveCellFactory._initEditInput (wijmo.angular2.grid.ts:1478)
      at wijmo.angular2.grid.ts:1341
      at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
      at Object.onInvokeTask (core.es5.js:4140)
      at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
      at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:191)
      at ZoneTask.invoke (zone.js:486)
      at timer (zone.js:1540)
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 28 September 2017, 2:17 pm EST

  Hi, Cesar,
  
  I am unable to replicate the issue with build 5.20172.334 which you mentioned. We are getting the different error which is a known issue and will be included in next build release.

  Please refer to the attached video for the same.

  Thanks,
  
  Manish Kumar Gupta

  2017-09-29_0838.zip