ColumnLayout not saving wjFlexGridCellTemplate

ColumnLayout not saving wjFlexGridCellTemplate

Posted by: afriedman on 14 September 2017, 12:12 pm EST

• 

  afriedman

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:12 pm EST

  I have a custom template. I save columnLayout to the localstorage on updatedLayout event. But when I navigate back to the grid, none of my custom templates are applied. I am using Angular2 componets with version Wijmo-Enterprise.20172.334 standard edition.

  See below, my code.

          <wj-flex-grid #datagrid 
              (initialized)="initialized(datagrid, e)" 
              [itemsSource]="tradesView" 
              [wjContextMenu]="ctxMenu" 
              (cellEditEnded)="editDone($event)"
              (updatedLayout)="layout($event)">
              <wj-flex-grid-filter #filter></wj-flex-grid-filter>
              <wj-flex-grid-column [header]="'Strategy'" [binding]="'StrategyName'" [isReadOnly]="true" [width]="100"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Side'" [binding]="'Direction'" [align]="'center'" [isReadOnly]="true" [width]="75"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Security'" [binding]="'SecurityName'" [isReadOnly]="true" [width]="275"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Trade Qty'" [binding]="'Quantity'" [isReadOnly]="true"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Trade Price'" [binding]="'TradePrice'" [isReadOnly]="true"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Label'" [binding]="'Label.LabelID'" [align]="'center'" [isReadOnly]="false" [width]="250">
                  <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
                      <wj-auto-complete #labelAutoComp 
                                      [itemsSource]="labelsView"
                                      [placeholder]="'Start Typing..'"
                                      [selectedValuePath]="'LabelID'"
                                      [displayMemberPath]="'Label'"
                                      [(selectedValue)]="cell.value">
                      </wj-auto-complete>
                  </ng-template>
                  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                      {{cell.item.Label.Label}}
                  </ng-template>
              </wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Seq'" [binding]="'Label.LabelSeqID'" [align]="'right'" [isReadOnly]="true" [width]="75"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Label Qty'" [binding]="'Label.LabeledQuantity'" [align]="'right'" [isReadOnly]="true"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Label Price'" [binding]="'Label.LabeledTradePrice'" [align]="'right'" [isReadOnly]="true"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Trade Date'" [binding]="'TradeDate'" [align]="'center'" [width]="'*'" [isReadOnly]="true" [format]="'d'"></wj-flex-grid-column>
          </wj-flex-grid>

      layout(e: any) {
          if (this.grid) {
              localStorage['tradesColumnLayout'] = this.grid.columnLayout;
  
              if (this.grid.itemsSource) {
                  var groupState = [], sortState = [];
                  for (let description of this.grid.itemsSource.groupDescriptions) {
                      groupState.push({
                          property: description.propertyName,
                      });
                  }
  
                  for (let description of this.grid.itemsSource.sortDescriptions) {
                      sortState.push({
                          property: description.property,
                          ascending: description.ascending
                      });
                  }
  
                  localStorage['tradesGroupLayout'] = JSON.stringify(groupState);
                  localStorage['tradesSortLayout'] = JSON.stringify(sortState);
              }
          }
      }

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi Alex,
  
  Please refer to the following forum thread that refer to your issue:
  
  http://wijmo.com/topic/columnlayout-and-wjflexgridcelltemplate/#post-108544

  Thanks,
  
  Manish Kumar Gupta

• 

  afriedman

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi,

  I don’t see how this is a solution? I just want to apply columnLayout straight up, like the example on your site shows

           var columnLayout = localStorage['tradesColumnLayout'];         if (columnLayout) {             this.grid.columnLayout = columnLayout;         }

  
  
  But when I do that my column templates are nor rendered properly, I see IDs instead of values.
  
  What if the column size, order or other properties have changed, I want to capture all changes in the columnLayout.

  May be I am missing something? Please let me know if I wasn’t clear.

  Thanks in advance,

  Alex

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi Alex,
  
  WjFlexGridCellTempalte can also be placed within the dynamic columns based on the condition. You can use the dynamic column for initial and column layout loading in the FlexGrid.

  Since the column is dynamic and cell template is being created dynamically for the columns on column condition basis.

  You can get column size, order and other properties except DataMap properties.

  Thanks,
  
  Manish Kumar Gupta

• 

  m.omar

  • Post Options:
  • Link
    Copy

  Posted 30 January 2020, 3:23 am EST

  Any updates about ability to save layout with Angularjs directive and wjFlexGridCellTemplate ?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 January 2020, 3:25 am EST

  Hello Omar,
  
  The answer is the same. We need to add the columns dynamically and apply the template based on the condition.

  Regards,
  
  Manish Gupta