Reputation: 531
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
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