[CLOSED] grid sort -- How to do both single & multi sort

  1. #1

    [CLOSED] grid sort -- How to do both single & multi sort

    Hi, By default, user can sort column by clicking on the col header OR select a sort option from the header menu. Both methods clear thel existing sort. How do I customize the sort on header menu -> when user select a sort option from header menu, it appends the new sort to the grid sorters without clear existing one ? please note, I need to keep the single sort behavior when user click on col header.

    Thanks
    -szhang
    Last edited by Daniil; Dec 15, 2015 at 1:28 PM. Reason: [CLOSED]
  2. #2
    Hi @susanz,

    I don't see an API setting to get the required functionality, but it looks like I see what to override. Needs more time for investigating.
  3. #3
    Sure, I am not in rush. I do appreciate you offer to help!
    Thanks
    -szhang
  4. #4
    First of all, it needs to enable multi sorting by MultiColumnSort="true" setting for a GridPanel.
    http://docs.sencha.com/extjs/5.1/5.1...ultiColumnSort

    Then it needs to distinguish a header click and a header menu item click. I found out that a Column's .toggleSortState() is used to toggle sorting on a header click. It is a way to distinguish.

    Setting this for a GridPanel
    <CustomConfig>
        <ext:ConfigItem Name="singleColumnSortOnHeaderClick" Value="true" Mode="Raw" />
    </CustomConfig>
    and applying this override
    Ext.grid.column.Column.override({
        toggleSortState: function () {
            var grid = this.up("tablepanel"),
                originalMultiColumnSort = grid.multiColumnSort;
    
            if (grid.singleColumnSortOnHeaderClick) {
                grid.multiColumnSort = false;
            }
    
            this.callParent(arguments);
            grid.multiColumnSort = originalMultiColumnSort;
        }
    });
    appear to do the required.

    Here is a full example.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "a", "1" },
                    new object[] { "a", "3" },
                    new object[] { "a", "4" },
                    new object[] { "a", "5" },
                    new object[] { "b", "3" },
                    new object[] { "b", "1" },
                    new object[] { "b", "8" },
                    new object[] { "b", "7" },
                    new object[] { "c", "3" },
                    new object[] { "c", "6" },
                    new object[] { "c", "4" },
                    new object[] { "c", "1" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    
        <script>
            Ext.grid.column.Column.override({
                toggleSortState: function () {
                    var grid = this.up("tablepanel"),
                        originalMultiColumnSort = grid.multiColumnSort;
    
                    if (grid.singleColumnSortOnHeaderClick) {
                        grid.multiColumnSort = false;
                    }
    
                    this.callParent(arguments);
                    grid.multiColumnSort = originalMultiColumnSort;
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server" MultiColumnSort="true">
                <CustomConfig>
                    <ext:ConfigItem Name="singleColumnSortOnHeaderClick" Value="true" Mode="Raw" />
                </CustomConfig>
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Hi Daniil, Thanks for your solution! I copied your sample code and run it with 3.2 Ext.net. For some reason, the multi sort never worked. I do have MutliColumnSort = "true", even without the Column override(), the grid only does single sort. Did I miss any thing?
    Thanks
    -susanz
  6. #6
    Please try this example:

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "a", "1" },
                    new object[] { "a", "3" },
                    new object[] { "a", "4" },
                    new object[] { "a", "5" },
                    new object[] { "b", "3" },
                    new object[] { "b", "1" },
                    new object[] { "b", "8" },
                    new object[] { "b", "7" },
                    new object[] { "c", "3" },
                    new object[] { "c", "6" },
                    new object[] { "c", "4" },
                    new object[] { "c", "1" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    
        <script>
            Ext.grid.column.Column.override({
                sort: function (direction) {
                    var me = this,
                        grid = me.up('tablepanel'),
                        store = grid.store;
    
                    Ext.suspendLayouts();
                    me.sorting = true;
    
                    // Original code line:
                    //store.sort(me.getSortParam(), direction, grid.multiColumnSort ? 'multi' : 'replace');
    
                    // Replaced with:
                    if (!direction && me.sortState) {
                        direction = me.sortState === "ASC" ? "DESC" : "ASC";
                    }
    
                    store.sort(me.getSortParam(), direction, grid.multiColumnSort ? 'append' : 'replace');
                    // End of changes
    
                    delete me.sorting;
                    Ext.resumeLayouts(true);
                },
    
                toggleSortState: function () {
                    var grid = this.up("tablepanel"),
                        originalMultiColumnSort = grid.multiColumnSort;
    
                    if (grid.singleColumnSortOnHeaderClick) {
                        grid.multiColumnSort = false;
                    }
    
                    this.callParent(arguments);
                    grid.multiColumnSort = originalMultiColumnSort;
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server" MultiColumnSort="true">
                <CustomConfig>
                    <ext:ConfigItem Name="singleColumnSortOnHeaderClick" Value="true" Mode="Raw" />
                </CustomConfig>
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7
    Awesome! It works like a charm. Thank you so much for your nice clean solution!
    Thanks
    -szhang

Similar Threads

  1. [CLOSED] [#699] Disable remote sort and sort locally
    By RCN in forum 3.x Legacy Premium Help
    Replies: 10
    Last Post: Feb 13, 2015, 11:10 AM
  2. Replies: 8
    Last Post: Dec 21, 2012, 6:42 AM
  3. Replies: 4
    Last Post: Jul 25, 2011, 4:57 PM
  4. TreeGrid multi column sort
    By t316 in forum 1.x Help
    Replies: 4
    Last Post: Jul 19, 2011, 10:46 PM
  5. Sort with Conditional sort direction in JS- help!
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: May 05, 2009, 12:11 PM

Tags for this Thread

Posting Permissions