[CLOSED] Custom sorting

  1. #1

    [CLOSED] Custom sorting

    Hi,
    I read this link http://forums.ext.net/showthread.php...custom-sorting but in Ext.Net 3.x I can not make it work, the param record in the funcion mySortType continues to be undefine.
    Please help me.
    Thank you

    Jimmy
    Last edited by fabricio.murta; Dec 02, 2016 at 1:31 PM.
  2. #2
    Hello Jimmy!

    The parameters most likely changed from 1.x to 3.x. One quick way to find how the parameters are being passed to your custom function is:
    1. run the page without debugging
    2. open browser's debug once it loads
    3. add a breakpoint to the line where you use 'record'
    4. trigger the code (or refresh page if it is triggered on load)
    5. walk back in the stack trace to see how the custom method is being called and what is passed to it.

    Other way to determine is looking on documentation.

    Can you share how did you implement your custom sorting on Ext.NET 3? If that's confuse for you and you can provide how you are trying to make it work on v3 we could run in our side and give you pinpoint advice on how to make it work. I see some discussions on forums but most if not all limits to Ext.NET 1, and classes API changed considerably from version 1 to version 3.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabrico,
    I need to sort a column with data other than those associated with the column.
    In the following example, I need to sort column "company" with data in "orderField".
    It works with the header menù, but in onclick of header sort direction is always "ASC", also in all cases in the column header the sort icon doesn't appear.
    Please help me.
    Thank you

    Jimmy

    <%@ Page Language="C#" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 10, 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 7, 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 6, 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 9, 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 11, 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 15, 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 3, 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 2, 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 1, 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 20, 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 23, 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 21, 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30, 30.27, 1.09, 3.74, "9/1 12:00am" },
                };
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title></title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <style>
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </style>
    
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
    
            var sortStore = function (store, sorter)
            {
    
    
                if (sorter[0].config.property == 'company') {
    
    
                    store.sort('orderField', sorter[0].config.direction);
    
    
                }
    
    
            }
    
    
        </script>
    
    
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
    
        <h1>Simple Array Grid</h1>
    
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Array Grid"
            Width="600"
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="orderField" />
                                <ext:ModelField Name="price" Type="Float" SortType="AsInt" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Listeners>
                        <Sort Fn="sortStore" />
                    </Listeners>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" ></ext:Column>
                    <ext:Column runat="server" Text="Price" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>
                
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
           
           
        </ext:GridPanel>
    </body>
    </html>
  4. #4
    Hello again Jimmy!

    Thanks for the test case, I believe it makes it clear how you need it to work.

    Seems you diverged drastically from the path the thread you pointed though, by using an event instead of specifying the field's a custom filter.

    Much like the thread you pointed, the client-side sorter custom function supports only applying custom logic to the field contents, where you actually want it to sort from another field.

    Bad and good news about this.

    Bad news is that it is not really supported by the API.

    Good news is that we could easily adapt the sorter to pass the full record instead of simply the field contents to the custom sorter function, allowing us to effectively sort by the desired hidden field.

    I will point you what to change in your example for it to work. If still confuse after merging the changes, let us know and we'll share the fully adapted code here.

    1. Do not use a listener, get rid of lines 117-119 on your example.
    2. Your custom sorting function is off. You can scrap it away too. :)
    3. You probably missed the record parameter cause you didn't actually implement the override suggested by Vladimir in the related thread you pointed. In fact, the override per se does not work as the code has (as expected) dramatically changed since Ext.NET 1! Add this to your scripts on your page:

    Ext.define('Ext.util.Sorter', {
        override: 'Ext.util.Sorter',
        sortFn: function (item1, item2) {
            var me = this,
                transform = me._transform,
                root = me._root,
                property = me._property,
                lhs, rhs;
    
            if (root) {
                item1 = item1[root];
                item2 = item2[root];
            }
    
            if (transform) {
                lhs = transform(item1);
                rhs = transform(item2);
            } else {
                lhs = item1[property];
                rhs = item2[property];
            }
    
            return (lhs > rhs) ? 1 : (lhs < rhs ? -1 : 0);
        }
    });
    4. You also need the complex custom sorting function (just being ironic, it's actually extremely simple):

    var myCustomSort = function (record) {
        return record.orderField
    }
    5. Point your custom sort function from the store's model fields definition. Change your line 108 (in your original code sample) to:

    <ext:ModelField Name="company">
        <CustomSortType Fn="myCustomSort" />
    </ext:ModelField>
    And voila, both column-header-click toggling and context menu sorting works as expected.

    Notice your test case works cause the column you want to use as base for sorting is easily sorted with javascript ">" and "<" (greater than and lesser than) comparators (line 23 in the override provided above). If you are sorting an arbitrary data that might not fit straight comparison, then the custom sort method should either transform the field into something that can be comparable or the override changed to support the check (and probably perform the custom check only and only if transform is defined.

    Notice also this solution is based on the suggestions of the thread you initially pointed (Gridpanel custom sorting), and I didn't dig down to find a better way to customize the sorting, which is probably possible with Ext.NET 3 and newer. But this approach seems both simple and fast enough to do its job and I believe you can use it without any issues -- although it is likely to break between Ext.NET major releases.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,
    It works fine.
    Thank you very much.

    Jimmy
  6. #6
    Hello Jimmy, glad it works for you, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Custom Grid Sorting
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: Oct 24, 2013, 4:15 AM
  2. [CLOSED] Gridpanel Custom Sorting
    By WHISHWORKS in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 22, 2013, 11:58 AM
  3. Grouping Feature with Custom sorting
    By glenh in forum 2.x Help
    Replies: 0
    Last Post: Jun 20, 2013, 5:44 AM
  4. [CLOSED] Custom GridPanel Sorting
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 10, 2013, 1:09 PM
  5. Gridpanel custom sorting
    By boris in forum 1.x Help
    Replies: 11
    Last Post: Aug 23, 2011, 2:50 PM

Posting Permissions