Flexgrid static multi row columnHeaders with filter on topmost

Flexgrid static multi row columnHeaders with filter on topmost

Posted by: shivangi.sinha on 8 July 2021, 6:04 am EST

• 

  shivangi.sinha

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 July 2021, 6:04 am EST - Updated 3 October 2022, 1:03 pm EST

  My requirement is add some static rows at the bottom/top as per user’s preference.
  
  I’ve added rows to the columnFooter/Header to achieve this.
  
  The footer case fits my requirement, but in case of adding these to columnHeader rows, filter gets appended to bottommost row, I want this row to appear at the top.

  

  690×1200 43.8 KB

  

  756×1202 43.3 KB

• 

  shivangi.sinha

  • Post Options:
  • Link
    Copy

  Posted 8 July 2021, 6:13 am EST

  HTML

  <div class="flexGridContainer" >
      <wj-flex-grid #flexGrid
                    [itemsSource]="itemsSource"
                    [itemFormatter]="itemFormatter"
                    [headersVisibility]="1"
                    [isReadOnly]="true"
                    [stickyHeaders]="true"
                    [autoGenerateColumns]="false"
                    [itemFormatter]="itemFormatter"
                    (loadedRows)="onGridLoaded()"
                    (click)="applySort($event)">
          <wj-flex-grid-column *ngFor="let col of columns"
                               [allowDragging]="None"
                               [binding]="'id"
                               [isRequired]="false"
          >
  
          </wj-flex-grid-column>
          <wj-flex-grid-filter></wj-flex-grid-filter>
      </wj-flex-grid>
  </div>
  

  .ts

  appendStaticRows() {
          const { data, alignTop } = this.rowMetaData;
          data.forEach((item, index) => {
              let row = new Row(item);
              if ( alignTop ) {
                  this.flexGrid.columnFooters.rows.clear();
                  this.flexGrid.columnHeaders.rows.unshift(row );
                  console.log(index);
              } else {
                  this.flexGrid.columnHeaders.rows.length > 1 ?
                      this.flexGrid.columnHeaders.rows.splice(0, data.length) : (() => {})();
                  this.flexGrid.columnFooters.rows.push( row );
              }
          });
      }
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 13 July 2021, 2:17 am EST

  Hi,

  In order to achieve the required functionality, You may make use of showFilterIcons property and handle formatItem event to add filter icons on top columnHeader row. And also you may handle click event on FlexGrid’s hostElement to open the filter on filter icon click as follows -

  initGrid(flex: wjcGrid.FlexGrid) {
      if (flex) {
        flex.quickAutoSize = true;
      }
  
      flex.formatItem.addHandler((s, e) => {
        if (e.panel.cellType === wjcGrid.CellType.ColumnHeader && e.row == 0) {
          e.cell.innerHTML =
            e.cell.innerHTML + '<span class="wj-glyph-filter"></span>';
          if (this.filter.getColumnFilter(e.col).isActive) {
            e.cell.classList.add('wj-filter-on');
          }
        }
      });
  
      flex.hostElement.addEventListener(
        'click',
        e => {
          let ht = flex.hitTest(e);
          if (e.target.className === 'wj-glyph-filter') {
            e.stopImmediatePropagation();
            this.filter.editColumnFilter(ht.col);
          }
        },
        true
      );
    }
  

  For better understanding, you may refer to the below code sample -
  
  https://stackblitz.com/edit/angular-prizeg?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  shivangi.sinha

  • Post Options:
  • Link
    Copy

  Posted 5 August 2021, 2:21 am EST

  Thanks a lot! This was very helpful.