How to change filter choices that appear on the drop down menu next to a list column?

Question

I'm working with SharePoint 2010. I've created a calculated column B which displays bubble images of 2 colors based on the value of column A. Now, the issue is that on the list view, if an user clicks on the menu option next to column B, he can see 2 filter choices which are image links inside the div tag. Can these filter choices be changed to column A values e.g., checked, unchecked (Column A is a yes/no checkbox field)? This will make the filter choices more meaningful. Thanks.

Note: Don't have access to SharePoint Designer.

Answer 1

No, if you put HTML inside a Calculated Column (and set the datatype to anything but single-line of text to output the HTML) the bare HTML code itself will be displayed in the filter choices.

Only in the View is the HTML code not escaped;
it will appear as bare HTML on Forms, in Alert emails and more places.

A way too complex workaround is to add JavaScript in a Calculated Column (as last column in the View) it doesn't display anything but (after the View is displayed) traverses back all the current row cells replacing any values with your Images. That way the filter settings will not have been created with bare HTML code. You could achieve the same with a longer (and more complex row logic) script that processes the whole View.

But that is serious scripting, I have done this for years and it will still take me half a day on a new SP 2010 project.

In SP2013 all this fiddling with HTML code in weird places is no longer required because CSR (Client Side Rendering) will take care of properly displaying your HTML code and the Values in the column filters.

Update #1

I answered another question and you might be able to use this code as well.

var fieldname ='DueDate';
var label = document.querySelector("a[id$='" + fieldname + "']");
if (label) label.parentNode.innerHTML='ColumnName';

In a CEWP below the View