View Full Version : filter list with icons

21 May 2014, 1:19 PM
I've created a FiltersFeature on a grid and 1 column has a list filter. All is working fine but I want to add an icon to each value in the list. For example, if the list contains the name of countries, I would like the countries flag before the name. I have searched within the js source files and documentation but can't find how this could be achieved. Any help or examples would be appreciated. Thanks in advance.

24 May 2014, 8:06 AM
Here is a good article on adding colors / images to grids:

If you want the icon to perform an action, have a look at actionColumn.

26 May 2014, 11:53 PM
Thanks for your reply. I am trying to add icons to the drop down list menu filter, not within the grid. I am a step closer now. I have modified the Json data for the labelField to include a span tag as below :-
<span class='gb-flag'>United Kingdom</span>. I now get the flag icon and country name but the country name is on top of the flag icon, I need them to be next to each other. My css class needs to be changed. Icons are 16px by 16px.

.gb-flag { background-image: url('../icons/gb-flag.png') !important;
background-repeat: no-repeat;

Sorted now.
Create the Json data file for the list as below

"data":[{"flag_id": "gb-flag","flag_text": "<span class=gb-flag></span>United Kingdom"}]

Create the css file as below

.gb-flag {
content: url('../icons/gb-flag.png') !important;

Create the filter as below

filter: {
type: 'list',
store: 'flags',
idField: 'flag_id',
labelField: 'flag_text'