How can i sort the groups (not the data in the groups)?
cant seem to find it.
Thanks
/Z
Printable View
How can i sort the groups (not the data in the groups)?
cant seem to find it.
Thanks
/Z
Hello @Z!
You can sort the groups specifying the field to sort thru the Grouper setting of the store, indicating the property (field) to group and the direction (ASC/DESC) to sort.
Hope this helps!
i want to sort on a field OTHER than the one i grouped.
/Z
Hello @Z!
Well, for that, you can just sort by the field as you would do normally... Is that not working for you? Can you point an example of that not working, maybe in one of the examples in Examples Explorer?
Hello @Z!
It's been some time since we last replied this thread and still no feedback from you. Can you help us understand your problem so we can try and help you? Or maybe you could fix it on your own?
If you don't post a follow-up in 7+ days, we may be marking this thread as closed, but that is not going to prevent you from posting here when/if you need.
Let me clearer
see example below. i want to sort the group by companySort DESC. I even made a companySort item by military time as i though the a/p was the problem. Then within EACH group, i needed (records in group) sorted lastChange ASC (i couldnt get that column to show in my demo)
[9/1/2017 2:00p] Home Depot
[9/1/2017 8:00a] Starbucks
[9/1/2017 2:00a] 3m
Thanks.
/Z
Code:<%@ 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, "9/1/2017T2:00" },
new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",29.01, 0.42, 1.47, "9/1/2017T8:00" },
new object[] { "[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m", 83.81, 0.28, 0.34, "9/1/2017T14:00" },
new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 71.72, 0.02, 0.03, "9/1/2017T2:00" },
new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 29.01, 0.42, 1.47, "9/1/2017T8:00" },
new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 83.81, 0.28, 0.34, "9/1/2017T14:00" },
new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 71.72, 0.02, 0.03, "9/1/2017T2:00" },
new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 29.01, 0.42, 1.47, "9/1/2017T8:00" },
new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 83.81, 0.28, 0.34, "9/1/2017T14:00" }
};
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" />
<h1>GridPanel with Locking Columns</h1>
<p>This example shows how to achieve "freeze pane" locking functionality similar to Excel.</p>
<p>Columns may be locked or unlocked by dragging them across into the opposite side, or by using the column's header menu.</p>
<p>The "Price" column is not lockable, and may not be dragged into the locked side, or locked using the header menu.</p>
<p>It is not possible to lock <i>all</i> columns using the user interface. The unlocked side must always contain at least one column.</p>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Test Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store2" runat="server" GroupField="company">
<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>
<Sorters>
<ext:DataSorter Property="companySort" Direction="DESC" />
<ext:DataGrouper Property="companySort" 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"/>
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>
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
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 likeCode:<Grouper Property="company" SortProperty="companySort" Direction="ASC" />
2006-08-14 02:34:56-06:00).
I mean, the column groups providing this from database:
Will surely be ordered to, alphabetically ascending order:Code:[9/1/2017 2:00] 3m
[9/1/2017 8:00] Starbucks
[9/1/2017 14:00] Home Depot
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:Code:[9/1/2017 14:00] Home Depot
[9/1/2017 2:00] 3m
[9/1/2017 8:00] Starbucks
If instead we had the date/time formatted in something similar to RFC-3339, we would have:Code:b 3m
c Starbucks
a Home Depot
Then sorting alphabetically we would also keep the time-wise order of 3m, Starbucks and Home Depot.Code:[2017-09-01 02:00:00] 3m
[2017-09-01 08:00:00] Starbucks
[2017-09-01 14:00:00] 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.
Here, I sort the groups alphabetically ascending based on the companySort column data, sso we get Home Depot, 3m and then Starbucks.Code:<%@ 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>
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!
Thanks for clarifying. I am all set now.
thanks!
/Z
Glad it helped, @Z! Thanks for the feedback!