WIjmo Grid throws error when added to page

WIjmo Grid throws error when added to page

Posted by: daniel.boone on 26 April 2018, 2:22 am EST

• 

  daniel.boone

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 April 2018, 2:22 am EST

  I get this error whenever i add the wijmo grid to my angular page

  here is the error Error: ** Assertion failed in Wijmo: Invalid enum value.

  here is the area that throws the exception. the page still loads and works normally it throws the exception the first time the page loads.
  
  the underlined line is where the error points to

  <wj-flex-grid #flexentity

  
  <div class="form-subsection" *ngIf = '!entityLoading'>
          <div class="order-list-grid" [class.hidden]="!flexentity.rows?.length">
            * "  [i]<wj-flex-grid #flexentity[/i]"
  
                          [itemsSource]="Userentities$" 
                          items-source-changed="itemsSourceChanged(s,e)"
                          [frozenColumns]="1" 
                          style="max-height:500px"
                          autoSizingColumn="true"
                          [selectionMode]="Row"
                          >
                      <wj-flex-grid-filter #filter></wj-flex-grid-filter>
  
                      <wj-flex-grid-column [header]="'Entity Type'" [binding]="'UserType'" [isReadOnly]="true" ></wj-flex-grid-column>
                      <wj-flex-grid-column [header]="'Assigned As'" [binding]="'AssingedAs'"  [isReadOnly]="true" ></wj-flex-grid-column> 
                      <wj-flex-grid-column [header]="" >
                              <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                                  <button type="button"
                                  class="icon-button icon icon--trash icon-button--caution order-list-toolbar__button"
                                  (click)="deleteUserEntity($event)"
                                  [class.input-loading]="deleteloading"
                                  title="Delete">
                                      <span class="is-vishidden">Delete</span>
                                  </button>
                              </ng-template>
                          </wj-flex-grid-column>
                  </wj-flex-grid>
                  <div class="order-list-grid-nav">
                      <button (click)="AddEntityForm.open()" 
                          type="button" 
                          title="Add New Entity"
                          [disabled]="appForm?.disabled" 
                          class="icon-button icon icon--plus field-action-combo__action">
                      <span class="is-vishidden">Add Entity</span>
                      </button>
                      &nbsp;&nbsp;
                      <wj-menu [(value)]="pageSize" [header]="'Page Size'">
                          <wj-menu-item [value]="0">No Paging</wj-menu-item>
                          <wj-menu-item [value]="50">50 items</wj-menu-item>
                          <wj-menu-item [value]="100">100 items</wj-menu-item>
                          <wj-menu-item [value]="200">200 items</wj-menu-item>
                          <wj-menu-item [value]="500">500 items</wj-menu-item>
                      </wj-menu>
                      <wj-collection-view-pager [cv]="flexentity?.collectionView">
                      </wj-collection-view-pager>
                  </div>
          </div>
      </div>
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 April 2018, 7:12 pm EST

  Hi Daniel,
  
  The way directive’s selectionMode is assigned is incorrect. Also, event is not handle in recommended way. Please refer to the following code snippet and it should work for you:

    <wj-flex-grid #flexentity
  
                          [itemsSource]="Userentities$" 
                          (itemsSourceChanged)="itemsSourceChanged(flexentity,$event)"
                          [frozenColumns]="1" 
                          style="max-height:500px"
                          autoSizingColumn="true"
                          [selectionMode]="'Row'"
                          >
  

  Please also refer to markup syntax documentation:
  
  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/static/angular2Markup.html

  ~Manish

• 

  daniel.boone

  • Post Options:
  • Link
    Copy

  Posted 2 May 2018, 12:13 am EST

  I have made your recommended changes but still get the same error

  
  <div class="order-list-grid" [class.hidden]="!flexentity.rows?.length">
              <wj-flex-grid #flexentity
                      [itemsSource]="Userentities$" 
                      (items-source-changed)="itemsSourceChanged(flexentity,$event)"
                      [frozenColumns]="1" 
                      style="max-height:500px"
                      autoSizingColumn="true"
                      [selectionMode]="Row"
                      >
                  <wj-flex-grid-filter #filter></wj-flex-grid-filter>
                  
                  <wj-flex-grid-column [header]="'Entity Type'" [binding]="'UserType'" [isReadOnly]="true" [width]="150" ></wj-flex-grid-column>
                  <wj-flex-grid-column [header]="'Assigned As'" [binding]="'AssingedAs'"  [isReadOnly]="true" [width]="200"  ></wj-flex-grid-column> 
                  <wj-flex-grid-column [header]="" >
                          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                              <button type="button"
                              class="icon-button icon icon--trash icon-button--caution order-list-toolbar__button"
                              (click)="deleteUserEntity($event)"
                              [class.input-loading]="deleteloading"
                              title="Delete">
                                  <span class="is-vishidden">Delete</span>
                              </button>
                          </ng-template>
                      </wj-flex-grid-column>
              </wj-flex-grid>
              <div class="order-list-grid-nav">
                  <button (click)="AddEntityForm.open()" 
                      type="button" 
                      title="Add New Entity"
                      [disabled]="appForm?.disabled" 
                      class="icon-button icon icon--plus field-action-combo__action">
                  <span class="is-vishidden">Add Entity</span>
                  </button>
                  &nbsp;&nbsp;
                  <wj-menu [(value)]="pageSize" [header]="'Page Size'">
                      <wj-menu-item [value]="0">No Paging</wj-menu-item>
                      <wj-menu-item [value]="50">50 items</wj-menu-item>
                      <wj-menu-item [value]="100">100 items</wj-menu-item>
                      <wj-menu-item [value]="200">200 items</wj-menu-item>
                      <wj-menu-item [value]="500">500 items</wj-menu-item>
                  </wj-menu>
                  <wj-collection-view-pager [cv]="flexentity?.collectionView">
                  </wj-collection-view-pager>
              </div>
          </div>
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 May 2018, 2:00 pm EST

  Hi,
  
  The syntax is still not in proper and recommended way. Row should be quoted like “‘Row’”. Please refer to bold text in following code snippet:

  <wj-flex-grid #flexentity
                      [itemsSource]="Userentities$" 
                      ([b]itemsSourceChanged[/b])="itemsSourceChanged(flexentity,$event)"
                      [frozenColumns]="1" 
                      style="max-height:500px"
                      autoSizingColumn="true"
  		   [selectionMode]="[b]'Row'[/b]"
                      >
  

  Also, refer to the following demo sample for the same:
  
  https://stackblitz.com/edit/angular-gaxqtq?file=app/app.component.html

  ~Manish

• 

  daniel.boone

  • Post Options:
  • Link
    Copy

  Posted 2 May 2018, 11:41 pm EST

  That did it, thank you very much