First of all, it needs to enable multi sorting by
MultiColumnSort="true"
setting for a GridPanel.
http://docs.sencha.com/extjs/5.1/5.1...ultiColumnSort
Then it needs to distinguish a header click and a header menu item click. I found out that a Column's .toggleSortState() is used to toggle sorting on a header click. It is a way to distinguish.
Setting this for a GridPanel
<CustomConfig>
<ext:ConfigItem Name="singleColumnSortOnHeaderClick" Value="true" Mode="Raw" />
</CustomConfig>
and applying this override
Ext.grid.column.Column.override({
toggleSortState: function () {
var grid = this.up("tablepanel"),
originalMultiColumnSort = grid.multiColumnSort;
if (grid.singleColumnSortOnHeaderClick) {
grid.multiColumnSort = false;
}
this.callParent(arguments);
grid.multiColumnSort = originalMultiColumnSort;
}
});
appear to do the required.
Here is a full example.
Example
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "a", "1" },
new object[] { "a", "3" },
new object[] { "a", "4" },
new object[] { "a", "5" },
new object[] { "b", "3" },
new object[] { "b", "1" },
new object[] { "b", "8" },
new object[] { "b", "7" },
new object[] { "c", "3" },
new object[] { "c", "6" },
new object[] { "c", "4" },
new object[] { "c", "1" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v3 Example</title>
<script>
Ext.grid.column.Column.override({
toggleSortState: function () {
var grid = this.up("tablepanel"),
originalMultiColumnSort = grid.multiColumnSort;
if (grid.singleColumnSortOnHeaderClick) {
grid.multiColumnSort = false;
}
this.callParent(arguments);
grid.multiColumnSort = originalMultiColumnSort;
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" MultiColumnSort="true">
<CustomConfig>
<ext:ConfigItem Name="singleColumnSortOnHeaderClick" Value="true" Mode="Raw" />
</CustomConfig>
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>