PDA

View Full Version : [CLOSED] Gridpanel Custom Sorting



WHISHWORKS
Jul 18, 2013, 10:49 AM
Hello,

I need to do sorting on different column which is hidden when I click on another column. My use case is, I have datetime column but I am displaying customized date&time format (string). I am not able to sort on that column I need to sort on original datetime column which is hidden on click of customized date&time column.

Daniil
Jul 18, 2013, 3:42 PM
Hi @WHISHWORKS,

To get custom sorting you can use a Store's RemoteSort="true" option and sort the things server side. It should be implement with a remote Proxy like a PageProxy or an AjaxProxy.

However, I think you can avoid using of the two Columns for the same data using a DateColumn with a respective DateFormat or a common Column with a respective Renderer. The main point is that the ModelField should be with Type="Date".

WHISHWORKS
Jul 19, 2013, 5:48 AM
Hi @WHISHWORKS,

To get custom sorting you can use a Store's RemoteSort="true" option and sort the things server side. It should be implement with a remote Proxy like a PageProxy or an AjaxProxy.

However, I think you can avoid using of the two Columns for the same data using a DateColumn with a respective DateFormat or a common Column with a respective Renderer. The main point is that the ModelField should be with Type="Date".


I need to sort on different column if user clicks on any of the grid column. Could you please help me on this

Daniil
Jul 19, 2013, 11:01 AM
Then this gets actual.


To get custom sorting you can use a Store's RemoteSort="true" option and sort the things server side. It should be implement with a remote Proxy like a PageProxy or an AjaxProxy.

RCN
Jul 19, 2013, 11:46 AM
Do you always perform the sort on the same "column", no matter the column clicked?

WHISHWORKS
Jul 22, 2013, 6:27 AM
Do you always perform the sort on the same "column", no matter the column clicked?

Yes, I always perform on one single column if I click on any of the column.

Daniil
Jul 22, 2013, 7:32 AM
Maybe, this way.

Example

<%@ 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.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="test3" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" Sortable="false" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" Sortable="false" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" Hidden="true" />
</Columns>
<Listeners>
<HeaderClick Handler="var store = column.grid.getStore();

store.sorters.getAt(0).toggle();
store.sort();" />
</Listeners>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

RCN
Jul 22, 2013, 11:58 AM
In my opinion, it's "conceptually" wrong. When the user clicks on a column, it expects the sorting on that specifc column. I'd implement this functionality by adding a button that performs the sorting and setting all the columns unsortable. It would clearly indicate to the user what is going on.



<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var _lastSortDirection = "ASC";
var click = function () {
var originalRemoteSort = App._str.remoteSort;
App._str.remoteSort = false;

if (_lastSortDirection == "DESC") {
_lastSortDirection = "ASC";
}
else {
_lastSortDirection = "DESC";
}

App._str.sort('ID', _lastSortDirection);
App._str.remoteSort = originalRemoteSort;
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button Text="Sort by Invisible Column" runat="server">
<Listeners>
<Click Handler="click();" />
</Listeners>
</ext:Button>
<ext:GridPanel runat="server" Title="Records" Frame="false" Width="500" Height="500">
<Store>
<ext:Store ID="_str" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadFakeRecords/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" Type="int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Address" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Text="Name" Sortable="false" DataIndex="Name" runat="server" />
<ext:Column Text="Address" Sortable="false" DataIndex="Address" runat="server" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>




namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}

public StoreResult LoadFakeRecords()
{
System.Threading.Thread.Sleep(TimeSpan.FromSeconds (3));
List<Person> lst = new List<Person>();

for (int index = 0; index < 15; index++)
{
lst.Add(new Person
{
ID = index,
Name = "Name" + index,
Address = "Address" + index,
});
}

return new StoreResult(lst, lst.Count());
}
}

public class Person
{
public int ID { get; set; }

public string Name { get; set; }

public string Address { get; set; }
}
}