[OPEN] [#1865] Grid sorter does't work properly with DESC

  1. #1

    [OPEN] [#1865] Grid sorter does't work properly with DESC

    Hello!
    I have a weird behavior when apply a gridpanel sorter with DESC direction.
    The sort seems to work, but the sort arrow does not appear as it does when ASC is set, so the user is confused.

    GridPanel.cshtml
    @page  "{handler?}"
    @model ExtCookbook.Pages.GridPanelModel
    @{
        ViewData["Title"] = "GridPanel";
    }
    <ext-section target="Main">
        <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
            <items>
                <ext-gridPanel
                    title="GridPanel"
                    width="960"
                    height="640"
                    frame="true">
                    <store>
                        <ext-store data="Model.GridData">
                            <fields>
                                <ext-dataField name="company" />
                                <ext-numberDataField name="price" />
                                <ext-numberDataField name="change" />
                                <ext-numberDataField name="pctChange" />
                                <ext-dateDataField name="lastChange" dateFormat="yyyy-MM-dd hh:mm:tt" />
                            </fields>
                            <sorters>
                                <ext-sorter property="company" direction="DESC" />
                            </sorters>
                        </ext-store>
                    </store>
                    <columns>
                        <ext-column text="Company" dataIndex="company" flex="1" />
                        <ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" />
                        <ext-column text="Change" dataIndex="change" renderer="change" />
                        <ext-column text="Change %" dataIndex="pctChange" renderer="pctChange" />
                        <ext-dateColumn text="Last Updated" dataIndex="lastChange" width="150" format="yyyy-MM-dd" />
                    </columns>
                </ext-gridPanel>
            </items>
        </ext-container>
    </ext-section>
    GridPanel.cshtml.cs
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using System;
    using System.Collections.Generic;
    
    namespace ExtCookbook.Pages
    {
        public class GridPanelModel : PageModel
        {
            public List<object> GridData { get; set; }
    
            public void OnGet()
            {
                var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");
    
                this.GridData = new List<object>
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald's Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    }
    Thank you!
  2. #2
    Hello again, @bbros!

    It looks like a case problem, literally. If you just add a x- to the direction argument, it works and prints as we wanted. Although that's a bit funny how it "partially accepts case-insensitive values" (Ext.NET emits the "DESC" value as "desc"), the official documentation on the actual property states the exact two values it accepts in all caps.

    Now as for why specifying direction="ASC" works is actually due to another bug in Ext.NET. As Ext.NET thinks that the default is ASC, then it simply doesn't emit the client-side code specifying the classification order. The default is, in fact, ASC and the expected behavior is attained, as if you didn't specify the direction in the sorter block anyway.

    If you're asking yourself why that's a bug, know that it is possible to override Ext JS defaults; so in case the sorter's default was changed to 'DESC' all that would be possible with markup would be to sort in descend order.

    We have logged this as issue #1865 and will post a follow-up here as soon as we get this fixed in Ext.NET!

    And for a solution to this, just add x- to the direction argument so it is treated as a custom config and its value doesn't become transformed from an all-caps Enum into a lowercase string. In other words:

    <ext-sorter property="company" x-direction="DESC" />
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for this details!

Similar Threads

  1. Replies: 5
    Last Post: Jun 10, 2016, 8:58 PM
  2. Replies: 5
    Last Post: Apr 16, 2016, 6:54 PM
  3. [CLOSED] Tabs does not work properly
    By jesperhp in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 19, 2014, 2:59 AM
  4. Replies: 6
    Last Post: Oct 15, 2012, 6:20 AM
  5. [CLOSED] Remove sort Asc/Desc from grid header context menu
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 29, 2009, 2:59 PM

Posting Permissions