Hello @Z!
As said
here, you should use the
Grouper property.
If you want to sort alphabetically by the second column,
columnSort, then drop the
GroupField="company" from your store (line 105 on test case you provided) and add the proper
Grouper setting, by replacing your lines 118-121 to
<Grouper Property="company" SortProperty="companySort" Direction="ASC" />
But I'm very confused. You added a date/time stamp to the second data column (
columnSort) and want to sort it alphabetically? That is not going to get ordered by the date, not in that format. Best you could do to write a date/time stamp and sort it correctly when using alphabetical sort would be display it in something close to
RFC-3339 format (something like
2006-08-14 02:34:56-06:00
).
I mean, the column groups providing this from database:
[9/1/2017 2:00] 3m
[9/1/2017 8:00] Starbucks
[9/1/2017 14:00] Home Depot
Will surely be ordered to, alphabetically ascending order:
[9/1/2017 14:00] Home Depot
[9/1/2017 2:00] 3m
[9/1/2017 8:00] Starbucks
Descending order, you'll get
Starbucks first, then
3m then
Home Depot. I'm assuming this is the order you want cause we're talking about alphabetical sorting. As if your sort column had:
b 3m
c Starbucks
a Home Depot
If instead we had the date/time formatted in something similar to RFC-3339, we would have:
[2017-09-01 02:00:00] 3m
[2017-09-01 08:00:00] Starbucks
[2017-09-01 14:00:00] Home Depot
Then sorting alphabetically we would also keep the time-wise order of
3m,
Starbucks and
Home Depot.
Sorry, the embedded timestamps on the strings and trying to sort those string columns got me really confused but overall, want a date to be sorted as a string, format it in
YMDhms format (always 2-digit for month, day, hour, minute, second and time zone if any).
Alright. Now let's get to sorting the item
into the groups now.
Response is short: go ahead and filter by the
lastChange column.
But the problem is that the way you provided the data in your test case, Ext.NET couldn't parse the date/time. You'll have to format this date in some way supported, or simply use a DateTime object to provide the date. I'm assuming the date is month 9 and day 1, so I've rewritten your test case providing the date as DateTime objects. If your data comes from database as a string in that format, you'll have to parse it somehow and format it some way Ext.NET can recognize it.
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) },
new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) },
new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) }
};
this.GridPanel1.Store.Primary.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head2" runat="server">
<title>GridPanel with Locking Columns - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var count = 0;
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
var alertResponsehift = function (curSelection) {
count = 4;
curSelection.beginEdit();
curSelection.set('price', 1);
curSelection.endEdit();
};
var myRenderer = function (value, metaData, record, rowIndex, colIndex, store) {
var result = "";
for (i = 0; i < count; i++) {
result += "<div><span>TEST</span><BR/></div>";
}
return result;
};
var commandHandler = function (cmd, record, obj, grid) {
alertResponsehift(record);
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager2" runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Test Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="companySort" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
<Grouper Property="company" SortProperty="companySort" Direction="ASC" />
<Sorters>
<ext:DataSorter Property="lastChange" Direction="DESC" />
</Sorters>
</ext:Store>
</Store>
<Features>
<ext:Grouping
runat="server"
HideGroupedHeader="true"
StartCollapsed="true"
GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' />
</Features>
<ColumnModel>
<Columns>
<ext:Column ID="Column5" runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Sortable="false" />
<ext:Column ID="Column6" runat="server" Text="Price" DataIndex="price" Width="125" >
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ID="Column7" runat="server" Text="Change" DataIndex="change" Width="125">
<Renderer Fn="change" />
</ext:Column>
<ext:Column ID="Column8" runat="server" Text="% Change" DataIndex="pctChange" Width="125">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:Column DataIndex="lastChange" Text="Date" runat="server" Flex="1"/>
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>
Here, I sort the groups alphabetically ascending based on the
companySort column data, sso we get
Home Depot,
3m and then
Starbucks.
Then -- so we can see the results change from the provided data -- I sorted the entries by descending date order (newest to oldest).
Well, I hope this is enough to clear your questions on the matter. If not, let us know the points where problems still happens and we'll try our best to help!