Manually call column filter in column header

[Domantas]

Hello,

I want to use my own buttons in column header menu and i get the problem with filter.  I couldn't push your existing filter item into my ColumnMenuItem array and i couldn't find a way  how to render filter near my custom "Filter" item

So there are 2 options to solve this:

    1. Push your created filter to my ColumnMenuItems

    2. Render filter near my custom item in ColumnMenu

I found this method, but I quite don't understand what syntax am i needed to push here

[Venkatesh Ayothi Raman]

Hi Domantas, 

Thanks for using Syncfusion products. 

We went through your screenshot which you have shared with us and found that would you like to show the default filter in custom column menu which is customized by yourself. If so, we have achieved your requirement by defining the default filter items in custom context menu like as follows, 

[Grid] 

<ejs-grid [dataSource]='data' id="gridcomp" allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true' 

        [groupSettings]='groupOptions' [columnMenuItems]='columnMenuItems' allowFiltering='true' [filterSettings]='filterSettings'> 

        <e-columns> 

                  . .    . 

         </e-columns> 

    </ejs-grid> 

[ts file] 

export class AppComponent implements OnInit { 

. .   . 

    public columnMenuItems: ContextMenuItemModel = [{text: "Filter", id: "gridcomp_colmenu_Filter", iconCss: "e-icons e-icon-filter"}, {text:'Clear Sorting', id:'gridclearsorting'}]; 

    ngOnInit(): void { 

        this.data = data; 

        this.groupOptions = { showGroupedColumn: true }; 

        this.filterSettings = { type: 'CheckBox' }; 

    } 

} 

We have also prepared a sample for your convenience which can be referred from following link, 

Sample: https://plnkr.co/edit/Axg6RUR4WC0uc3o0jc8G?p=preview 

Output: 

 

If we misunderstood your requirement, then could you please provide more information about your requirement? 

Regards, 

Venkatesh Ayothiraman. 

[Domantas]

Hello,

I think you understood my question correctly, however i couldn't replicate your given code into my grid. I literally copy pasted things that i need from the plunker example, but the contextMenuItem is acting as pure icon and text, caret and other stuff does not appear. When i'm testing without property, default items appear and filter is working as expected. Not sure what i'm missing here, how does this works ? It catches filter by text property or something ? 

[Venkatesh Ayothi Raman]

Hi Doomantas, 

We have tried to reproduce the reported issue at our end but its unsuccessful. Could you please share the following details? 

1)      Share the Full Grid code example. 

2)      Are you import the corresponding modules(filter) in Grid? 

3)      Share the issue replication procedure. 

4)      Modified the given sample as issue reproducible. 

It would be helpful for us to find the problem and provide the better solution as earliest. 

Regards, 

Venkatesh Ayothiraman. 

[Domantas]

Hey,

I found the issue. The issue was that I totally miss watched the hardcoded id in html, cause I don't use hardcoded id's. And at the end I was able to reproduce this with dynamic id's.

Thank you for your support

[Venkatesh Ayothi Raman]

Hi Domantas, 

Thanks for the update. 

 

We are very happy to hear that your requirement is achieved. 

 

Regards, 

Venkatesh Ayothiraman.