[CLOSED] Sorting grid groups based on external data

[bayoglu]

Hello,

I previously learned how to set custom text for group header using a store other than the grouping grid's store, by calling a function referencing values.name. The thread is here. Finally I did what I wanted and the next challange has been faced.

I need to sort grid groups based on a data residing in a store other than the grid's store. Below is a sample scenario.

I have event id's and companies in the grid store and the grid is grouped based on id.

data presentaion in grid's store:

<id1,company1>
<id1,company2>
<id1,company3>
<id2,company1>
<id2,company3>

Event's name is stored in another store and I can set group text fetched from this store as I mentioned above.

data presentation in second store:

<id1, name1, priority1>
<id2, name2, priority2>

Those events have a priority value. I need to sort the grouped grid's groups based on event.priority value. The grid store only has the event id information. event priority is stored in another store. How can I sort the groups in such a scenario?

Current view:

+ Group 1 : Priority : 3
+ Group 2 : Priority : 2
+ Group 3 : Priority : 4
+ Group 4 : Priority : 1

What I need is:

+ Group 4 : Priority : 1
+ Group 2 : Priority : 2
+ Group 1 : Priority : 3
+ Group 3 : Priority : 4

Thanks.

[bayoglu]

Since I can sort store records as I wanted based on the other store's data @server side, I tried to set RemoteGroup="true" for the grid store and data is initially sorted as I wanted, but again, Groups are sorted by the grouped column again. As a result it is not sorted as I wanted. What is the exact usage of RemoteGroup? Is it possible to 'only group but not sort' after organizing data as needed @server side?

Thanks.

[bayoglu]

Below is a full sample:

<%@ 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)
        {
            this.MyStore.DataSource = new List<object>
            {
                new {
                        ID = 1,
                        NameID = 1,
                        Value = 3
                    },
                new {
                        ID = 2,
                        NameID = 1,
                        Value = 5
                    },
                new {
                        ID = 3,
                        NameID = 1,
                        Value = 3
                    },
                new {
                        ID = 4,
                        NameID = 1,
                        Value = 5
                    },                    
                new {
                        ID = 5,
                        NameID = 2,
                        Value = 7
                    },
                new {
                        ID = 6,
                        NameID = 2,
                        Value = 6
                    },
                new {
                        ID = 7,
                        NameID = 2,
                        Value = 7
                    },
                new {
                        ID = 8,
                        NameID = 2,
                        Value = 6
                    },                    
                new {
                        ID = 9,
                        NameID = 3,
                        Value = 9
                    },
                new {
                        ID = 10,
                        NameID = 3,
                        Value = 9
                    }                                                                                                                   
            };
            this.MyStore.DataBind();

            this.NameStore.DataSource = new List<object>
            {
                new {
                        ID = 1,
                        Name = "Bond",
                        Priority = 3
                    },
                new {
                        ID = 2,
                        Name = "James Bond",
                        Priority = 1
                    },
                new {
                        ID = 3,
                        Name = "Jr. Bond",
                        Priority = 2
                    }                                                                                            
            };
        }
    }
</script>
<script type="text/javascript">
    function getGroupingText(NameID) {
        var nameStore = App.NameStore;
        var id = parseInt(NameID);
        var storeItem = nameStore.getById(id);
        var groupText = "Name: " + storeItem.get('Name') + " > Priority: " + storeItem.get('Priority');
        return groupText;
    }

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
        <ext:Store ID="MyStore" runat="server" GroupField="NameID">
            <Model>
                <ext:Model ID="MyStoreModel" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>            
                        <ext:ModelField Name="NameID" Type="Int"></ext:ModelField>
                        <ext:ModelField Name="Value" Type="Int" UseNull="true"></ext:ModelField>
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>   
        <ext:Store ID="NameStore" runat="server">
            <Model>
                <ext:Model ID="NameStoreModel" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
                        <ext:ModelField Name="Name" Type="String"></ext:ModelField>                        
                        <ext:ModelField Name="Priority" Type="Int"></ext:ModelField>   
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store> 
        <ext:GridPanel ID="MyGrid" runat="server" StoreID="MyStore" MinHeight="200" Collapsible="false" Flex="1" Title="My Form" SelectionMemory="false">
            <ColumnModel runat="server" ID="MyColumnModel">
                <Columns>
                    <ext:Column ID="Name" runat="server" Text="Name" DataIndex="NameID" Align="Left" Flex="1">
                    </ext:Column>
                    <ext:Column ID="Value" runat="server" Text="Value" DataIndex="Value" Align="Left" Flex="1" Groupable="false">                      
                    </ext:Column>                                                                                                                                                                 
                </Columns>
            </ColumnModel>
            <Features>
                <ext:Grouping   ID="Grouping1" runat="server" HideGroupedHeader="true" StartCollapsed="true">                                        
                    <GroupHeaderTpl ID="GroupHeaderTpl1" runat="server" Enabled="true">
                        <Functions>
                            <ext:JFunction Handler="return getGroupingText(NameID);" Name="testFn" Args="NameID">                                                        
                            </ext:JFunction>                                                    
                        </Functions>
                        <Html>
                            {[this.testFn(values.name)]}
                        </Html>
                    </GroupHeaderTpl>                                                                                                                           
                </ext:Grouping>                                                                           
            </Features>
        </ext:GridPanel>
    </form>
</body>
</html>

I want the make the group order as :

Name: James Bond > Priority: 1
Name: Jr. Bond > Priority: 2
Name: Bond > Priority: 3

instead of:

Name: Bond > Priority: 3
Name: James Bond > Priority: 1
Name: Jr. Bond > Priority: 2

Can you direct me to the way?

Thanks.

[Baidaly]

Hello!

We are investigating. There are seems to be some errors in Ext JS.

Thank you!

[bayoglu]

Hello!

Should I wait for good news soon or consider re-organizing store model @ server side?

Thanks for your consideration.

[Vladimir]

Please review the following post
http://forums.ext.net/showthread.php?15275-CLOSED-Use-Grid-Grouping-without-sorting-by-the-groupField&p=64580&viewfull=1#post64580

[bayoglu]

Hello Vladimir,

Thanks for the direction. I am still having issues though. In the related threat you have a comment as:

Please note if you don't want to use DataSourceProxy and have initially defined GroupField then you have to provide grouped data during initial PageLoad

I set RemoteGroup="true" for the store and arranged data as I need in the initial definition. GroupField is initially set and it will not change. The groups are still sorted by Name ID. Below is the modified code. Do I still have to use the OnRefreshData handler? Can you point the problematic part of the sample code?

Thanks.

<%@ 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)
        {
            this.MyStore.DataSource = new List<object>
            {              
                new {
                        ID = 5,
                        NameID = 2,
                        Value = 7
                    },
                new {
                        ID = 6,
                        NameID = 2,
                        Value = 6
                    },
                new {
                        ID = 7,
                        NameID = 2,
                        Value = 7
                    },
                new {
                        ID = 8,
                        NameID = 2,
                        Value = 6
                    },                    
                new {
                        ID = 9,
                        NameID = 3,
                        Value = 9
                    },
                new {
                        ID = 10,
                        NameID = 3,
                        Value = 9
                    },
                new {
                        ID = 1,
                        NameID = 1,
                        Value = 3
                    },
                new {
                        ID = 2,
                        NameID = 1,
                        Value = 5
                    },
                new {
                        ID = 3,
                        NameID = 1,
                        Value = 3
                    },
                new {
                        ID = 4,
                        NameID = 1,
                        Value = 5
                    }                                                                                                                                   
            };
            this.MyStore.DataBind();

            this.NameStore.DataSource = new List<object>
            {
                new {
                        ID = 1,
                        Name = "Bond",
                        Priority = 3
                    },
                new {
                        ID = 2,
                        Name = "James Bond",
                        Priority = 1
                    },
                new {
                        ID = 3,
                        Name = "Jr. Bond",
                        Priority = 2
                    }                                                                                            
            };
        }
    }

 
</script>
<script type="text/javascript">
    function getGroupingText(NameID) {
        var nameStore = App.NameStore;
        var id = parseInt(NameID);
        var storeItem = nameStore.getById(id);
        var groupText = "Name: " + storeItem.get('Name') + " > Priority: " + storeItem.get('Priority');
        return groupText;
    }

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
        <ext:Store ID="MyStore" runat="server" GroupField="NameID" RemoteGroup="true">
            <Model>
                <ext:Model ID="MyStoreModel" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>            
                        <ext:ModelField Name="NameID" Type="Int"></ext:ModelField>
                        <ext:ModelField Name="Value" Type="Int" UseNull="true"></ext:ModelField>
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>   
        <ext:Store ID="NameStore" runat="server">
            <Model>
                <ext:Model ID="NameStoreModel" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
                        <ext:ModelField Name="Name" Type="String"></ext:ModelField>                        
                        <ext:ModelField Name="Priority" Type="Int"></ext:ModelField>   
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store> 
        <ext:GridPanel ID="MyGrid" runat="server" StoreID="MyStore" MinHeight="200" Collapsible="false" Flex="1" Title="My Form" SelectionMemory="false">
            <ColumnModel runat="server" ID="MyColumnModel">
                <Columns>
                    <ext:Column ID="Name" runat="server" Text="Name" DataIndex="NameID" Align="Left" Flex="1">
                    </ext:Column>
                    <ext:Column ID="Value" runat="server" Text="Value" DataIndex="Value" Align="Left" Flex="1" Groupable="false">                      
                    </ext:Column>                                                                                                                                                                 
                </Columns>
            </ColumnModel>
            <Features>
                <ext:Grouping   ID="Grouping1" runat="server" HideGroupedHeader="true" StartCollapsed="true">                                        
                    <GroupHeaderTpl ID="GroupHeaderTpl1" runat="server" Enabled="true">
                        <Functions>
                            <ext:JFunction Handler="return getGroupingText(NameID);" Name="testFn" Args="NameID">                                                        
                            </ext:JFunction>                                                    
                        </Functions>
                        <Html>
                            {[this.testFn(values.name)]}
                        </Html>
                    </GroupHeaderTpl>                                                                                                                           
                </ext:Grouping>                                                                           
            </Features>
        </ext:GridPanel>
    </form>
</body>
</html>

[Vladimir]

Try to set IsPagingStore="true" for the store
But it is better to have proxy and group data on the server like in the following sample

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] {"Group A", 71.72},
                new object[] {"Group A", 29.01},
                new object[] {"Group A", 83.81},
                new object[] {"Group B", 52.55},
                new object[] {"Group B", 64.13},
                new object[] {"Group B", 31.61},
                new object[] {"Group C", 75.43},
                new object[] {"Group C", 67.27},
                new object[] {"Group C", 49.37}
            };
        }
    }
 
    protected void RefreshData(object sender, StoreReadDataEventArgs e)
    {
        object[] data = this.Data;
        if(e.Parameters["group"] != null)
        {
            //Grouping
            // For example group in the following order
            //  - Group B
            //  - Group C
            //  - Group A
             
            Array.Sort<object>(data, (object o1, object o2) =>
                                         {
                                             object[] objArr1 = (object[]) o1;
                                             object[] objArr2 = (object[]) o2;
                                              
                                             if (objArr1[0] == objArr2[0])
                                             {
                                                 return 0;
                                             }
 
                                             switch (objArr1[0].ToString())
                                             {
                                                 case "Group B" :
                                                     return -1;
                                                 case "Group C":
                                                     if(objArr2[0] == "Group B")
                                                     {
                                                         return 1;
                                                     }
                                                     return -1;
                                                 case "Group A":
                                                     return 1;
                                             } 
                                              
                                             return 0;
                                         });
        }
 
        Store1.DataSource = data;
        Store1.DataBind();
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title> 
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ScriptManager1" runat="server" />
         
        <ext:Store ID="Store1" runat="server" RemoteGroup="true" RemoteSort="true" GroupField="company" OnReadData="RefreshData">
            <Proxy>
                <ext:PageProxy>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:PageProxy>
            </Proxy>
            <Model>
                <ext:Model runat="server">
                    <Fields>
                        <ext:ModelField Name="company" />
                        <ext:ModelField Name="price" Type="Float" />
                    </Fields>                    
                </ext:Model>
            </Model>            
        </ext:Store>
         
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StoreID="Store1"
            StripeRows="true"
            Title="Array Grid"
            TrackMouseOver="true"
            Width="600"
            Height="350">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column runat="server" ID="Company" Text="Company" Sortable="true" DataIndex="company" />
                    <ext:Column runat="server" Text="Price" Sortable="true" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
             <Features>
                <ext:Grouping runat="server"  />               
            </Features>
        </ext:GridPanel>          
    </form>
</body>
</html>

[bayoglu]

This is the initial data view @ page load. It is initially sorted and grouped as I need in the page load but the grid re-sorts groups by NameID which distrubs the initial custom sort.

{
     data:
        [
               {"ID":5,"NameID":2,"Value":7},
               {"ID":6,"NameID":2,"Value":6},
               {"ID":7,"NameID":2,"Value":7},
               {"ID":8,"NameID":2,"Value":6},
               {"ID":9,"NameID":3,"Value":9},
               {"ID":10,"NameID":3,"Value":9},
               {"ID":1,"NameID":1,"Value":3},
               {"ID":2,"NameID":1,"Value":5},
               {"ID":3,"NameID":1,"Value":3},
               {"ID":4,"NameID":1,"Value":5}], 
      type: 'memory'
}

[bayoglu]

Hello @Vladimir,

IsPaingStore = "true" helped with the sample code but in the real scenario, it keeps needed sorting & grouping but some groups are not shown. There are currently 10 groups in the real scenario but only first three groups are shown by the grid panel, the rest is not visible though they exist in the store data set. Without IsPagingStore setting, issue remains.

With all my regards to your suggestion about using the proxy, it will be so complex to use for me. As you can see from the threat's scenario, I am trying to sort groups based on the grouping filed's attribute in another store. I would need to send that second store's data as extra parameter to the sorting function. I must ensure that the second store's data is loaded and call the sorting function with that store's data. The second store's data will be re-posted to the server for group sorting. It does not sound as an effective way of doing things. I would be so good if I can organize data before page load and tell grid to just show already organized data. If there were no groups missing in the grid group view, IsPaingStore might be a complete solution (no need to send data back to server). Do you have any idea why there a missing groups?

Thanks for your support.