Accent insensitive searching in RadComboBox

I'm relatively new to using ASP webforms and Telerik, but I'm looking for a way that allows me to type special characters (é, ù, à, ...) in a RadComboBox.

Lets say I have a name in my ObjectDataSource called "René Somebody". I need to be able to find him by searching for "Rene" and "René", but so far no luck.

In the application they managed to do this on a RadGrid with filters, but this same solution doesn't work for the RadComboBox as far as I know.

The solution they used in the RadGrid: http://www.telerik.com/forums/accent-insensitive-filtering-filtering-on-a-different-column#YS1QT8P1U0-cRPFNfjvDzA

1 Answers

Answers 1

I have no access to the backend components but the demo you linked contains frontend code and it looks like you can hack in there. It looks like this control may be both client-server and client-side only. For client-side only hacks looks kind of complicated and invloves non-public API (_onInputChange) but for client-server case (which is probably your case) the doc on client side of RadComboBox Object mentions requestItems method so hacking it is probably reasonably future safe:

var hackRadComboBoxFilter = function (combobox, filterProcessingFunction) {     var oldRequestItems = combobox.requestItems;      combobox.requestItems = function() {         var args = Array.prototype.slice.call(arguments);         // requestItems has several arguments but the text seems to be the         // first one, so let's modify it and call the original method         var origFilter = args[0];         args[0] = filterProcessingFunction(origFilter);         oldRequestItems.apply(this, args);     } }; 

Unfortunately I don't know a built-in way to deal with accents in JS but you can hack something simple here as well:

var accents = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž'; var mappedAccents = "AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz"; var removeAccents = function (origStr) {     var components = [];     var len = origStr.length;     var afterLastAccent = 0;     for (var i = 0; i < len; i++) {         var mapPos = accents.indexOf(origStr[i]);         if (mapPos != -1) {             components.push(origStr.substr(afterLastAccent, i - afterLastAccent) + mappedAccents[mapPos]);             afterLastAccent = i + 1;         }     }     if (afterLastAccent < len)         components.push(origStr.substr(afterLastAccent, len - afterLastAccent));     return components.join(''); }; 

So now you can combine it in something like this:

// In real app you probably want something like this // var targetComboBox = $find("<%= RadComboBox1.ClientID %>"); // but for test let's just hack first combobox on the page var targetComboBox = Telerik.Web.UI.RadComboBox.ComboBoxes[0]; hackRadComboBoxFilter(targetComboBox, removeAccents); 

or if you want to modify all the comboboxes on the page, you can change prototype using the same trick:

hackRadComboBoxFilter(Telerik.Web.UI.RadComboBox.prototype, removeAccents) 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati