What's New?

[CLOSED] Implementing custom sort

  1. #1
    Jan 23, 2015, 1:54 PM

    [CLOSED] Implementing custom sort

    Hi,

    I'm trying to follow the discussion at http://forums.ext.net/showthread.php...custom-sorting in order to implement a custom sorting function for a grid column. However, my example doesn't seem to be working when I sort by the Test1 column. What am I missing here?

    Edit in:
    The 
    GroupField="test1"
    attribute was preventing the proper sorting. Now it works as expected. What I need to accomplish though is to provide a custom icon column sorting mechanism. So, the column to be sorted on should only display one of two or three possible icons based on some other record value. I'll try to modify this example to achieve this effect.

    <%@ 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>
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    <script type="text/javascript">
        Ext.data.Store.override({
            createSortFunction: function (field, direction) {
                direction = direction || "ASC";
                var directionModifier = direction.toUpperCase() == "DESC" ? -1 : 1;
                var sortType = this.fields.get(field).sortType;

                //create a comparison function. Takes 2 records, returns 1 if record 1 is greater,
                //-1 if record 2 is greater or 0 if they are equal
                return function (r1, r2) {
                    var v1 = sortType(r1.data[field], r1),
                        v2 = sortType(r2.data[field], r2);

                    return directionModifier * (v1 > v2 ? 1 : (v1 < v2 ? -1 : 0));
                };
            }
        });

        var mySortType = function (value, record) {
            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">
                    <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>
        </ext:GridPanel>
    </form>
</body>
</html>
    Last edited by Daniil; Jan 25, 2015 at 9:02 AM. Reason: [CLOSED]
  2. #2
    Jan 23, 2015, 2:57 PM
    OK, so here's a working example that allows custom sorting by an "icon" column. Some folks on this forum may hopefully find it useful.

    <%@ 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)
        {
            var store = this.GridPanel1.Store.Primary;
            var random=new Random(1);
            
            store.DataSource = new object[] 
            { 
                new object[] {"A", random.Next(0, 100), "test5"},
                new object[] {"A", random.Next(0, 100), "test3"},
                new object[] {"A", random.Next(0, 100), "test1"},
                new object[] {"B", random.Next(0, 100), "test7"},
                new object[] {"B", random.Next(0, 100), "test8"},
                new object[] {"B", random.Next(0, 100), "test6"},
                new object[] {"C", random.Next(0, 100), "test9"},
                new object[] {"C", random.Next(0, 100), "test2"},
                new object[] {"C", random.Next(0, 100), "test4"}
            };
            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>
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    <script type="text/javascript">
        Ext.data.Store.override({
            createSortFunction: function (field, direction) {
                direction = direction || "ASC";
                var directionModifier = direction.toUpperCase() == "DESC" ? -1 : 1;
                var sortType = this.fields.get(field).sortType;

                //create a comparison function. Takes 2 records, returns 1 if record 1 is greater,
                //-1 if record 2 is greater or 0 if they are equal
                return function (r1, r2) {
                    var v1 = sortType(r1.data[field], r1),
                        v2 = sortType(r2.data[field], r2);

                    return directionModifier * (v1 > v2 ? 1 : (v1 < v2 ? -1 : 0));
                };
            }
        });

        var iconRenderer = function (value, metadata, record) {
            var iconSrc;
            switch (value.toUpperCase()) {
                case "A":
                    iconSrc = Ext.net.ResourceMgr.getIconUrl("BugError");
                    value = String.format("<img src='{0}' />", iconSrc);
                    break;
                case "B":
                    iconSrc = Ext.net.ResourceMgr.getIconUrl("Bug");
                    value = String.format("<img src='{0}' />", iconSrc);
                    break;
                case "C":
                    iconSrc = Ext.net.ResourceMgr.getIconUrl("BugFix");
                    value = String.format("<img src='{0}' />", iconSrc);
                    break;
            }

            return value;
        };

        var mySortType = function (value, record) {
            switch (value.toUpperCase()) {
                case "A":
                    value = 3; //Compilation
                    break;
                case "B":
                    value = 2; //Runtime
                    break;
                case "C":
                    value = 1; //Logic
            }
            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">
                    <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="Bug Type" DataIndex="test1">
                        <Renderer Fn="iconRenderer" />
                    </ext:Column>
                    <ext:Column Header="Effort to fix" DataIndex="test2" />
                    <ext:Column Header="Description" DataIndex="test3" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Jan 25, 2015, 9:02 AM
    Hi Vadym,

    Thank you for sharing a solution!
  4. #4
    Jan 26, 2015, 12:20 PM
    Hi Daniil,

    You may close this thread down.

Similar Threads

  1. [CLOSED] Implementing paging in custom store proxy
    By josegarcia in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 13, 2014, 12:00 PM
  2. [CLOSED] Custom sort on some of the grid columns
    By Sowjanya in forum 2.x Legacy Premium Help
    Replies: 19
    Last Post: Apr 30, 2014, 6:58 PM
  3. Delete Column option near Sort Ascending, Sort Descending in Gridpanel.
    By nagesh in forum 2.x Help
    Replies: 8
    Last Post: Dec 21, 2012, 6:42 AM
  4. [CLOSED] how to change the sort name when you are doing the sort by clicking the column header of gridpanel
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 25, 2011, 4:57 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