igx-tree-grid filter design customization

[prabakaran1311]

Is your feature request related to a problem? Please describe.

We have already using igtreegrid in angularjs application. now we are migrating to angular7 I need a normal filter design to integrate the grid. below attached screenshot shows sample design. Also for some particular columns in the grid I have to use dropdown filter.

Describe the solution you'd like

I need to customize igx-tree-grid filter design to our old style column filter design. also need dropdown filter for particular column

Additional context

Sample design screenshot

[kdinev]

@prabakaran1311 Our default row-style filtering is very similar to the screenshot that you've provided, plus it supports multiple conditions per column:

https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/filtering.html

Filtering conditions populated are dependent on the corresponding column data type, but are also customizable. Custom filtering operands can be implemented using extensions of our base filtering operand:

https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/filtering.html#custom-filtering-operands

If your custom filtering operand contains only unary filtering conditions, then the conditions drop down will essentially act as a filtering drop down. Customizations to styling can be implemented using the component theming:

https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/component-themes.html https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/index.html#function-igx-grid-theme

[prabakaran1311]

@kdinev is there any samples available to showcase my sample design. Because i am using css not scss. could you please provide any sample.

[kdinev]

@prabakaran1311 We don't have a specific sample with the color scheme in your screenshot, but there's an example of how to set this up in the SASS. You don't necessarily need to know SASS, as you can just follow the docs for our sass mixins, and all the rest of your scss file would be plain CSS.

Here's a step-by-step: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/examples.html

[prabakaran1311]

@kdinev i don't need a color combination in the design. i need a simple input textbox design instead of material card design. already i raised a question to infragistics forum team said to raise as a new future request in gitHub.

[kdinev]

@prabakaran1311 I see now. You want to be able to have an input directly into the filter row, instead of the chip that expands the filter row to the filtering conditions.

I think we can make this as a custom template that you can provide. Marking this back a feature-request and removing the question label.

@sstoyanovIG @bkulov Would it be very difficult to expose something like the IgxCell directive where a custom template with an input/other editor can be provided and it would replace the content inside the filtering row. Of course, filtering would be performed through the filtering API of the grid using such a custom template.

[bkulov]

@kdinev in theory what you're proposing could be done. But there are a few cases that should be considered first. For example how to visualize multiple filtering expressions in a retemplated cell. Or what to do if there is a filter already applied, which has different condition from the default one (for example the condition is equals instead of contains). This idea have to discussed with the design team too.

[kdinev]

@bkulov The case would be replacing the default UI entirely, which means that the developer would put single, or multiple editors inside, and would populate them based on the grid filtering API.

[bkulov]

@kdinev if that's the case and we let the user handle all filtering this could be done in couple of days.

[prabakaran1311]

@kdinev can you please let me know when we can get this feature. So that we can plan our release. Thanks

[kdinev]

@prabakaran1311 You should be able to get it within a few weeks.

@SlavUI When can we prioritize this to be put in development?

[SlavUI]

@prabakaran1311 we will complete the feature request by the end of next week. Expect an update in the issue :)

[prabakaran1311]

@kdinev is it finished where can i find example for this feature. Thanks

[bkulov]

@prabakaran1311 Development is done. It will be released with our next release. We're currently working on documentation and sample for this feature. Will send you the link once it's done.

[prabakaran1311]

@kdinev can you please let me know when is the next release we are waiting for this feature to integrate with our application. thanks

[zdrawku]

@prabakaran1311, we are going to release versions 7.2.3 and 7.1.12 later today, I will let you know once they are available with npm

[zdrawku]

Both versions are available now.

[prabakaran1311]

@zdrawku @kdinev i could not find any documentation for custom filtering template. can you please provide me the sample for custom filtering template.

[zdrawku]

I believe you will find helpful the following topic and demo.

[prabakaran1311]

@kdinev thanks i have successfully integrated with my application. but after integrated i got one issue in filter. i have implemented remote paging sorting filtering all are remote api calls. initially when i clicking on filtering textbox automatically service calls are called two times without start typing. I am getting this issue in Internet explorer only. in chrome working fine. i have attached screenshot for example. thanks

[prabakaran1311]

@kdinev also when we are using remote pagination in Internet Explorer api service calls are called multiple times. when i click 2nd page api service calls called 2 to 3 times.

[kdinev]

@prabakaran1311 Can you post the code that makes the service calls for filtering and paging?

[prabakaran1311]

@kdinev below is the code i have used for sorting filtering and pagination component.html

<igx-tree-grid #grid1 [data]="datas| async" childDataKey="Properties"  [exportExcel]="true"  [paging]="true"  [perPage]="pageSize" [allowFiltering]="true" [height]="null"
                           [showToolbar]="true" [columnHiding]="true" [autoGenerate]="false" [toolbarTitle]="GridName" expansionDepth="0" [displayDensity]="'compact'"
                           (onDataPreLoad)="processData()" (onSortingDone)="processData()" (onFilteringDone)="processData()">
    <igx-column></igx-column>
</igx-tree-grid>

component.ts

 public processData() {
        if (this._prevRequest) {
            this._prevRequest.unsubscribe();
        }
        this.spinnerLoading = true;
        this.cdr.detectChanges();
        this.filteringExpr = this.grid1.filteringExpressionsTree.filteringOperands;
        this.sortingExpr = this.grid1.sortingExpressions[0];
        this._prevRequest = this.dataservice.getData(this.gridTypes, parseInt(this.regionID), this.SelecteddealType, this.savedQuery, this.skip, this.top, this.filteringExpr, this.sortingExpr, this.searchExpr)
            .subscribe(data => {
                this.data= data;
                this.dataservice.data.next(data.Records);
                this.totalCount = this.pageCountDetails;
                this.paginate(0, true);
                this.cdr.detectChanges();
            });
    }

i have used the below sample for remote pagination and sorting and filtering https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging.html#remote-data - remote pagination https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/virtualization.html#remote-sortingfiltering-virtualization - remote filtering and sorting

[kdinev]

Is it only when you get 401 that a second (retry) request is issued, or even if 200 is returned, you still get a second request?

[prabakaran1311]

yes @kdinev after getting 200 success request completed also one callis going. Main issue is when click on input box without start typing itself call is getting started in IE11

[kdinev]

@prabakaran1311 Sounds like one of the events is fired twice. We will check which one it is @ChronosSF

[prabakaran1311]

@kdinev please check filter inputbox also because onfocus on inputbox in filter api services are called.

[prabakaran1311]

Hi @kdinev i am waiting to fix this bug let me know when it will be fixed thanks

[kdinev]

@prabakaran1311 We've planned this for investigation. We will let you know once we have more info.

@ChronosSF @bkulov @gedinakova

[bkulov]

@prabakaran1311 Please log a new issue for these events as this one is getting out of control.

[prabakaran1311]

@bkulov @kdinev i have raised new issue #4545 thanks