при использовании скрытого, чтобы скрыть столбец, он автоматически обновляет страницу - PullRequest
Новая
       35

при использовании скрытого, чтобы скрыть столбец, он автоматически обновляет страницу

0 голосов
/ 11 июля 2019

Я использую кендо-сетку и пытаюсь скрыть столбец при нажатии кнопки скрытия. Это работает, когда я нажимаю скрыть, но затем обновляет страницу, на которой я нахожусь, и ломает ее. Я хотел бы скрыть столбец, но без обновления страницы. пожалуйста, найдите прикрепленный код 

<kendo-grid #grid
          [data]="gridView"
          [skip]="state.skip"
          [pageSize]="state.take"
          [pageable]="false"
          [height]="gridHeight"
          [sort]="state.sort"
          [sortable]="{mode: 'single'}"
          [filterable]="true"
          [filter]="state.filter"
          (scrollBottom)="pageChange($event)"
          [resizable]="true"
          (sortChange)="sortChange($event)"
          (filterChange)="filterChange($event)"
          [rowClass]="rowCallBack"
          (cellClick)="cellClick($event)"
          (cellClose)="cellCloseHandler($event)"
          (dataStateChange)="dataStateChange($event)">
 <ng-template kendoGridToolbarTemplate>
  Total Elements: {{gridView?.total}}
  <button (click)="restoreColumns()" class="k-button restore- 
 button">Restore hidden columns</button>
  <button type="button" class="k-button export-button" 
 kendoGridExcelCommand>
    <i class="k-icon k-i-file-excel icon"></i>
    Export to Excel
  </button>
  <div *ngIf="progressionExportDataLoading" class="k-i-loading"> . 
 </div>
 </ng-template>
 <!--<ng-template let-column>-->
 <kendo-grid-column field="pin" min-width="80" width="150" 
 [minResizableWidth]="100" [hidden]="hidePinColumn">
  <ng-template kendoGridHeaderTemplate let-dataItem>
    PIN
    <button
      (click)="hideColumn(dataItem.field)"
      class="k-button k-primary"
      style="float: right;">
      Hide
    </button>
  </ng-template>
 </kendo-grid-column>
</kendo-grid>

//function

public restoreColumns(): void {
 this.hidePinColumn = false;
 // this.hiddenColumns = [];
}

public hideColumn(field: string): void {
 if (field === 'pin') {
  this.hidePinColumn = true;
 }
 // console.log(field, 'field');
 // this.hiddenColumns.push(field);
}
...