Kendo UI Angular Global Search

Question

Just short question, I have tried to look around on how to do the global search for Kendo UI Angular. What I mean by global search is, outside the kendo table have a text field, then we type anything in field then the kendo table will load and search the data.

I have done this using Kendo Angular Jquery but yet till now I can't find the solution on how to do the global search on Kendo UI Angular

If someone had done with this, can share me how to do the global search for Kendo UI Angular table.

note: I'm using angular 4 for my current development.

many thanks

Answer 1

I'm not aware of any feature like that other than filtering rows. You could create your own filter to achieve this, since after all, you're just feeding a data array to kend-grid

So I'd create a searchInput Pipe, that takes keyword argument

<kendo-grid [data]="gridData | searchInput: keyword">

1. Build a custom pipe, and feed it the data array, as well as arguments like substring

I'm guessing you already have a model.. something like this

export class DeviceType {
  constructor(
    public deviceId: string,
    public deviceType: string,
    public currentUser: string
  ) {}
};

you can use filter function, and feed it a callback function that compares argument input with each data element. Note in this example were only comparing two things, you can easily do it with several members.

@Pipe({
  name: 'searchData'
})
export class SearchData implements PipeTransform {
  transform(data: DeviceType[], arg: string): any {
    return data.filter(item => {
      if (arg) {
        const searchInput = arg.toLowerCase();
        const deviceId = item.deviceId.toLowerCase();
        const deviceType = item.deviceType .toLowerCase();

        if(deviceId.includes(searchInput) || deviceType .includes(searchInput)){
          return item;
        }
      }
});

} }

2. Create the input form and feed it as an argument to the

3. Pipe your input data, and feed the argument with string entered in input.