This is a migrated thread and some comments may be shown as answers.

How to enable case insensitive sorting on kendo ui grid

15 Answers 460 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Surendra
Top achievements
Rank 1
Surendra asked on 09 May 2012, 11:08 AM
Hi there,

I need to implement the case insensitive sorting on kendo ui grid, by default it sort the columns in case sensitive manner as shown in attached document.

Thanks,
Surendra Singh

15 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 09 May 2012, 11:31 AM
Hi,

The Kendo Grid does not support case insensitive sorting. You may consider opening a new user voice item to request this feature.

All the best,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vince
Top achievements
Rank 1
answered on 17 Sep 2012, 08:52 PM
It is BEYOND silly that this has not been implemented. This is unacceptable. Z comes before a? Hmmm... I've literally NEVER heard of case sensitive sorting.
0
Wladimir
Top achievements
Rank 1
answered on 25 Sep 2012, 02:49 PM
you can sort on DataSource. So you can add a "hidden" field to DataSource and make it to lower case. Sort this hidden field. Here is  a small example in javascript (jquery)
userNamen = [];
 $.each(obj.users, function(i, el){
        userNamen.push({
                            no: el.no,
                            name: el.ID,
                            email: el.email,
                            fax: el.faxDirect,
                            phone: el.phoneDirect,
                            toLowerCase: el.ID.toLowerCase()
           });
 })
$("##callTo").data("kendoDropDownList").setDataSource(userNamen);
$("##callTo").data("kendoDropDownList").dataSource.sort({ field: "toLowerCase", dir: "asc" });
0
Stephan
Top achievements
Rank 1
answered on 11 Oct 2012, 08:11 AM
Hi,
The solution given works but us kind of a hack and adds more data to transfer.
I also believe that an option should be added.
We are talking about basic functionality here and I cannot think of anyone needing case sensitive sorting.
Thanks,
Stephan
0
steven
Top achievements
Rank 1
answered on 18 Oct 2012, 04:49 PM
How would you do this if your were creating a grid from a regular table?

I was moving away from ext-js because I liked this interface better. but this one thing is really surprising.  
0
Daniel
Top achievements
Rank 1
answered on 08 Nov 2012, 09:46 PM
I created a walk trough on how to set up case insensitive sorting on kendo ui grid. 

You can see it here: http://sympletech.com/how-to-enable-case-insensitive-sorting-on-kendo-ui-grid/
0
maharajan
Top achievements
Rank 1
answered on 20 Nov 2012, 07:21 AM
Hi all
 How do i enable or do a similar functionality on Kendo ui Grid ?
 This is urgent.
Thanks in advance.
Regards
maharajan
0
Johannes
Top achievements
Rank 1
answered on 26 Nov 2012, 12:30 PM
What do you think about this solution?
Adding a hidden column or monitor DOM changes feels very, very wrong!

My solution replaces the original comparer from kendo.data.js with a slightly modified version. Add this code to a script file that loads after Kendo UI!

/*
  Changes all dataSources to case insensitive sorting (client side sorting).
  This snipped enable case insensitive sorting on Kendo UI grid, too.
 
  The original case sensitive comparer is a private and can't be accessed without modifying the original source code.
  tested with Kendo UI version 2012.2.710 (Q2 2012 / July 2012).
*/
 
var CaseInsensitiveComparer = {
 
    getterCache: {},
 
    getter: function(expression) {
        return this.getterCache[expression] = this.getterCache[expression] || new Function("d", "return " + kendo.expr(expression));
    },
 
    selector: function (field) {
        return jQuery.isFunction(field) ? field : this.getter(field);
    },
 
    asc: function (field) {
        var selector = this.selector(field);
        return function (a, b) {
 
            a = selector(a).toLowerCase(); // the magical part
            b = selector(b).toLowerCase();
 
            return a > b ? 1 : (a < b ? -1 : 0);
        };
    },
 
    desc: function (field) {
        var selector = this.selector(field);
        return function (a, b) {
 
            a = selector(a).toLowerCase(); // the magical part
            b = selector(b).toLowerCase();
 
            return a < b ? 1 : (a > b ? -1 : 0);
        };
    },
     
    create: function(descriptor) {
        return this[descriptor.dir.toLowerCase()](descriptor.field);
    },
 
 
    combine: function (comparers) {
        return function (a, b) {
            var result = comparers[0](a, b),
                idx,
                length;
 
            for (idx = 1, length = comparers.length; idx < length; idx++) {
                result = result || comparers[idx](a, b);
            }
 
            return result;
        };
    }
};
 
kendo.data.Query.prototype.normalizeSort = function (field, dir) {
    if (field) {
        var descriptor = typeof field === "string" ? { field: field, dir: dir } : field,
            descriptors = jQuery.isArray(descriptor) ? descriptor : (descriptor !== undefined ? [descriptor] : []);
 
        return jQuery.grep(descriptors, function (d) { return !!d.dir; });
    }
};
 
kendo.data.Query.prototype.sort = function(field, dir, comparer) {
     
    var idx,
        length,
        descriptors = this.normalizeSort(field, dir),
        comparers = [];
 
    comparer = comparer || CaseInsensitiveComparer;
 
    if (descriptors.length) {
        for (idx = 0, length = descriptors.length; idx < length; idx++) {
            comparers.push(comparer.create(descriptors[idx]));
        }
 
        return this.orderBy({ compare: comparer.combine(comparers) });
    }
 
    return this;
};
 
kendo.data.Query.prototype.orderBy = function (selector) {
 
    var result = this.data.slice(0),
        comparer = jQuery.isFunction(selector) || !selector ? CaseInsensitiveComparer.asc(selector) : selector.compare;
 
    return new kendo.data.Query(result.sort(comparer));
};
 
kendo.data.Query.prototype.orderByDescending = function (selector) {
 
    return new kendo.data.Query(this.data.slice(0).sort(CaseInsensitiveComparer.desc(selector)));
};
0
Daniel
Top achievements
Rank 1
answered on 26 Nov 2012, 04:54 PM
@Johannes - I like your fix better.

Only bad side is you have modified the kendoUI source and it makes upgrading Kendo a little harder.  Of course my fix will probably break on the next upgrade too.

You should try and submit this to Telerik for inclusion in the next release.
0
Johannes
Top achievements
Rank 1
answered on 26 Nov 2012, 06:06 PM
Chances are high that they won't change the Comparer and the replaced methods in the next release.

I'm pretty sure the Kendo UI team knows that their Comparer could be improved. I'm curious which pattern they will use to expose it. Maybe they will find a completely different solution to allow customization of the grid sorting function.
0
Johannes
Top achievements
Rank 1
answered on 27 Nov 2012, 09:58 AM
Update: I modified the original source code, it crashed in several cases. Now it is 2x longer...:-/
0
Todd Anglin
Top achievements
Rank 2
answered on 03 Dec 2012, 04:38 PM
For the benefit of those interested in Johannes solution, here is an updated version he created (hosted on Gist):

https://gist.github.com/4161255

Give it a try if you have trouble with code previously shared in this thread. Thanks again to Johannes for helping the Kendo UI community!

-Todd
0
Ety
Top achievements
Rank 1
answered on 13 Feb 2013, 02:43 PM
Hello kendo,

Is this issue planned to be implemented soon?

Thanks,
Ety
0
Fernando
Top achievements
Rank 1
answered on 29 Apr 2013, 12:50 PM
Just tested Johannes's code (https://gist.github.com/4161255) with last stable version (2013.1.319) and it works. Nevertheless, that should be native on Kendo UI, or at least a configurable option.
0
Atanas Korchev
Telerik team
answered on 29 Apr 2013, 12:56 PM
Hi guys,

 I am glad to inform you that we implemented case insensitive sorting by default (for strings). This would be live with our next major release which is due in July!

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Surendra
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Vince
Top achievements
Rank 1
Wladimir
Top achievements
Rank 1
Stephan
Top achievements
Rank 1
steven
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
maharajan
Top achievements
Rank 1
Johannes
Top achievements
Rank 1
Todd Anglin
Top achievements
Rank 2
Ety
Top achievements
Rank 1
Fernando
Top achievements
Rank 1
Share this question
or