Wijmo slow performance with ng-template

Wijmo slow performance with ng-template

Posted by: parmarkinjalk on 11 April 2020, 6:04 am EST

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 11 April 2020, 6:04 am EST

  Hi Team,

  I am using wijmo with angular 7. I have a wj-grid which has between 2000-3000 records and around 6-7 columns. I am using using ng-template to change the font and color of the text inside the cell. I am also using pagination with(wj-collection-view-pager) and [autoRowHeights]=“true” to resize rows when page changes. Due to me using wj-template, the rendering is really slow specially in IE. It is a little better after I build the project for prod but still it lags a bit in IE. is there any way I can change the color and font of the data displayed without using ng-template?
  
  Example of one of the columns below. I have similar 5-6 more.

  <wj-flex-grid-column
                  [width]="175"
                    header="Sub-Type"
                    binding="subtype" [isReadOnly]="true" [wordWrap]="true">
                    <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'">
                      <div class="cell-style mrg5">
                        <div [wjTooltip]="'Sub-Type'" class="cell-style">
                          <label class="hoverTxt">Sub-Type</label>
                        </div>
                      </div>
                    </ng-template>
                    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                      <span style="font-weight: 500;"><b>{{cell.item.subtype}}</b></span>
                    </ng-template>
                  </wj-flex-grid-column>
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 April 2020, 6:44 pm EST

  Hi Kinjalk,

  You can use the formatItem event of the FlexGrid instead of cell templates. You can easily customize the cell element accordingly and append different elements to it. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-ahqlqn

  Regards,
  
  Ashwin

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 20 May 2020, 9:50 am EST

  Hi Team,

  I am using ‘onFormatItem’ as mentioned in the above example. I am using angular 8 with latest wijmo. One of my column has a link and I am trying to add the (click) angular event to call a function but its not working. Also, the css class that I added are not applying to the cell.
  
  In the below code I am trying to apply css class=“cell-stylee no-link” but they are not working. Also the (click) event is not working and I have to pass the ‘item’ object to the called function.

   if (s.columns[e.col].binding === "statusFlag") {
        if(s.cells === e.panel) {
          var item = s.rows[e.row].dataItem;
          if(item.status){
            var ele = wjcCore.createElement(`<div class="cell-stylee no-link" style="text-align: center;">
            <span>
              <img src="assets/images/check-circle.png" style="width: 13px;"/>
            </span>
          </div>`);
            e.cell.innerHTML = '';
            e.cell.appendChild(ele);
          } else {
            var ele = wjcCore.createElement(`<div class="cell-stylee no-link" style="text-align: center;">
            <span>
              <img src="assets/images/alert-circle.png" style="width: 13px;"/>
            </span>
            <span>
              <a (click)="reUpload(${item})" style="padding: 3px; cursor: pointer;" >
                <img src="assets/images/up-arrow.png" style="width: 13px; cursor: pointer;"/>
              </a>
            </span>
            
          </div>`);
            e.cell.innerHTML = '';
            e.cell.appendChild(ele);
          }
          }
          
      }
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 20 May 2020, 6:22 pm EST

  Hi Kinjalk,

  While using formatItem event to add elements, keep in mind that the elements created are not angular components and just plain HTML elements like we add using javascript. If you need to add a click event listener on the anchor element, you cannot use angular binding b[/b], instead you will need to use the addEventListener method.

  For the cell-style class, make sure that you have added this CSS class in the global stylesheet file because these elements are generated dynamically so adding the class to the components CSS file will not work.

  https://stackblitz.com/edit/angular-nbhfl3

  ~regards