Override Filter on Grid to remove "Is Null" & "Is Not Null"

[Michael]

Hi everyone.

 

I already have a wrapper for "Kendo-grid" (app-data-table: it set everything about data, kind of filters (row, menu), and others) and almost work fine that all, however, when I use it in other component that insert the "kendo-grid-column" and I tried to customize a filter it start to throw errors.

 

Here a brief part of code:

<app-data-table *ngIf="dataTableOptions" [options]="dataTableOptions" (api)="setDataTableAPI($event)"
<kendo-grid-column field="fieldName" [title]="fieldTitle" [filterable]="true" [width]="180" filter="text"> 
            <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
                <kendo-grid-string-filter-menu
                  [column]="column"
                  [filter]="filter"
                  [filterService]="filterService">
                    <kendo-filter-eq-operator></kendo-filter-eq-operator>
                    <kendo-filter-neq-operator></kendo-filter-neq-operator>
                    <kendo-filter-contains-operator></kendo-filter-contains-operator>
                    <kendo-filter-not-contains-operator></kendo-filter-not-contains-operator>
                    <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
                    <kendo-filter-endswith-operator></kendo-filter-endswith-operator>
                </kendo-grid-string-filter-menu>
          </ng-template>
        </kendo-grid-column>
</app-data-table>

 

Here an image with one of the errors:

 

Any help, thanks?

[Hetali]

Hi Ryan,

In order to customize the filter menu of the Kendo UI Grid, the FilterMenuTemplateDirective in the Column component must be defined inside the GridComponent selector i.e. kendo-grid.

@Component({
  selector: "app-data-table",
  template: `
    <kendo-grid [data]="data" filterable="menu" [height]="300">
      <kendo-grid-column field="ProductName" filter="text"> 
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column">
          <kendo-grid-string-filter-menu>
          </kendo-grid-string-filter-menu>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  `
})

Output:

In this StackBlitz example, I have defined the column inside the GridComponent and customized the Filter Menu operators.

I hope this helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Michael]

Hello Hetali.

 

Are there any other options to do this customize, like a projection?

 

Thanks in advance for your answer.

[Martin Bechev]

Hi Ryan,

It is an integral part that the templates and the Grid share the same context because the Grid component is providing the ContextService and if they don't have the same context the columns' custom cell templates will not have access to the ContextService instance.

Please keep in mind that projecting the columns in such a way is not supported by the Kendo UI for Angular Grid component.

Instead of creating a component wrapper, create a custom directive, e.g. kendoGrid, and apply the directive directly on the <kendo-grid> tag. The custom directive itself should take care of setting all desired properties. Moreover, if the custom directive's selector is defined as 'kendo-grid' the directive will be applied automatically without the need to set it explicitly to the <kendo-grid> tag.

<kendo-grid kendoGrid>
     <!-- Define columns here -->
</kendo-grid>

An alternative to the first suggested approach would be to keep the custom wrapper component, but instead of declaring the columns outside of <kendo-grid>, pass them as a configuration input, e.g. columnsConfig, and use the input to generate the columns dynamically using the ngFor directive.

<!-- app.component.ts -->
<grid-wrapper-component [columnsConfig]="config">
</grid-wrapper-component>

<!-- grid-wrapper.component.ts -->
<kendo-grid
        #grid
        [kendoGridBinding]="gridData"
        [pageSize]="5"
        [sortable]="true"
        [pageable]="true"
        [filterable]="true">

        <kendo-grid-column *ngFor="let column of columnsConfig" ...>
        </kendo-grid-column>
</kendo-grid>

Inside the ngFor cycle, the implementation could rely on using the ngIf directive to determine whether a specific template should be rendered, e.g.:

<kendo-grid-column 
    *ngFor="let col of columns"
    [field]="col.field" 
    [width]="col.width"
>
    <ng-template *ngIf="col.cellTemplate" kendoGridCellTemplate let-dataItem>
        <span>
            Hello {{dataItem[col.cellTemplate.textField]}}
        </span>
    </ng-template>
</kendo-grid-column>
....
public columns = [
    ...
    {
      field: 'ContactName',
      width: 120,
      cellTemplate: {
        textField: 'name',
      },
    },
    ...
];

I hope this helps.

Regards,
Martin
Progress Telerik