[CLOSED] Order GridPanel Groups in an arbitrary order?

  1. #1

    [CLOSED] Order GridPanel Groups in an arbitrary order?

    Gentlemen,

    This is a quick question with no code sample as I do not believe it is required. I was wondering if it was possible to order GridPanel groups in an arbitrary order. For example, let's say that I am grouping on a column that has the following 3 possible values:

    "Group A"
    "Group B"
    "Group C"

    Now, on my GridPanel, these values are displayed in the exact order given, alphabetically. But let's say I wanted them to display in the following order:

    "Group B"
    "Group C"
    "Group A"

    Is this possible? I cannot find any examples of this in the EXT.NET code samples.

    Thank you very much for any assistance.
  2. #2
    Hi,

    Please use <CustomSortType> of RecordField.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.Store.Primary;
                store.DataSource = new object[] 
                { 
                    new object[] {"A", "test121", "test131"},
                    new object[] {"A", "test122", "test132"},
                    new object[] {"A", "test123", "test133"},
                    new object[] {"B", "test221", "test231"},
                    new object[] {"B", "test222", "test232"},
                    new object[] {"B", "test223", "test233"},
                    new object[] {"C", "test321", "test331"},
                    new object[] {"C", "test322", "test332"},
                    new object[] {"C", "test323", "test333"}
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var mySortType = function (value) {
                switch (value.toUpperCase()) {
                    case "A" :
                        value = 2; //letter position
                        break;
                    case "B":
                        value = 1; //letter position
                        break;
                    case "C":
                        value = 3; //letter position
                }
                return value;
            };
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server" GroupField="test1">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1">
                                    <CustomSortType Fn="mySortType" />
                                </ext:RecordField>
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GroupingView runat="server" />
            </View>
        </ext:GridPanel>
        </form>
    </body>
    </html>

    To get more information how it works:

    See also

    Sources of this class
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.SortTypes

    And source of Store's .sortData() method
    http://docs.sencha.com/ext-js/3-4/so...Ext-data-Store
    Last edited by Daniil; Feb 02, 2012 at 10:51 AM.
  3. #3
    Perfect, that's exactly what I need. Thank you.
  4. #4
    Does this still work in 2.x?
    Last edited by Daniil; Apr 21, 2015 at 1:28 PM.
  5. #5
    Hi @rthiney,

    A Store's Groupers appear to be working.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <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", "test121", "test131" },
                    new object[] { "A", "test122", "test132" },
                    new object[] { "A", "test123", "test133" },
                    new object[] { "B", "test221", "test231" },
                    new object[] { "B", "test222", "test232" },
                    new object[] { "B", "test223", "test233" },
                    new object[] { "C", "test321", "test331" },
                    new object[] { "C", "test322", "test332" },
                    new object[] { "C", "test323", "test333" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var myGrouper = function (value) {
                switch (value.toUpperCase()) {
                    case "A":
                        value = 2; //letter position
                        break;
                    case "B":
                        value = 1; //letter position
                        break;
                    case "C":
                        value = 3; //letter position
                }
    
                return value;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server" GroupField="test1">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Groupers>
                            <ext:DataSorter Property="test1">
                                <Transform Fn="myGrouper" />
                            </ext:DataSorter>
                        </Groupers>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <Features>
                    <ext:Grouping runat="server" />
                </Features>
            </ext:GridPanel>
        </form>
    </body>
    </html>

Similar Threads

  1. Order GridPanel Groups
    By dany4446 in forum 1.x Help
    Replies: 4
    Last Post: Feb 03, 2012, 2:37 AM
  2. Replies: 0
    Last Post: Aug 24, 2011, 1:13 AM
  3. [CLOSED] [1.0] Gridpanel column's order
    By PoloTheMonk in forum 1.x Premium Help
    Replies: 4
    Last Post: Jan 12, 2011, 11:51 AM
  4. GridPanel - Row Order - How To?
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: May 06, 2009, 5:09 PM
  5. [CLOSED] GridPanel re-order rows
    By danielg in forum 1.x Premium Help
    Replies: 2
    Last Post: Mar 31, 2009, 7:10 PM

Tags for this Thread

Posting Permissions