1. Home
  2. Forum
  3. React - EJ 2
  4. Show filter icon when using 3 dot menu

Show filter icon when using 3 dot menu

Hey,

im trying to show filter icon when using 3 dot column (out side of the 3 dot menu)

what the code in css that i can use to do it?

i want to show this icon  next to this 


1 Reply
PS Pavithra Subramaniyam Syncfusion Team March 2, 2022 12:17 PM UTC

Hi EyaL, 
 
Thanks for contacting Syncfusion support. 
 
By default, the with column menu enabled the filter icon will not be shown. However , We can customize the header and display both Filter and Column menu icon, when you click the Filter icon the filter popup will open and when you click the column menu icon the column menu pop will open. We suggest you use the below way to achieve your requirement. Please refer the below code example, sample and video demo for more information. 
 
 
export class FilterMenu extends SampleBase { 
    constructor() { 
        super(...arguments); 
        this.flag = false; 
        this.target = ''; 
this.columnMenuItems = [//Define the order of the items as you want to display 
            "AutoFitAll",  
            "AutoFit",  
            "SortAscending",  
            "SortDescending",  
            "Group",  
            "Ungroup",  
        ]; 
        this.filterType = [ 
            { text: 'Menu', value: 'Menu' }, 
            { text: 'Checkbox', value: 'CheckBox' }, 
            { text: 'Excel', value: 'Excel' }, 
        ]; 
        this.filterSettings = { type: 'Menu' }; 
        this.fields = { text: 'text', value: 'value' }; 
        this.format = { type: 'datetime', format: 'M/d/y hh:mm a' }; 
    } 
    load(args) { //load event of Grid 
        this.flag = true; 
    } 
    dataBound() { //dataBound event of Grid 
        if (this.flag) { 
            this.flag = false; 
            var headerCell = document.getElementsByClassName('e-headercell'); //get the headercell 
            setTimeout(function () { 
                for (var i = 0; i < headerCell.length; i++) { 
                    var div = document.createElement('div'); 
                    div.classList.value = "e-filtermenudiv e-icons e-icon-filter"; 
                    div.style.textAlign = "right"; 
                    headerCell[i].appendChild(div);  //append the filter icon div to the headercell 
                } 
            var customicon = document.getElementsByClassName('e-icon-filter'); 
            for(var i = 0; i < customicon.length; i++) { 
                customicon[i].addEventListener('click', function(e) { //bind the click event for custom filter icon 
                    var colIndex = +e.target.parentElement.getAttribute("aria-colindex"); 
                    var column = this.gridInstance.getColumnByIndex(colIndex); 
                    var r = this.gridInstance.getColumnHeaderByField(column.field).querySelector(".e-filtermenudiv"); 
                    this.target = r; //get the target 
                    this.gridInstance.filterModule.openMenuByField(column.field); //open the filterdialog 
                }.bind(this)); 
            } 
            }.bind(this)); 
             
        } 
 
    } 
    actionComplete(args) { //actionComplete event of Grid 
        if(args.requestType == 'filtering' && args.action == "clearFilter") { //set/remove the e-filtered css to the filtered columns 
           if(this.gridInstance.getColumnHeaderByField(args.currentFilterColumn.field).querySelector('.e-filtermenudiv').classList.contains('e-filtered')) { 
                this.gridInstance.getColumnHeaderByField(args.currentFilterColumn.field).querySelector('.e-filtermenudiv').classList.remove('e-filtered'); 
            } 
        } 
        if(args.requestType == 'filtering' && args.action == 'filter') { 
            if(this.gridInstance.getColumnHeaderByField(args.currentFilteringColumn).querySelector('.e-columnmenu').classList.contains('e-filtered')) { 
                this.gridInstance.getColumnHeaderByField(args.currentFilteringColumn).querySelector('.e-filtermenudiv').classList.add('e-filtered'); 
            this.gridInstance.getColumnHeaderByField(args.currentFilteringColumn).querySelector('.e-columnmenu').classList.remove('e-filtered'); 
            } 
        } 
        if(args.requestType == 'filterafteropen') { //set the filterpopup position 
            var gClient = this.gridInstance.element.getBoundingClientRect(); 
            var fClient = this.target.getBoundingClientRect(); 
            var filterPopup = args.filterModel.dlgDiv; 
            if (filterPopup) { 
                var leftPos = fClient.right - filterPopup.offsetWidth; 
                if (leftPos < 1) { 
                    filterPopup.style.left = ((leftPos + filterPopup.offsetWidth) - gClient.left).toString() + 'px'; 
                } else { 
                    filterPopup.style.left = (leftPos - gClient.left).toString() + 'px'; 
                } 
                filterPopup.style.top = (fClient.bottom).toString() + 'px'; 
            } 
        } 
    } 
    render() { 
        return (<div className='control-pane'> 
                <div className='control-section row'> 
                    <GridComponent dataSource={orderDataSource} actionComplete={this.actionComplete.bind(this)} showColumnMenu={true} columnMenuItems={this.columnMenuItems} width={1200} allowPaging={true} load={this.load.bind(this)} dataBound={this.dataBound.bind(this)} ref={grid => this.gridInstance = grid} pageSettings={{ pageSize: 10, pageCount: 5 }} allowFiltering={true} filterSettings={this.filterSettings}> 
                        .   .   . 
                        <Inject services={[Filter, ColumnMenu, Page, Sort]}/> 
                    </GridComponent> 
                </div> 
 
            </div>); 
    } 
} 
 
 
 
 
 
 
Regards, 
Pavithra S 


Loader.
Up arrow icon