AnthonyDa
AnthonyDa

Reputation: 531

Extjs - Add icons to column filter values

I have the following custom grid column :

Ext.define('OrderStatusColumn', {
    extend: 'Ext.grid.column.Column',
    alias: 'widget.OrderStatusColumn',

    text: 'Status',
        
    filter: 'list',
    
    renderer: function(value, metaData) {
        metaData.style = "text-align: left;";                
        var columnInstance = metaData.column;
        var processValue = columnInstance.resolveLookupValue(columnInstance, value, metaData.record);
        var tooltipText = Ext.util.Format.htmlEncode(processValue);
        metaData.tdAttr = 'data-qtip="' + tooltipText + '"';
        var iconHtml = '';
        switch (value) {
            case 'Draft':
                iconHtml = '<i class="fa-regular fa-sticky-note x-font-awesome-family-regular color-main-base" style="font-size: 18px;margin-right:5px;"></i>'; 
                break;                   
            default:
                iconHtml = '<i class="fa-regular fa-question-circle x-font-awesome-family-regular color-main-base" style="font-size: 18px;margin-right:5px;"></i>';
                break;
        }
        return iconHtml + '<span class="span-overflow-hide" style="display: inline;">' + processValue + '</span>';
    }

});

It displays an icon next to the string value. Is it possible to add the same icon in the filter values?

The grid is using the plugin 'gridfilters'

Upvotes: 0

Views: 40

Answers (1)

Dinkheller
Dinkheller

Reputation: 5054

You can archive this, but you have to put the code in a different place.

Define your Model like this:

   fields: [
        {
            name   : 'OutputStatus',
            depends: [ 'Status' ],
            convert: function(v, record) {
                var iconHtml = '';

                switch (value) {
                    case 'Draft':
                        iconHtml = '<i class="fa-regular fa-sticky-note x-font-awesome-family-regular color-main-base" style="font-size: 18px;margin-right:5px;"></i>'; 
                        break;                   
                   default:
                        iconHtml = '<i class="fa-regular fa-question-circle x-font-awesome-family-regular color-main-base" style="font-size: 18px;margin-right:5px;"></i>';
                        break;
               }

               return iconHtml + '<span class="span-overflow-hide" style="display: inline;">' + processValue + '</span>';
            }
        }
   ]

In your grid-colum you use the dataIndex: 'OutputStatus'

Now you have the same icon for the column and for the search list.

Be careful, you can use this for the list, but not for a String search.

If you have more questions, please setup a fiddle.

Upvotes: 1

Related Questions