Ticket T297948

Visible to All Users

DataGrid - Set search to case insensitive and accent insensitive

Jean-Sebastien Parent

created 10 years ago

Hi,
I’m currently using the panel to filter and highlight some data.
However, I found out that it only searches the exact same value as I entered in the textbox, accent sensitive and case sensitive.

For example, if I enter “Quebec”, “Québec” and “quebec” won’t show in the matching rows.
Is there any way for the search to be case and accent insensitive? Or is there an existing workaround?

A property to control both of these settings would be nice in the future too :)
Thanks!

Comments (2)

Lanette (DevExpress Support) 10 years ago

Hello,

I've examined our Filtering demo, but haven't managed to reproduce this behavior. See the attached video. It seems that other factors affect this issue. Please send us a sample runnable project which demonstrates the issue. It will help us determine its cause.

T297948.swf

Jean-Sebastien Parent 10 years ago

If you have some data with accents in their name, for example if you change "Éric" instead of "Eric" in your database, searching for "Eric" won't return this row unless you type "Éric". The demo you mentionned doesn't have any accent in its data, AFAIK.
Thanks!

Answers approved by DevExpress Support

Lanette (DevExpress Support)

created 10 years ago (modified 2 years ago)

Hello,

Updated:

The DataSource component can now sort and filter data by a locale with special characters (for example, symbols with diacritics). Specify locale and collator options in the langParams object to implement this functionality: What's New Data Layer.

You can download these packages for testing:

JSON
devextreme@23.1.2-beta
devextreme-angular@23.1.2-beta
devextreme-react@23.1.2-beta
devextreme-vue@23.1.2-beta

Prior v23.1

Currently, due to the widget design, these symbols are treated as different characters. To allow searching by both of them if you're using local storage, you can use calculateFilterExpression and define a custom filtering algorithm for this column. If you're using remote data, it's necessary to adjust settings on the server side to achieve this behavior.

Show previous comments (4)

Jean-Sebastien Parent 10 years ago

Ok thanks, that's actually the way we "quickfixed" it. Attached is a sample of our code, if anyone needs this functionality with latin characters.
I think it would be a good idea to implement it in the future in the dxDataGrid, that would be easier for us at the end.
Regards,
J.S. Parent
---
var searchValue = "";
//Replace accentuated characters with their non-accentuated counterparts
var Latinise = {}; Latinise.latin_map = { "Á": "A", "A": "A", "?": "A", "?": "A", "?": "A", "?": "A", "?": "A", "A": "A", "Â": "A", "?": "A", "?": "A", "?": "A", "?": "A", "?": "A", "Ä": "A", "A": "A", "?": "A", "?": "A", "?": "A", "?": "A", "À": "A", "?": "A", "?": "A", "A": "A", "A": "A", "Å": "A", "?": "A", "?": "A", "?": "A", "Ã": "A", "?": "AA", "Æ": "AE", "?": "AE", "?": "AE", "?": "AO", "?": "AU", "?": "AV", "?": "AV", "?": "AY", "?": "B", "?": "B", "?": "B", "?": "B", "?": "B", "?": "B", "C": "C", "C": "C", "Ç": "C", "?": "C", "C": "C", "C": "C", "?": "C", "?": "C", "D": "D", "?": "D", "?": "D", "?": "D", "?": "D", "?": "D", "?": "D", "?": "D", "?": "D", "Ð": "D", "?": "D", "?": "DZ", "?": "DZ", "É": "E", "E": "E", "E": "E", "?": "E", "?": "E", "Ê": "E", "?": "E", "?": "E", "?": "E", "?": "E", "?": "E", "?": "E", "Ë": "E", "E": "E", "?": "E", "?": "E", "È": "E", "?": "E", "?": "E", "E": "E", "?": "E", "?": "E", "E": "E", "?": "E", "?": "E", "?": "E", "?": "ET", "?": "F", "ƒ": "F", "?": "G", "G": "G", "G": "G", "G": "G", "G": "G", "G": "G", "?": "G", "?": "G", "G": "G", "?": "H", "?": "H", "?": "H", "H": "H", "?": "H", "?": "H", "?": "H", "?": "H", "H": "H", "Í": "I", "I": "I", "I": "I", "Î": "I", "Ï": "I", "?": "I", "I": "I", "?": "I", "?": "I", "Ì": "I", "?": "I", "?": "I", "I": "I", "I": "I", "I": "I", "I": "I", "?": "I", "?": "D", "?": "F", "?": "G", "?": "R", "?": "S", "?": "T", "?": "IS", "J": "J", "?": "J", "?": "K", "K": "K", "K": "K", "?": "K", "?": "K", "?": "K", "?": "K", "?": "K", "?": "K", "?": "K", "L": "L", "?": "L", "L": "L", "L": "L", "?": "L", "?": "L", "?": "L", "?": "L", "?": "L", "?": "L", "?": "L", "?": "L", "?": "L", "L": "L", "?": "LJ", "?": "M", "?": "M", "?": "M", "?": "M", "N": "N", "N": "N", "N": "N", "?": "N", "?": "N", "?": "N", "?": "N", "?": "N", "?": "N", "?": "N", "?": "N", "Ñ": "N", "?": "NJ", "Ó": "O", "O": "O", "O": "O", "Ô": "O", "?": "O", "?": "O", "?": "O", "?": "O", "?": "O", "Ö": "O", "?": "O", "?": "O", "?": "O", "?": "O", "O": "O", "?": "O", "Ò": "O", "?": "O", "O": "O", "?": "O", "?": "O", "?": "O", "?": "O", "?": "O", "?": "O", "?": "O", "?": "O", "O": "O", "?": "O", "?": "O", "O": "O", "O": "O", "O": "O", "Ø": "O", "?": "O", "Õ": "O", "?": "O", "?": "O", "?": "O", "?": "OI", "?": "OO", "?": "E", "?": "O", "?": "OU", "?": "P", "?": "P", "?": "P", "?": "P", "?": "P", "?": "P", "?": "P", "?": "Q", "?": "Q", "R": "R", "R": "R", "R": "R", "?": "R", "?": "R", "?": "R", "?": "R", "?": "R", "?": "R", "?": "R", "?": "R", "?": "C", "?": "E", "S": "S", "?": "S", "Š": "S", "?": "S", "S": "S", "S": "S", "?": "S", "?": "S", "?": "S", "?": "S", "T": "T", "T": "T", "?": "T", "?": "T", "?": "T", "?": "T", "?": "T", "?": "T", "?": "T", "T": "T", "T": "T", "?": "A", "?": "L", "?": "M", "?": "V", "?": "TZ", "Ú": "U", "U": "U", "U": "U", "Û": "U", "?": "U", "Ü": "U", "U": "U", "U": "U", "U": "U", "U": "U", "?": "U", "?": "U", "U": "U", "?": "U", "Ù": "U", "?": "U", "U": "U", "?": "U", "?": "U", "?": "U", "?": "U", "?": "U", "?": "U", "U": "U", "?": "U", "U": "U", "U": "U", "U": "U", "?": "U", "?": "U", "?": "V", "?": "V", "?": "V", "?": "V", "?": "VY", "?": "W", "W": "W", "?": "W", "?": "W", "?": "W", "?": "W", "?": "W", "?": "X", "?": "X", "Ý": "Y", "Y": "Y", "Ÿ": "Y", "?": "Y", "?": "Y", "?": "Y", "?": "Y", "?": "Y", "?": "Y", "?": "Y", "?": "Y", "?": "Y", "Z": "Z", "Ž": "Z", "?": "Z", "?": "Z", "Z": "Z", "?": "Z", "?": "Z", "?": "Z", "?": "Z", "?": "IJ", "Œ": "OE", "?": "A", "?": "AE", "?": "B", "?": "B", "?": "C", "?": "D", "?": "E", "?": "F", "?": "G", "?": "G", "?": "H", "?": "I", "?": "R", "?": "J", "?": "K", "?": "L", "?": "L", "?": "M", "?": "N", "?": "O", "?": "OE", "?": "O", "?": "OU", "?": "P", "?": "R", "?": "N", "?": "R", "?": "S", "?": "T", "?": "E", "?": "R", "?": "U", "?": "V", "?": "W", "?": "Y", "?": "Z", "á": "a", "a": "a", "?": "a", "?": "a", "?": "a", "?": "a", "?": "a", "a": "a", "â": "a", "?": "a", "?": "a", "?": "a", "?": "a", "?": "a", "ä": "a", "a": "a", "?": "a", "?": "a", "?": "a", "?": "a", "à": "a", "?": "a", "?": "a", "a": "a", "a": "a", "?": "a", "?": "a", "å": "a", "?": "a", "?": "a", "?": "a", "ã": "a", "?": "aa", "æ": "ae", "?": "ae", "?": "ae", "?": "ao", "?": "au", "?": "av", "?": "av", "?": "ay", "?": "b", "?": "b", "?": "b", "?": "b", "?": "b", "?": "b", "b": "b", "?": "b", "?": "o", "c": "c", "c": "c", "ç": "c", "?": "c", "c": "c", "?": "c", "c": "c", "?": "c", "?": "c", "d": "d", "?": "d", "?": "d", "?": "d", "?": "d", "?": "d", "?": "d", "?": "d", "?": "d", "?": "d", "?": "d", "d": "d", "?": "d", "?": "d", "i": "i", "?": "j", "?": "j", "?": "j", "?": "dz", "?": "dz", "é": "e", "e": "e", "e": "e", "?": "e", "?": "e", "ê": "e", "?": "e", "?": "e", "?": "e", "?": "e", "?": "e", "?": "e", "ë": "e", "e": "e", "?": "e", "?": "e", "è": "e", "?": "e", "?": "e", "e": "e", "?": "e", "?": "e", "?": "e", "e": "e", "?": "e", "?": "e", "?": "e", "?": "e", "?": "et", "?": "f", "ƒ": "f", "?": "f", "?": "f", "?": "g", "g": "g", "g": "g", "g": "g", "g": "g", "g": "g", "?": "g", "?": "g", "?": "g", "g": "g", "?": "h", "?": "h", "?": "h", "h": "h", "?": "h", "?": "h", "?": "h", "?": "h", "?": "h", "?": "h", "h": "h", "?": "hv", "í": "i", "i": "i", "i": "i", "î": "i", "ï": "i", "?": "i", "?": "i", "?": "i", "ì": "i", "?": "i", "?": "i", "i": "i", "i": "i", "?": "i", "?": "i", "i": "i", "?": "i", "?": "d", "?": "f", "?": "g", "?": "r", "?": "s", "?": "t", "?": "is", "j": "j", "j": "j", "?": "j", "?": "j", "?": "k", "k": "k", "k": "k", "?": "k", "?": "k", "?": "k", "?": "k", "?": "k", "?": "k", "?": "k", "?": "k", "l": "l", "l": "l", "?": "l", "l": "l", "l": "l", "?": "l", "?": "l", "?": "l", "?": "l", "?": "l", "?": "l", "?": "l", "?": "l", "?": "l", "?": "l", "?": "l", "l": "l", "?": "lj", "?": "s", "?": "s", "?": "s", "?": "s", "?": "m", "?": "m", "?": "m", "?": "m", "?": "m", "?": "m", "n": "n", "n": "n", "n": "n", "?": "n", "?": "n", "?": "n", "?": "n", "?": "n", "?": "n", "?": "n", "?": "n", "?": "n", "?": "n", "?": "n", "ñ": "n", "?": "nj", "ó": "o", "o": "o", "o": "o", "ô": "o", "?": "o", "?": "o", "?": "o", "?": "o", "?": "o", "ö": "o", "?": "o", "?": "o", "?": "o", "?": "o", "o": "o", "?": "o", "ò": "o", "?": "o", "o": "o", "?": "o", "?": "o", "?": "o", "?": "o", "?": "o", "?": "o", "?": "o", "?": "o", "?": "o", "o": "o", "?": "o", "?": "o", "o": "o", "o": "o", "ø": "o", "?": "o", "õ": "o", "?": "o", "?": "o", "?": "o", "?": "oi", "?": "oo", "?": "e", "?": "e", "?": "o", "?": "o", "?": "ou", "?": "p", "?": "p", "?": "p", "?": "p", "?": "p", "?": "p", "?": "p", "?": "p", "?": "p", "?": "q", "?": "q", "?": "q", "?": "q", "r": "r", "r": "r", "r": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "r", "?": "c", "?": "c", "?": "e", "?": "r", "s": "s", "?": "s", "š": "s", "?": "s", "s": "s", "s": "s", "?": "s", "?": "s", "?": "s", "?": "s", "?": "s", "?": "s", "?": "s", "?": "s", "g": "g", "?": "o", "?": "o", "?": "u", "t": "t", "t": "t", "?": "t", "?": "t", "?": "t", "?": "t", "?": "t", "?": "t", "?": "t", "?": "t", "?": "t", "?": "t", "t": "t", "?": "t", "t": "t", "?": "th", "?": "a", "?": "ae", "?": "e", "?": "g", "?": "h", "?": "h", "?": "h", "?": "i", "?": "k", "?": "l", "?": "m", "?": "m", "?": "oe", "?": "r", "?": "r", "?": "r", "?": "r", "?": "t", "?": "v", "?": "w", "?": "y", "?": "tz", "ú": "u", "u": "u", "u": "u", "û": "u", "?": "u", "ü": "u", "u": "u", "u": "u", "u": "u", "u": "u", "?": "u", "?": "u", "u": "u", "?": "u", "ù": "u", "?": "u", "u": "u", "?": "u", "?": "u", "?": "u", "?": "u", "?": "u", "?": "u", "u": "u", "?": "u", "u": "u", "?": "u", "u": "u", "u": "u", "?": "u", "?": "u", "?": "ue", "?": "um", "?": "v", "?": "v", "?": "v", "?": "v", "?": "v", "?": "v", "?": "v", "?": "vy", "?": "w", "w": "w", "?": "w", "?": "w", "?": "w", "?": "w", "?": "w", "?": "w", "?": "x", "?": "x", "?": "x", "ý": "y", "y": "y", "ÿ": "y", "?": "y", "?": "y", "?": "y", "?": "y", "?": "y", "?": "y", "?": "y", "?": "y", "?": "y", "?": "y", "z": "z", "ž": "z", "?": "z", "?": "z", "?": "z", "z": "z", "?": "z", "?": "z", "?": "z", "?": "z", "?": "z", "?": "z", "z": "z", "?": "z", "?": "ff", "?": "ffi", "?": "ffl", "?": "fi", "?": "fl", "?": "ij", "œ": "oe", "?": "st", "?": "a", "?": "e", "?": "i", "?": "j", "?": "o", "?": "r", "?": "u", "?": "v", "?": "x" };
String.prototype.latinise = function () { return this.replace(/[^A-Za-z0-9\[] ]/g, function (a) { return Latinise.latin_map[a] || a }).trim() };
String.prototype.latinize = String.prototype.latinise;
String.prototype.isLatin = function () { return this == this.latinise() }
String.prototype.insert = function (index, string) {
  if (index > 0)
     return this.substring(0, index) + string + this.substring(index, this.length);
  else
     return string + this;
};
// CalculateFilterExpression of each column, to take into account latin character
var OnFilterExpression = function (value, operation) {
  var column = this;
  if (value) {
     value = value.latinize().toLowerCase();
     if (!operation) {
        return [function (data) { return CompareColumnValue(value, column, data); }, '=', true];
     }
  }
}
function CompareColumnValue(value, column, data) {
  var columnValue = column.calculateCellValue(data)
  if (columnValue != null) {
     return columnValue.latinize().toLowerCase().indexOf(value) != -1;
  }
  return false;
}
// OnCellPrepared of the dxDataGrid, to highlight search results
var OnCellPrepared = function (e) {
  if (e.rowType == 'data' && e.column.dataField != 'FieldNameWithLatinCharacter') {
     if (searchValue == "")
        searchValue = e.component.option('searchPanel.text').latinize().toLowerCase();
     if (searchValue != "")
        e.cellElement[0].innerHTML = GetHighlightedHtml(e.cellElement[0].innerHTML);
     else
        e.cellElement[0].innerHTML = e.value;
  }
}
function GetHighlightedHtml(text) {
  var result = "" + text;
  if (text != null && text != "" && searchValue != "") {
     var spanStart = '<span class="dx-datagrid-search-text">';
     var flatText = text.latinize().toLowerCase();
     var spanEnd = '</span>';
     var totalLength = spanStart.length + spanEnd.length;
     var regEx = new RegExp(searchValue, "g");
     var indexes = [];
     while ((match = regEx.exec(flatText)) != null) {
        indexes.push(match.index);
     }
     for (i = 0; i < indexes.length; i++) {
           result = result.insert(indexes[i] + (i * totalLength), spanStart).insert(indexes[i] + (i * totalLength) + spanStart.length + searchValue.length, spanEnd);
     }
  }
  return result;
}

search.js

Lanette (DevExpress Support) 9 years ago

Hello,

Thank you for sharing your code. The team will surely consider researching whether it is possible to include this feature in future versions of our components.

Guillermo Fernández Doval 6 years ago

Hi! Is there an update for this issue? If not yet, can u help me to understand how to integrate this workaround?

Many thanks

Jean-Sebastien Parent 6 years ago

AFAIK, latest version has resolved case sensitivity but accent sensitivity is still a problem. We still have to override various events to chieve this.

Maybe DevExpress team can help or provide further information about this ? I'm interested as well to know where you stand on this matter, as we need those filters in our day-to-day operations.

Thanks!

Alessandro (DevExpress Support) 6 years ago

Hi,

We are working on your problem and need some additional time to research it in greater detail. We will let you know of our progress once we have any results. I hope you will excuse any delay that may arise.

Artem (DevExpress Support) 6 years ago

Hi all,

I just double-checked this case and confirm that the search is case-insensitive by default. At the same time, we don't have a built-in solution for accent insensitive search at the Data Layer API level. So, the suggested approach is valid.
@Customer56711
We also have an open ticket (Is it possible to use a case-insensitive filter in a DevExtreme DataGrid) on your behalf and we'll reply regarding the same case in the context of DevExtreme.AspNet.Data. Please bear with us.

Artem (DevExpress Support) 2 years ago

Hello,

You can download these packages for testing:

JSON
devextreme@23.1.2-beta
devextreme-angular@23.1.2-beta
devextreme-react@23.1.2-beta
devextreme-vue@23.1.2-beta

Feel free to share your results after testing. We'll be happy to follow up.

Created: October 7, 2015 5:17 PM

Modified: May 30, 2023 12:45 PM

Platform: HTML JS

Product: DevExtreme Data Grid

Build: 15.1.7

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

DataGrid - Set search to case insensitive and accent insensitive

Answers approved by DevExpress Support

Recently viewed tickets