Accent Insensitive Search in RadComboBox

Question

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

Suppose I have a name in my ObjectDataSource called "René Somebody". I need to find him looking for "Rene" and "Rene", but so far no luck.

In the application, they were able to do this on RadGrid with filters, but this solution does not work for RadComboBox , as far as I know.

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

Answer 1

I don't have access to the backend components, but the demo associated with it contains the interface code, and it looks like you can hack there. It seems that this control can be both client-server and client. For the client side, only hacks look quite complicated and _onInputChange non-public API ( _onInputChange ), but for the client-server case (which is probably your case), the doc on the client side of the RadComboBox object mentions the requestItems method, so hacking it is probably quite safe in the future :

 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 modify it and call the original method var origFilter = args[0]; args[0] = filterProcessingFunction(origFilter); oldRequestItems.apply(this, args); } }; 

Unfortunately, I don’t know the built-in way to handle accents in JS, but you can also crack something simple:

 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 into something like this:

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

or if you want to change all the drop-down lists on the page, you can change the prototype using the same trick:

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