The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Sorting groups

  1. #1

    [CLOSED] Sorting groups

    How can i sort the groups (not the data in the groups)?
    cant seem to find it.
    Thanks
    /Z
    Last edited by fabricio.murta; May 19, 2017 at 7:22 AM.
  2. #2
    Hello @Z!

    You can sort the groups specifying the field to sort thru the Grouper setting of the store, indicating the property (field) to group and the direction (ASC/DESC) to sort.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    i want to sort on a field OTHER than the one i grouped.
    /Z
  4. #4
    Hello @Z!

    Well, for that, you can just sort by the field as you would do normally... Is that not working for you? Can you point an example of that not working, maybe in one of the examples in Examples Explorer?
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello @Z!

    It's been some time since we last replied this thread and still no feedback from you. Can you help us understand your problem so we can try and help you? Or maybe you could fix it on your own?

    If you don't post a follow-up in 7+ days, we may be marking this thread as closed, but that is not going to prevent you from posting here when/if you need.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Let me clearer

    see example below. i want to sort the group by companySort DESC. I even made a companySort item by military time as i though the a/p was the problem. Then within EACH group, i needed (records in group) sorted lastChange ASC (i couldnt get that column to show in my demo)

    [9/1/2017 2:00p] Home Depot
    [9/1/2017 8:00a] Starbucks
    [9/1/2017 2:00a] 3m

    Thanks.
    /Z



    <%@ Page Language="C#" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, "9/1/2017T2:00" },
                    new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",29.01, 0.42, 1.47, "9/1/2017T8:00" },
                    new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m", 83.81, 0.28, 0.34, "9/1/2017T14:00" },
                    new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 71.72, 0.02, 0.03, "9/1/2017T2:00" },
                    new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 29.01, 0.42, 1.47, "9/1/2017T8:00" },
                    new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 83.81, 0.28, 0.34, "9/1/2017T14:00" },
                    new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 71.72, 0.02, 0.03, "9/1/2017T2:00" },
                    new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 29.01, 0.42, 1.47, "9/1/2017T8:00" },
                    new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 83.81, 0.28, 0.34, "9/1/2017T14:00" }
                };
    
    
                this.GridPanel1.Store.Primary.DataBind();
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head id="Head2" runat="server">
        <title>GridPanel with Locking Columns - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <script>
            var count = 0;
            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 alertResponsehift = function (curSelection) {
                count = 4;
                curSelection.beginEdit();
                curSelection.set('price', 1);
                curSelection.endEdit();
            };
    
    
            var myRenderer = function (value, metaData, record, rowIndex, colIndex, store) {
    
    
                var result = "";
                for (i = 0; i < count; i++) {
                    result += "<div><span>TEST</span><BR/></div>";
                }
                return result;
            };
    
    
            var commandHandler = function (cmd, record, obj, grid) {
                alertResponsehift(record);
            };
    
    
    
    
    
    
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager2" runat="server" />
    
    
        <h1>GridPanel with Locking Columns</h1>
    
    
        <p>This example shows how to achieve "freeze pane" locking functionality similar to Excel.</p>
        <p>Columns may be locked or unlocked by dragging them across into the opposite side, or by using the column's header menu.</p>
        <p>The "Price" column is not lockable, and may not be dragged into the locked side, or locked using the header menu.</p>
        <p>It is not possible to lock <i>all</i> columns using the user interface. The unlocked side must always contain at least one column.</p>
    
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Test Grid"
            Width="600"
            Height="350">
            <Store>
                <ext:Store ID="Store2" runat="server" GroupField="company">
                    <Model>
                        <ext:Model ID="Model2" runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="companySort" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Sorters>
                        <ext:DataSorter Property="companySort"  Direction="DESC" />
                        <ext:DataGrouper Property="companySort" Direction="DESC" />
                    </Sorters>
                </ext:Store>
            </Store>
            <Features>
                <ext:Grouping 
                    runat="server"
                    HideGroupedHeader="true"
                    StartCollapsed="true"
                    GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' />
            </Features>
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column5" runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Sortable="false" />
                    <ext:Column ID="Column6" runat="server" Text="Price" DataIndex="price" Width="125" >
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column7" runat="server" Text="Change" DataIndex="change" Width="125">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column ID="Column8" runat="server" Text="% Change" DataIndex="pctChange" Width="125">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:Column DataIndex="lastChange" Text="Date"   runat="server"/>
    
    
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
  7. #7
    Hello @Z!

    As said here, you should use the Grouper property.

    If you want to sort alphabetically by the second column, columnSort, then drop the GroupField="company" from your store (line 105 on test case you provided) and add the proper Grouper setting, by replacing your lines 118-121 to

    <Grouper Property="company" SortProperty="companySort" Direction="ASC" />
    But I'm very confused. You added a date/time stamp to the second data column (columnSort) and want to sort it alphabetically? That is not going to get ordered by the date, not in that format. Best you could do to write a date/time stamp and sort it correctly when using alphabetical sort would be display it in something close to RFC-3339 format (something like 2006-08-14 02:34:56-06:00).

    I mean, the column groups providing this from database:
    [9/1/2017 2:00] 3m
    [9/1/2017 8:00] Starbucks
    [9/1/2017 14:00] Home Depot
    Will surely be ordered to, alphabetically ascending order:
    [9/1/2017 14:00] Home Depot
    [9/1/2017 2:00] 3m
    [9/1/2017 8:00] Starbucks
    Descending order, you'll get Starbucks first, then 3m then Home Depot. I'm assuming this is the order you want cause we're talking about alphabetical sorting. As if your sort column had:

    b 3m
    c Starbucks
    a Home Depot
    If instead we had the date/time formatted in something similar to RFC-3339, we would have:
    [2017-09-01 02:00:00] 3m
    [2017-09-01 08:00:00] Starbucks
    [2017-09-01 14:00:00] Home Depot
    Then sorting alphabetically we would also keep the time-wise order of 3m, Starbucks and Home Depot.

    Sorry, the embedded timestamps on the strings and trying to sort those string columns got me really confused but overall, want a date to be sorted as a string, format it in YMDhms format (always 2-digit for month, day, hour, minute, second and time zone if any).

    Alright. Now let's get to sorting the item into the groups now.

    Response is short: go ahead and filter by the lastChange column.

    But the problem is that the way you provided the data in your test case, Ext.NET couldn't parse the date/time. You'll have to format this date in some way supported, or simply use a DateTime object to provide the date. I'm assuming the date is month 9 and day 1, so I've rewritten your test case providing the date as DateTime objects. If your data comes from database as a string in that format, you'll have to parse it somehow and format it some way Ext.NET can recognize it.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                    new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
                    new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) },
                    new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                    new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
                    new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) },
                    new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                    new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
                    new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) }
                };
    
                this.GridPanel1.Store.Primary.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head2" runat="server">
        <title>GridPanel with Locking Columns - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var count = 0;
            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 alertResponsehift = function (curSelection) {
                count = 4;
                curSelection.beginEdit();
                curSelection.set('price', 1);
                curSelection.endEdit();
            };
    
            var myRenderer = function (value, metaData, record, rowIndex, colIndex, store) {
                var result = "";
                for (i = 0; i < count; i++) {
                    result += "<div><span>TEST</span><BR/></div>";
                }
                return result;
            };
    
            var commandHandler = function (cmd, record, obj, grid) {
                alertResponsehift(record);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager2" runat="server" />
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Test Grid"
            Width="600"
            Height="350">
            <Store>
                <ext:Store ID="Store2" runat="server">
                    <Model>
                        <ext:Model ID="Model2" runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="companySort" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Grouper Property="company" SortProperty="companySort" Direction="ASC" />
                    <Sorters>
                        <ext:DataSorter Property="lastChange" Direction="DESC" />
                    </Sorters>
                </ext:Store>
            </Store>
            <Features>
                <ext:Grouping 
                    runat="server"
                    HideGroupedHeader="true"
                    StartCollapsed="true"
                    GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' />
            </Features>
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column5" runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Sortable="false" />
                    <ext:Column ID="Column6" runat="server" Text="Price" DataIndex="price" Width="125" >
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column7" runat="server" Text="Change" DataIndex="change" Width="125">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column ID="Column8" runat="server" Text="% Change" DataIndex="pctChange" Width="125">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:Column DataIndex="lastChange" Text="Date" runat="server" Flex="1"/>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    Here, I sort the groups alphabetically ascending based on the companySort column data, sso we get Home Depot, 3m and then Starbucks.

    Then -- so we can see the results change from the provided data -- I sorted the entries by descending date order (newest to oldest).

    Well, I hope this is enough to clear your questions on the matter. If not, let us know the points where problems still happens and we'll try our best to help!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Thanks for clarifying. I am all set now.
    thanks!
    /Z
  9. #9
    Glad it helped, @Z! Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Nov 20, 2015, 6:38 PM
  2. [CLOSED] Sorting grid groups based on external data
    By bayoglu in forum 2.x Premium Help
    Replies: 16
    Last Post: May 20, 2013, 6:16 PM
  3. Vertical tabs (without the groups) using GroupTabPanel
    By anup in forum Examples and Extras
    Replies: 1
    Last Post: Jun 29, 2012, 12:12 PM
  4. Order GridPanel Groups
    By dany4446 in forum 1.x Help
    Replies: 4
    Last Post: Feb 03, 2012, 2:37 AM
  5. [CLOSED] Grouping grid with groups for each row
    By macap in forum 1.x Premium Help
    Replies: 4
    Last Post: Nov 30, 2009, 10:08 AM

Posting Permissions