ruddnisrus
ruddnisrus

Reputation: 245

How to create multiselect filter for list in kendo for angular?

I have situation when I'm displaying on grid list of persons.

NAME --- LASTNAME --- AGE --- HOBBIES

Name, lastname and age are single value, but hobbies are list of hobbies, for example for one person I got "football, basketball, speedway, music" etc.

I want to have dropdown in my hobbies filter with all hobbies and select for example : football and music, and I want to have only persons which has this hobbies in list.

How I can do it? I was trying to have multiselect custom filter :


    @Component({
      selector: 'app-multiselect-dropdown-filter',
      templateUrl: './multiselect-dropdown-filter.component.html',
      styleUrls: ['./multiselect-dropdown-filter.component.scss']
    })
    export class MultiselectDropdownFilterComponent extends BaseFilterCellComponent {
    
      @Input() public filter: CompositeFilterDescriptor;
      @Input() public data: any[];
      @Input() public textField: string;
      @Input() public valueField: string;
    
      constructor(filterService: FilterService,) {
        super(filterService)
      }
    
      public onChange(value: any): void {
        this.applyFilter(
          value === null ? // if value of the default item
            this.removeFilter(this.valueField) : // remove the filter
            this.updateFilter({ // otherwise add/modify the filter for the field with the value
              field: this.valueField,
              operator: "contains",
              value: value
            })
        ); // and update the root filter
      }
    
    }


    <kendo-multiselect [data]="data"
        [textField]="textField"
        [valueField]="valueField"
        [autoClose]="false"
        (valueChange)="onChange($event)">
    </kendo-multiselect>


    <ng-template kendoGridFilterCellTemplate let-filter>
      <app-multiselect-dropdown-filter [filter]="filter"
       [data]="locations"
       textField="Hobby"
       valueField="HobbyId">
      </app-multiselect-dropdown-filter>
    </ng-template>

But when I select some hobbies I got 500 error.. It even doesn't hit controller. Is there some possibility to do it in kendo? I can't find suitable documentation

Upvotes: 1

Views: 294

Answers (0)

Related Questions