How can I set the column filter of an ODATA bound kendo-grid?

Question

I've got an ODATA source, one column being a bit field 0/1 coming from SQL, which serves as a Boolean type. Setting the filter type for that column to "boolean", the filter query won't work, because it looks for values true/false, instead of 0/1. I want to replace (overwrite) that filter query. How would I do that?

If not possible, I expected the existence of a pipe in the grid that would allow for a conversion of the types: Where is it?

If however I am using a numeric filter, the user must enter 0,1, and he could erroneously enter any other number. So, that's not feasible.

And inserting a custom Checkbox template is not working, because the edit cell Event is not triggered by the click Event on that checkbox.

HansGuckInDieLuft · Answer 1 · 2017-10-30T21:41:44.160

I hoped in vain from an answer from Telerik. Thanks for the good architectural structure of Angular 2, here is the straightforward hack:

I am using a custom binding directive to access the ODATA service, which I copied from the Telerik site.

In there, you'll find the access point for the filter:

    public rebind(): void { 
        this.products.query(this.state);
    }

The state argument has a filter property, which is an object, and this one is the root of a filter tree. (In my table binding, there is no complex nesting of filters, and the filters are just an array: one filter item for a unique column.) The straightforward strategy is to publish this state.filter object via an event emitter and handler to the component, and the handler then true/false into 1/0 for that very column gilter.

So, here is my directive:

    import { Directive, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
    import { DataBindingDirective, GridComponent } from '@progress/kendo-angular-grid';
    import { ProjectAssignmentService } from './project-assignment-service';
    import { Subscription } from 'rxjs/Subscription';

    @Directive({
        selector: '[projectAssignmentBinding]'
    })
    export class ProjectAssignmentBindingDirective extends DataBindingDirective implements OnInit, OnDestroy {
        private serviceSubscription: Subscription;

        constructor(private service: ProjectAssignmentService, grid: GridComponent) {
            super(grid);
        }

        public ngOnInit(): void {
            this.serviceSubscription = this.service.subscribe((result) => {
                this.grid.data = result;
            });

            super.ngOnInit();

            this.rebind();
        }

         public ngOnDestroy(): void {
             if (this.serviceSubscription) 
                this.serviceSubscription.unsubscribe();

             super.ngOnDestroy();
         }

         @Output() setFilter: EventEmitter<any> = new EventEmitter(); 

         public rebind(): void {
            // this.state.filter is undefined during initialization,
            // which I consider to be a bug!
             this.setFilter.emit(this.state.filter);
             this.service.query(this.state);
         }
    }

The handler is declared in the component's html template:

    <kendo-grid projectAssignmentBinding ... (setFilter)="onSetFilter($event)" ... >
    ...
    </kendo-grid>

and the onSetFilter handler in the component does that:

    public onSetFilter(filter: CompositeFilterDescriptor) : void
    {
        this.setBoolFilter(filter);
    }

    // Does only consider uncomposed FilterDescritors, which is given here.
    private setBoolFilter(filter: CompositeFilterDescriptor): void {
        if ( filter == undefined || filter.filters == undefined )
            return;
        let allFilters = filter.filters as FilterDescriptor[];
        let droppedFilter = allFilters.filter((f) => f.field == "Dropped")[0];
        if ( droppedFilter == null )
            return;
        // don't touch others' guts if not inevitably necessary:
        if ( droppedFilter.value === 1 || droppedFilter.value === 0 )
            return;
        droppedFilter.value = droppedFilter.value ? 1 : 0;
    }

where "Dropped" is the column name of the 0/1 bit field and its according column filter is set to be boolean in the kendo-grid-column element

    <kendo-grid-column field="Dropped" title="Dropped" editor="boolean" filter="boolean" (valueChange)="setBoolFilter(filter, $event)" [editable]="false" width="200px" >
    <ng-template kendoGridCellTemplate let-dataItem>

How can I set the column filter of an ODATA bound kendo-grid?

1 Answers1