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
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]