How to enable case insensitive sorting on kendo ui grid

Thread is closed for posting
16 posts, 0 answers
  1. Surendra
    Surendra avatar
    1 posts
    Member since:
    Jan 2012

    Posted 09 May 2012 Link to this post

    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

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8231 posts
    Member since:
    Sep 2012

    Posted 09 May 2012 Link to this post

    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!

  3. Vince
    Vince avatar
    1 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    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.

  4. Wladimir
    Wladimir avatar
    1 posts
    Member since:
    Jul 2012

    Posted 25 Sep 2012 Link to this post

    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" });

  5. Stephan
    Stephan avatar
    17 posts
    Member since:
    Jun 2008

    Posted 11 Oct 2012 Link to this post

    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

  6. steven
    steven avatar
    7 posts
    Member since:
    Oct 2012

    Posted 18 Oct 2012 Link to this post

    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.  

  7. Daniel
    Daniel avatar
    3 posts
    Member since:
    Jul 2012

    Posted 08 Nov 2012 Link to this post

    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/

  8. maharajan
    maharajan avatar
    3 posts
    Member since:
    Jun 2011

    Posted 20 Nov 2012 Link to this post

    Hi all
     How do i enable or do a similar functionality on Kendo ui Grid ?
     This is urgent.
    Thanks in advance.
    Regards
    maharajan

  9. Johannes
    Johannes avatar
    3 posts
    Member since:
    Nov 2012

    Posted 26 Nov 2012 Link to this post

    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)));
    };

  10. Daniel
    Daniel avatar
    3 posts
    Member since:
    Jul 2012

    Posted 26 Nov 2012 Link to this post

    @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.

  11. Johannes
    Johannes avatar
    3 posts
    Member since:
    Nov 2012

    Posted 26 Nov 2012 Link to this post

    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.

  12. Johannes
    Johannes avatar
    3 posts
    Member since:
    Nov 2012

    Posted 27 Nov 2012 Link to this post

    Update: I modified the original source code, it crashed in several cases. Now it is 2x longer...:-/

  13. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 03 Dec 2012 Link to this post

    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

  14. Ety
    Ety avatar
    4 posts
    Member since:
    Jan 2012

    Posted 13 Feb 2013 Link to this post

    Hello kendo,

    Is this issue planned to be implemented soon?

    Thanks,
    Ety

  15. Fernando
    Fernando avatar
    37 posts
    Member since:
    Sep 2012

    Posted 29 Apr 2013 Link to this post

    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.

  16. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8231 posts
    Member since:
    Sep 2012

    Posted 29 Apr 2013 Link to this post

    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!

Back to Top