Kendo Menu Filter is not working in kendo Grid Angular

0 Answers 29 Views
Grid
Jyoti
Top achievements
Rank 1
Jyoti asked on 21 Nov 2022, 01:27 PM
<div class="container" style="min-height: 50px; margin-top: 0px;">
    <div class="col-md-12">
      <div class="statistics">
        <div id="myRoleItemsAll" >
          <button [ngClass]="{'selected' : totalMySupportVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayTotalVarianceMyAwaitingSupport()">
          <p class="countnumber countnumber-purple">{{totalMySupportVarianceCount}}</p>
          <label>Total</label>
        </button>
        </div>
        <div id="myRoleItemsActive" >
          <button [ngClass]="{'selected' : pendingByMeVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayPendingByMeVarianceMyAwaitingSupport()">
          <p class="countnumber countnumber-green">{{pendingByMeVarianceCount}}</p>
          <label>Pending on Me</label>
        </button>
        </div>
        <div id="myRoleItemsExpired" >
          <button [ngClass]="{'selected' : doneByMeVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayDoneByMeVarianceMyAwaitingSupport()">
          <p class="countnumber countnumber-red">{{doneByMeVarianceCount}}</p>
          <label>Done by Me</label>
        </button>
        </div>
        <div class="clearfix"></div>
      </div>
     
    </div>
  </div>
  <div class="panelGridContainer">
    <ng-template #template let-anchor>
      <span>{{ anchor.nativeElement.innerText }}</span>
  </ng-template>
  <div kendoTooltip
      showOn="none"
      [tooltipTemplate]="template"
      filter=".k-grid td"
      (mouseover)="showTooltip($event)"
      position="right"
  >
    <kendo-grid
    [data]="viewMySupport"
    [columnMenu]="false"
    filterable='menu'
    [filter]="gridState.filter"
    [resizable]="true"
    [sort]="gridState.sort"
    [sortable]="true"    
    (filterChange)="filterChange($event)"
    (dataStateChange)="onStateChange($event)"      
    [navigable]="true"      
    [style.height.%]="300"
  >
    <ng-template kendoGridToolbarTemplate>          
      <button type="button" kendoGridExcelCommand icon="file-excel">
        Export to Excel
      </button>
    </ng-template>
    <kendo-grid-column
      field="varianceID"
      title=" Variance ID"
      >
    <ng-template  kendoGridCellTemplate let-dataItem>
      <a style="color:#337ab7"  [routerLink]="['/variance/edit/'+dataItem.varianceID]">{{dataItem.varianceID}}</a>
</ng-template>
  </kendo-grid-column>
    <kendo-grid-column
      field="varianceTitle"
      title="Variance Title"
    >
    <ng-template kendoGridCellTemplate let-dataItem>
      <span style="overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;"
         >
        {{ dataItem.varianceTitle }}
      </span>
  </ng-template>  
  </kendo-grid-column>
    <kendo-grid-column field="expirationDate"  title="Expiration Date"
    format="MM/dd/yyyy"
    filter="date"
    >
      <ng-template kendoGridCellTemplate let-dataItem>
          {{dataItem.expirationDate | date: 'MM/dd/yyyy'}}
      </ng-template>
  </kendo-grid-column>
  <kendo-grid-column
  field="status"
  title="Status"      
></kendo-grid-column>
    <kendo-grid-excel fileName="VarianceAwaitingSupportList.xlsx"></kendo-grid-excel>
  </kendo-grid>

</div>

 

 

 

 

import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { filter, map, Observable } from 'rxjs';
import { GridDataResult, DataStateChangeEvent, GridComponent } from "@progress/kendo-angular-grid";
import { State, process, FilterDescriptor, FilterOperator, CompositeFilterDescriptor, DataSourceRequestState } from "@progress/kendo-data-query";
import { TooltipDirective } from '@progress/kendo-angular-tooltip';
import { AuthService } from 'src/app/services/general-app-services/auth/auth.service';
import { AwaitingSupportDashboardDataService } from 'src/app/admin/services/awaiting-support-dashboard-data.service';
@Component({
  selector: 'app-supportawaitingitems',
  templateUrl: './supportawaitingitems.component.html',
  styleUrls: ['./supportawaitingitems.component.css']
})
export class SupportawaitingitemsComponent implements OnInit {
  @ViewChild(TooltipDirective) public tooltipDir: TooltipDirective;
  currentUserId: string;
  public viewMySupportData: Observable<GridDataResult> | any;
  public viewMySupport: Observable<GridDataResult> | any;
  public gridState: State = {
    sort: [],
    //  // Initial filter descriptor
     filter: {
      logic: 'and',
      filters: []
    }
  };
  public totalMySupportVarianceCount: number | undefined;
  public pendingByMeVarianceCount: number | undefined;
  public doneByMeVarianceCount: number | undefined;
  totalMySupportVarianceSelected: boolean | undefined = true;
  pendingByMeVarianceSelected: boolean | undefined = false;
  doneByMeVarianceSelected: boolean | undefined = false;
  private awaitingSupportService: AwaitingSupportDashboardDataService;
  pendingState: string = "ActionPending";
  doneState: string = "ActionDone";
  constructor(@Inject(AwaitingSupportDashboardDataService) AwaitingSupportDashboardDataServiceFactory: () => AwaitingSupportDashboardDataService,
    private authService: AuthService) {
    this.awaitingSupportService = AwaitingSupportDashboardDataServiceFactory();
    this.currentUserId = authService.getUserId();
  }
  public ngOnInit() {
    this.awaitingSupportService.fetchCountOfVarianceAwaitingSupport(this.currentUserId).subscribe((val: any) => {
      this.totalMySupportVarianceCount = val[0].totalVarianceCountForSupporter;
      this.pendingByMeVarianceCount = val[0].pendingSupporterAction;
      this.doneByMeVarianceCount = val[0].completedSupporterAction;
    });
    this.viewMySupportData = this.awaitingSupportService.pipe(
      map((data) => process(data, this.gridState))
    );
    this.viewMySupport = this.viewMySupportData.subscribe(val => {
      this.viewMySupport = val;
    });
    this.awaitingSupportService.read(this.currentUserId);
  }
  public onStateChange(state: DataSourceRequestState): void {
    this.gridState = state;
    this.awaitingSupportService.read(this.currentUserId);
  }
  public displayTotalVarianceMyAwaitingSupport() {
    this.totalMySupportVarianceSelected = true;
    this.pendingByMeVarianceSelected = false;
    this.doneByMeVarianceSelected = false;
    this.loadVariaceByStatus('All',true);
  }
  public filterChange(filter: CompositeFilterDescriptor): void
  {
      this.gridState.filter = filter;
      //this.logs = filterBy(sampleProducts, filter);
  }
  public displayPendingByMeVarianceMyAwaitingSupport() {
    this.totalMySupportVarianceSelected = false;
    this.pendingByMeVarianceSelected = true;
    this.doneByMeVarianceSelected = false;
    this.loadVariaceByStatus(this.pendingState,false);
  }
  public displayDoneByMeVarianceMyAwaitingSupport() {
    this.totalMySupportVarianceSelected = false;
    this.pendingByMeVarianceSelected = false;
    this.doneByMeVarianceSelected = true;
    this.loadVariaceByStatus(this.doneState,false);
  }
  loadVariaceByStatus(statusCall: string, isTotalCall: boolean) {
    if (isTotalCall) {
      this.viewMySupportData = this.awaitingSupportService.pipe(
        map((data) => process(data, this.gridState))
      );
      this.viewMySupport = this.viewMySupportData.subscribe(val => {
        this.viewMySupport = val;
      });
    } else {
      this.viewMySupportData = this.awaitingSupportService.pipe(
        map((data) => process(data.filter(x => x.state === statusCall), this.gridState))
      );
      this.viewMySupport = this.viewMySupportData.subscribe(val => {
        this.viewMySupport = val;
      });
    }
    this.awaitingSupportService.read(this.currentUserId);
  }
  public showTooltip(e: MouseEvent): void {
    const element = e.target as HTMLElement;
    if ((element.nodeName === 'TD' || element.nodeName === 'TH')
      && element.offsetWidth < element.scrollWidth) {
      this.tooltipDir.toggle(element);
    } else {
      this.tooltipDir.hide();
    }
  }
}

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Jyoti
Top achievements
Rank 1
Share this question
or