[CLOSED] gridpanel / sorting / ascent insensitive

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] gridpanel / sorting / ascent insensitive

    Hello

    I am setting the locale on run time (currentuiculture & currentculture) of my webapp to get multi lingual application according to a user selection and not via locale of ext.net in the config file. This works wonderful with datefields but gives me a problem with sorting on gridpanels. Strings with ascents don't get sorted as we do it (ascent insensitive for chars like a & ä or u & ü). Is there a way to set the sorting locale on the fly too? (like currentculture?)

    Thank you very much.

    best regards

    PS: I know there is the SortType on the modelfield but that seems to give me only case (in)sensitive...
    Last edited by Daniil; Jul 14, 2015 at 5:21 PM. Reason: [CLOSED]
  2. #2
    Hi @tMp,

    As far as I know JavaScript has issues with sorting characters with accents.

    Generally speaking, remote sorting (on server) is the answer in such scenarios. Is it an option for you?
  3. #3
    Hello Daniil,

    I feared you would answer something like that. I am trying to do as much as possible on the client side. In this case all the data is already on the client side and there is no need to disturb the server with anything about it... But in that case I think I will have too because it looks really stupid if you are not used to it = clients won't find everything...

    Thanks for the information and if you ever have a solution - please don't hesitate to share it ;)

    cheers!

    PS: Or could I enhance the sorting with some javascript to strip the accents?
    Last edited by tMp; Jun 22, 2015 at 7:14 PM.
  4. #4
    I agree.

    Could you, please, provide a simple test case to reproduce the issue? I would like to investigate in details.

    As far as I can understand you are facing two different issues (with different configurations)? Please provide a test case of the most actual issue first.
  5. #5
    Hello Daniil,

    I am so sorry. I had a mix up with locale and remote sorting (I corrected the initial text, there is only one problem - the one with JavaScript sorting in gridpanels and case & accent insensitivity).

    As you see in the test case, the "e" and the "Ä" aren't where they should be... Perhaps one can tweak the sorting algorithm to ignore cases and accents?

    Thank you,

    best regards

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Xml.Xsl" %>
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Linq" %>
    
    <script runat="server">
        private DataTable GetDataTable()
        {
            DataTable table = new DataTable();
    
            table.Columns.AddRange(new DataColumn[] {
                new DataColumn("Name")   { ColumnName = "name",    DataType = typeof(string) }
            });
    
            foreach (object[] obj in this.Data)
            {
                table.Rows.Add(obj);
            }
    
            return table;
        }
        
        private object[] Data
        {
            get
            {            
                return new object[]
                {
                    new object[] { "AT&T Inc." },
                    new object[] { "Boeing Co." },
                    new object[] { "Caterpillar Inc."},
                    new object[] { "Citigroup, Inc."},
                    new object[] { "E.I. du Pont de Nemours and Company" },
                    new object[] { "exxon Mobil Corp"},
                    new object[] { "General Electric Company" },
                    new object[] { "General Motors Corporation" },
                    new object[] { "Hewlett-Packard Co." },
                    new object[] { "Honeywell Intl Inc" },
                    new object[] { "Intel Corporation" },
                    new object[] { "International Business Machines" },
                    new object[] { "Johnson & Johnson" },
                    new object[] { "JP Morgan & Chase & Co" },
                    new object[] { "McDonald\"s Corporation" },
                    new object[] { "Merck & Co., Inc." },
                    new object[] { "Microsoft Corporation" },
                    new object[] { "Pfizer Inc" },
                    new object[] { "The Coca-Cola Company" },
                    new object[] { "Ägis GmbH" },
                    new object[] { "The Procter & Gamble Company" },
                    new object[] { "United Technologies Corporation" },
                    new object[] { "Verizon Communications" },
                    new object[] { "Wal-Mart Stores, Inc." }
                };
            }
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.GetDataTable();
                this.Store1.DataBind(); 
            }
        }
    
        </script>
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Basic GridPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <ext:ResourceManager runat="server" Locale="de-ch" />
    
        <ext:Viewport runat="server"  MarginSpec="0 0 10 0">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
            </LayoutConfig>
            <Items>
                <ext:GridPanel 
                    runat="server" 
                    Title="Test" 
                    Frame="true"
                    Width="400"
                    Height="295">
                    <Store>
                        <ext:Store 
                            id="Store1"
                            runat="server">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="name" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Sorters>
                                <ext:DataSorter Property="name" />
                            </Sorters>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" Text="Name" Flex="1" DataIndex="name" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
  6. #6
    Thank you for the test case and sorry for the delay. I will investigate it a bit later this week.
  7. #7
    Hello Daniil,

    No worries and thank you very much for your time!

    best regards.
  8. #8
    As for case insensitive sorting, it is not difficult to get it working:
    <ext:DataSorter Property="name">
        <Transform Handler="return item.toLocaleLowerCase();" />
    </ext:DataSorter>
    As for accents, this helped.
    http://stackoverflow.com/questions/8...-in-javascript

    <ext:DataSorter>
        <SorterFn Fn="nameSorter" />
    </ext:DataSorter>
    <script>
        var nameSorter = function(record1, record2) {
            var a = record1.data["name"],
                b = record2.data["name"];
    
            return a.toLowerCase().localeCompare(b.toLowerCase());
        };
    </script>
  9. #9
    Hello Daniil,

    thank you very much! It looks promising...

    Unfortunately it works only on the initial sorting. I tried to add a listener to the column but haven't found onChange, onSortable or something similar. What is the keyword the it runs again on click on the column header?

    And I tried to make the function a little bit more general. I know that I have to switch from FN to Handler if I want to use my own parameters but what about the record1, record2? I am not sure from where they come from and how to get them (see ???)

    thank you very much!

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Linq" %>
    
    <script runat="server">
        private DataTable GetDataTable()
        {
            DataTable table = new DataTable();
    
            table.Columns.AddRange(new DataColumn[] {
                new DataColumn("Name")   { ColumnName = "name",    DataType = typeof(string) }
            });
            table.Columns.AddRange(new DataColumn[] {
                new DataColumn("Rubbish")   { ColumnName = "rubbish",    DataType = typeof(string) }
            });
    
            foreach (object[] obj in this.Data)
            {
                table.Rows.Add(obj);
            }
    
            return table;
        }
        
        private object[] Data
        {
            get
            {            
                return new object[]
                {
                    new object[] { "AT&T Inc.", "abc" },
                    new object[] { "Boeing Co.", "adsf" },
                    new object[] { "Caterpillar Inc.", "adf"},
                    new object[] { "Citigroup, Inc.", "abc"},
                    new object[] { "E.I. du Pont de Nemours and Company", "adf" },
                    new object[] { "exxon Mobil Corp", "Abc"},
                    new object[] { "General Electric Company", "adsf" },
                    new object[] { "Pfizer Inc", "abc" },
                    new object[] { "The Coca-Cola Company", "sdf" },
                    new object[] { "Ägis GmbH", "abc" },
                    new object[] { "The Procter & Gamble Company", "äbsdfdc" }
                };
            }
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.GetDataTable();
                this.Store1.DataBind(); 
            }
        }
    
        </script>
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Basic GridPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <ext:ResourceManager runat="server" Locale="de-ch" />
    
        <ext:Viewport runat="server"  MarginSpec="0 0 10 0">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
            </LayoutConfig>
            <Items>
                <ext:GridPanel 
                    runat="server" 
                    Title="Test" 
                    Frame="true"
                    Width="400"
                    Height="295">
                    <Store>
                        <ext:Store 
                            id="Store1"
                            runat="server">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="name" />
                                        <ext:ModelField Name="rubbish" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Sorters>
                                <ext:DataSorter Property="name"><SorterFn Handler="nameSorter(???,???,'name')"></SorterFn></ext:DataSorter>
                            </Sorters>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" Text="Name" Flex="1" DataIndex="name" />
                            <ext:Column runat="server" Text="Rubbish" Flex="1" DataIndex="rubbish" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    
        <script>
        var nameSorter = function(record1, record2, colName) {
            var a = record1.data[colName],
                b = record2.data[colName];
    
            return a.toLowerCase().localeCompare(b.toLowerCase());
        };
    </script>
    
    </body>
    </html>
  10. #10
    The quickest way to determine the names of parameters would be:
    <SorterFn Handler="debugger" />
    Then you'll see the names. It is item1 and item2.

    As for sorting on a Column header click, I think overriding a Column's .sort() method is a way to go.
    <ext:Column runat="server" Text="Name" DataIndex="name">
        <CustomConfig>
            <ext:ConfigItem Name="sort" Value="nameSort" Mode="Raw" />
        </CustomConfig>
    </ext:Column>
    Here is the function with the original code which I suggest to override.
    var nameSort = function(direction) {
        var me = this,
            grid = me.up('tablepanel'),
            store = grid.store;
    
        Ext.suspendLayouts();
        me.sorting = true;
        store.sort(me.getSortParam(), direction, grid.multiColumnSort ? 'multi' : 'replace');
        delete me.sorting;
        Ext.resumeLayouts(true);
    };
    That is the link to ExtJS docs with source code of .sort() method.
    http://docs.sencha.com/extjs/5.1/5.1...mn-method-sort
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] [#537] Combobox Case Insensitive Value Matching
    By pgodwin in forum 2.x Premium Help
    Replies: 3
    Last Post: Sep 04, 2014, 4:42 AM
  2. Replies: 0
    Last Post: Feb 05, 2013, 8:12 AM
  3. Gridpanel custom sorting
    By boris in forum 1.x Help
    Replies: 11
    Last Post: Aug 23, 2011, 2:50 PM
  4. [CLOSED] GridPanel sortable: case insensitive
    By RomualdAwessou in forum 1.x Premium Help
    Replies: 1
    Last Post: Oct 05, 2010, 2:27 PM
  5. Problem with GridPanel sorting
    By magisystem in forum 1.x Help
    Replies: 3
    Last Post: Sep 09, 2010, 1:35 PM

Tags for this Thread

Posting Permissions