<kendo-treelist
  class="kendo-treelist"
  [kendoTreeListFlatBinding]="data"
  #directive="kendoTreeListFlatBinding"
  [rowClass]="dynamicClass"
  [parentIdField]="parentIdField"
  [idField]="idField"
  kendoTreeListExpandable
  kendoTreeListSelectable
  [rowReorderable]="true"
  (cellClick)="onCellClick($event)"
  [itemKey]="idField"
  [(selectedItems)]="selected"
  [(expandedKeys)]="expandedIds"
  [isExpanded]="isExpanded"
  (expand)="onExpand($event)"
  (collapse)="onCollapse($event)"
  (rowReorder)="onRowReorder($event)"
  [loading]="data.length == 0"
  >
  <kendo-treelist-rowreorder-column [width]="25"></kendo-treelist-rowreorder-column>    
  <kendo-treelist-column
    *ngFor="let column of treeListOptions.columns" 
    [field]="column.field" 
    [expandable]="column.expandable" 
    [title]="column.title"  
    [width]="column.width">
    <ng-template *ngIf="column.ngTemplate" kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex">
      <!-- Context values will be accessible for column customization on the parent component. -->
      <ng-container *ngTemplateOutlet="template; context: { dataItem, rowIndex, column }"></ng-container>
    </ng-template>
  </kendo-treelist-column>
</kendo-treelist>

export class CustomMultiSelectFilterComponent implements AfterViewInit {

  @Output() public handleFilterChange = new EventEmitter<CompositeFilterDescriptor>()

  @Input() public data: string[] = []
  @Input() public textField: string = ""
  @Input() public valueField: string = ""
  @Input() public filter: CompositeFilterDescriptor = { logic: "or", filters: [] }
  @Input() public preFilterValue: string | null = null
  @Input() public filterService: FilterService
  @Input() public currentFilter: CompositeFilterDescriptor = { logic: "or", filters: [] }

  public constructor(
    filterService: FilterService
  ) {
    this.filterService = filterService
  }

  public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter
    this.data = filterBy(this.data , filter)
    this.handleFilterChange.emit(filter)
  }

  public onChange(values: string[], filterService: FilterService): void {
    filterService.filter({
      filters: values.map((value) => ({
        field: this.valueField,
        operator: "contains",
        value,
      })),
      logic: "or",
    })
  }

  public ngAfterViewInit(): void {
    if (this.filterService) {
      this.filterService.changes.subscribe((filter: CompositeFilterDescriptor) => {
        this.currentFilter = filter
        console.log("Current Filters:", this.currentFilter)
      })
    }
  }

}

<kendo-multiselect
  [data]="data"  
  [valuePrimitive]="true"
  [textField]="textField"
  [valueField]="valueField"
  [value]="filter | filterValues"
  (valueChange)="onChange($event, filterService)"
  >
</kendo-multiselect>

<kendo-grid
  kendoGridSelectBy="id"
  [kendoGridBinding]="users"
  filterable="menu"
  [sortable]="true"
  [resizable]="true"
  (selectionChange)="selectionChange($event)"
  [selectable]="selectableSettings"
  [selectedKeys]="[selectedKeyArray]"
  (filterChange)="handleFilterChange($event)"
  [filter]="filter"
>
  <kendo-grid-column-group title="{{ 'literal:Users | Total:' | translate }} {{ users.length }}" [columnMenu]="true">
    <kendo-grid-column field="roles" title="{{ 'literal:Roles' | translate }}" [width]="220" [headerStyle]="{ 'font-weight': 'bold' }">
      <ng-template kendoGridFilterMenuTemplate let-filter="filter" let-filterService="filterService">
        <app-custom-multiselect-filter
          [data]="rolesToFilter"
          textField="rolesToFilter"
          valueField="filterRoles"
          [preFilterValue]="preFilter"
          [filterService]="filterService"
          [currentFilter]="filter"
          >
        </app-custom

<form class="k-form" [formGroup]="usrForm">
  <kendo-combobox #formContractor formControlName="formCity" [data]="cities"
    textField="name" valueField="id" (valueChange)="ControlValueChange($event)" [clearButton]="true">
  </kendo-combobox>
</form>

this.usrForm.controls['formCity'].setValue(newCityObj);
this.usrForm.controls['formCity'].patchValue(newCityObj);
this.usrForm.patchValue({formCity: newCityObj});

public window : WindowRef

<kendo-drawer-container>
    <kendo-drawer
      #drawer
      [items]="drawerItems"
      [mode]="'push'"
      [mini]="true"
      [expanded]="false"
      (select)="onDrawerSelect($event)"


drawerItems: DrawerRoutingItem[] = [
    {
      svgIcon: ?????????,
      text: "Chargements",
      path: "",
      selected: window.location.pathname==="/"
    },
    {
      svgIcon: ????????????,
      text: "Horaire des reprises",
      path: "horaire",
      selected: window.location.pathname==="/horaire"
    }
  ];