Column filter used by createwidget

[morososBlocked]

Good Morning

I would like to filter a column where I am using a createwidget that injects an angular component.

  createwidget: (
          row,
          column: any,
          value,
          htmlElement: HTMLElement
        ): void => {

          if (value) {
            const container = document.createElement('div');
            htmlElement.appendChild(container);
            const result = this.jqxDomService.loadComponent(
              CustomPhraseIconComponent,
              container
            );

            const instance = result.componentRef
              .instance as CustomPhraseIconComponent;

            instance.configuration = {
              phrase: value?.phrase,
              iconValue: value?.iconValue,
            };
          }
        },

Currently it does not filter anything, I would like to filter by the phrase value, or phrase + iconValue I do not care.
I have tried the following things:
1-Transform the object with JSON.stringify and parse it inside the component, this effectively works but it filters badly.
2-save the original field to another data field, then opt for the object to create the component, it also filters badly.

 {
        text: 'Service',
        datafield: 'service',
        createwidget: (
          row,
          column: any,
          value,
          htmlElement: HTMLElement
        ): void => {
          const service = row.bounddata.serviceCell;

          if (value) {
            const container = document.createElement('div');
            htmlElement.appendChild(container);
            const result = this.jqxDomService.loadComponent(
              CustomPhraseIconComponent,
              container
            );

            const instance = result.componentRef
              .instance as CustomPhraseIconComponent;

            instance.configuration = {
              phrase: service?.phrase,
              iconValue: service?.iconValue,
            };
          }
        },

Any idea how to do it?

Thank you so much.

[Yavor DashevParticipant]

Hi morosos,

I wasn’t able to completely able to reproduce the issue that you have, maybe if you sent a bit more information and context of the CustomPhraseIconComponent then we will be able to reproduce the issue as you do and possibly find solution for you use case.

However I strongly suggest you to check the following example which showcases how programmatically add filter to your grid: https://www.jqwidgets.com/angular/angular-grid/angular-grid-filtering.htm

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[morososBlocked]

The component is very simple, it is only a text, accompanied by an icon with additional information.
I’d like to filter it by the configuration.phrase text at the very least.

   <div style="text-align:center;">
    <div style="margin-top: -3px; display:inline;" class="jqx-grid-cell-left-align">{{configuration.phrase}}
    </div>
    <mat-icon style=" display:inline;" [class]="'icon-tooltip-table'" [matTooltip]="configuration?.iconValue">info
    </mat-icon>
    <div>

export interface PhraseIconConfig {
  phrase: string;
  iconValue: any;
}
@Component({
  selector: 'app-custom-phrase-icon',
  templateUrl: './custom-phrase-icon.component.html',
})
export class CustomPhraseIconComponent  {
  @Input() configuration: PhraseIconConfig;
  constructor() {}

}

Thanks and best regards.

[Author]

Posts