Custom filter for columns with HTML

Suite and Optimus Suite 5
#1

I have some special columns with images and links in them.

I still want to header filter these columns.
So I started writing a custom filter as described here: docs.dhtmlx.com/doku.php?id=dhtmlxgrid:filtering

The problem with this approach is I am adding columns dynamically in the server side XML generation and therefore do not have a column ID at the client side JS. I need to apply the custom filtering in the XML. I did this fine for column sorting, how can I do this for filtering too?

Here is the untested custom filter I was wanting to use:

mygrid.getFilterElement(0)._filter = function(){
    var input = this.value; // gets the text of the filter input
    if (input=="") return "";
        return function(val){
	    return (val.toString().toLowerCase().indexOf(stripHTML(input).toLowerCase())==0); 
	}
}

The stripHTML is just a regex function.

#2

oops put the stripHTML on the wrong string value…

#3

I would rather make a custom filter and call it in the XML generation, but I went ahead and hacked some code to figure out the column index based on the BRITTLE header text name.

Since it might be useful to others:

grid.attachEvent("onXLE", function (grid_obj) {
	// custom method - remove_spinner(grid_obj);
	var header_title_text = 'some_text';
    var col_index = parseInt($("div#" + grid_obj.id + " div.hdrcell").index($("div#" + grid_obj.id + " div.hdrcell:contains('" + header_title_text + "')")));
	grid_obj.getFilterElement(col_index)._filter = function () {
	    var input = this.value; 
	    if (input=="") return "";
	    return function(val){
	        return (stripHTML(val).toString().toLowerCase().indexOf(input.toLowerCase())==0); 
	    }
	}
});

One issue with this custom filter is it appears to only check the first character of each column cell

Now for custom sorting of the columns with HTML in them I used the following custom sort method:

var html_cistr = function(a, b, order) {
    var n = stripHTML(a).toLowerCase();
    var m = stripHTML(b).toLowerCase();
    return (n > m ? 1 : -1) * (order == "asc" ? 1 : -1);
}

Note: Sorting in case specific by default, the above method ignores case.
If you want just a custom sort method that ignores case then use this:

function cistr(a, b, order) {
    return (a.toLowerCase() > b.toLowerCase() ? 1 : -1) * (order == "asc" ? 1 : -1);
}

I used a regex for the stripHTML function as it is faster then browser ‘text’ methods by a long shot, but not perfect either.

var stripHTML = function(html) {
    return html.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi, '');
}

I hope that helps others searching the forum.

I still would really like to know how to define a custom filter that is not dependent on a column index and can be set via XML. I thought about modifying or overriding the filter.js, but decided against it.