<activity-overlay [activity]="portfolioDataLoader$" class="fade-out">
<kendo-grid [data]="buildings" [height]="500" [filterable]="true" >
<kendo-grid-column field="name" [title]="'GROUP_DETAILS.NAME' | translate" width="200" [filterable]="true" ></kendo-grid-column>
<kendo-grid-column field="description" [title]="'GROUP_DETAILS.DESCRIPTION' | translate" width="300" [filterable]="true"></kendo-grid-column>
<kendo-grid-column [title]="'PORTFOLIO.DETAILED_VIEW'| translate" [style.text-align]="'center'">
<ng-template kendoGridCellTemplate let-dataItem>
<i class="tk tk-arrow-r-o tk-3x font-weight-bold w-100 text-center" (click)="detailView(dataItem)"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column [title]="'PORTFOLIO.ACTIONS' | translate">
<ng-template kendoGridCellTemplate let-dataItem>
<div class="d-flex gap-2 w-100 justify-content-center">
<i class="tk tk-pencil-o tk-3x font-weight-bold text-center edit" [hidden]="dataItem.isUpdating"
(click)="editGroup(dataItem)"></i>
<i class="tk tk-check-o tk-3x font-weight-bold text-center save"
[class]="isSavingInProgress ? 'k-icon k-i-loading' : ''" [hidden]="!dataItem.isUpdating"
(click)="saveChanges(dataItem)"></i>
<i class="tk tk-reset-o tk-3x font-weight-bold text-center reset" [hidden]="!dataItem.isUpdating"
(click)="resetGroup(dataItem)"></i>
</div>
</ng-template>
</kendo-grid-column>
<ng-template kendoGridDetailTemplate="" let-dataItem>
<kendo-grid class="inline-grid" [data]="buildingsGroupByNames[dataItem.name] ? buildingsGroupByNames[dataItem.name] : []" [scrollable]="'none'">
<kendo-grid-column field="groupName" [title]="'PORTFOLIO.GROUP_NAME' | translate"></kendo-grid-column>
<kendo-grid-column field="rearDoors" [title]="'PORTFOLIO.FLOORS' | translate">
<ng-template kendoGridCellTemplate let-dataItem>
<kendo-multiselect [clearButton]="false" [disabled]="true" [data]="groupStopsInfo[dataItem.groupDeviceId]"
textField="groupFloorLabel"
valueField="groupStopId" valuePrimitive="true"
[(ngModel)]="dataItem.groupFloorAccess">
<ng-template kendoMultiSelectHeaderTemplate let-dataItem>
<div class="content-box">
<p class="lead m-0">
{{'PORTFOLIO.SELECT_ALL' | translate}}
</p>
</div>
</ng-template>
</kendo-multiselect>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="isVipCallsAllowed" [title]="'PORTFOLIO.PERMISSIONS' | translate">
<ng-template kendoGridCellTemplate let-dataItem>
<kendo-multiselect [data]="elevatorFunctionalityLOV" [clearButton]="false"
[disabled]="!dataItem.isUpdating" [(ngModel)]="dataItem.permissions">
<ng-template kendoMultiSelectItemTemplate="" let-dataItem>
<ng-container [ngSwitch]="dataItem">
<ng-container *ngSwitchCase="'isVipCallsAllowed'">{{'PORTFOLIO.ALLOW_VIP_CALLS' |
translate}}</ng-container>
<ng-container *ngSwitchCase="'isHandicapCallsAllowed'">{{'PORTFOLIO.ALLOW_HANDICAP_CALLS' |
translate}}</ng-container>
</ng-container>
</ng-template>
<ng-template kendoMultiSelectTagTemplate let-dataItem>
<ng-container [ngSwitch]="dataItem">
<ng-container *ngSwitchCase="'isVipCallsAllowed'">{{'PORTFOLIO.ALLOW_VIP_CALLS' |
translate}}</ng-container>
<ng-container *ngSwitchCase="'isHandicapCallsAllowed'">{{'PORTFOLIO.ALLOW_HANDICAP_CALLS' |
translate}}</ng-container>
</ng-container>
</ng-template>
</kendo-multiselect>
</ng-template>
</kendo-grid-column>
</kendo-grid>
</ng-template>
</kendo-grid>
<ng-template #floorsTemplate let-floors>
<span>{{ floors.value === 'all' ? 'All floors' : floors.value.join(', ') }}</span>
</ng-template>
<button type="button" class="btn btn-primary d-flex gap-2 align-items-center mt-4" (click)="addGroup()">
<i class="tk tk-plus-o tk-2x"></i>
<span>{{'PORTFOLIO.CREATE_USER_GROUP' | translate}}</span>
</button>
</activity-overlay>
I added [filterable]-true property for Name and Description property filters are coming. But they are not working when I try to search
Below is the output :-
Kendo Grid Angular [filterable] = true not working
0 Answers
38 Views