Filtering with kendoGridCellTemplate that loads a custom component

[Bram]

Hello,

I'm trying to load custom components in a kendoGridCellTemplate.  This works fine to display the data.

But when I try filtering the column it doesn't filter correctly. I've tried it on text, numeric and date fields.

This is my code

<kendo-grid-column
        *ngIf="!column.customComponent"
        [field]="column.name"
        [title]="column.title"
        [filter]="column.filterType"
        [hidden]="column.hidden"
        [width]="140"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <span style="display: block; padding: 8px 12px" class="whole-cell">
            <uni-grid-cell [data]="dataItem" [column]="column" [config]="vm.config"></uni-grid-cell>
          </span>
        </ng-template>
      </kendo-grid-column>

In the uni-grid-cell I display the value from dataItem[column.name].

Do you have any advice?

[Svet]

Hi Bram,

Thank you for the provided sample markup.

Please make sure that the uni-grid-cell component extends the BaseFilterCellComponent and calls the applyFilter function when the value within the uni-grid-cell component changes as demonstrated in the custom filter row components article:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row/#toc-custom-filter-row-components

To see an example implementing this approach please see the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row/#toc-using-dropdownlist

where points 5 and 6 show how the custom component extends the BaseFilterCellComponent and calls the applyFilter function.

I hope the provided information points you in the right direction.

Regards,
Svet
Progress Telerik

[Bram]

Hi Svet,

The problem isn't the filtering (template) but the data/column template.

What I'm trying to do is build a "dynamic" grid that allows the user to configure it. So I get back which columns I need to show and in what way (just text, number, date or custom component).

This works and I can render the grid and everything looks good.  But when I start filtering the data, it isn't filtered correctly.

I've added a demo where you can see the behavior (my real app has multiple components it needs to inject).  Just a little side info, to put the correct component in the template I use the Injector from angular/core. 

My conclusion is that the grid filters the data to x rows but then shows the top x rows instead of the correct ones. 

Am I doing something wrong, or do I just need to add something to make it work?

Regards,

Bram

[Svet]

Hi Bram,

Thank you for the provided sample project. Now the setup is clear.

It looks like the app-component-injector component somehow modifies the Grid data and causes the demonstrated undesired behavior. To prove that show the Discontinued column values in the template as demonstrated below and see that the returned values after filtering are correct, while the values shown with the app-component-injector are not:

<kendo-grid-column>
...
    <kendo-grid-column field="Discontinued" title="Discontinued" filter="boolean">
      <ng-template kendoGridCellTemplate let-dataItem >
        {{dataItem.Discontinued}}
        <app-component-injector [dataItem]="{Discontinued: dataItem.Discontinued}" column="Discontinued"></app-component-injector>
    </ng-template>
  </kendo-grid-column>

What could be done in this case is to use the trackBy function in order to track for row changes by the dataItem (not by index as default):

    <kendo-grid [trackBy]="trackBy">
    </kendo-grid>

   public trackBy(index: number, item: GridItem): any {
       return item;
   }

I hope the provided information helps. Feel free to write back if needed.

Regards,
Svet
Progress Telerik