PDA

View Full Version : [CLOSED] RemoteSort method



gets_gui
Apr 19, 2012, 7:33 PM
I have the store defined below:


<ext:Store ID="Store" runat="server" GroupField="Key" AutoLoad="False" RemoteSort="True" OnReadData="Store_RefreshData" >

And the following is the code for sorting:

protected void Store_RefreshData(object sender, StoreReadDataEventArgs e)
{
var data = getData();

if (e.Sort.Length > 0)
{


data.Sort(delegate(object x, object y)
{
object a;
object b;

int direction = e.Sort[0].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;

a = x.GetType().GetProperty(e.Sort[0].Property).GetValue(x, null);
b = y.GetType().GetProperty(e.Sort[0].Property).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
});
}

this.Grid1.GetStore().DataSource = data;
}

However, it looks like this method is never called since the code never stop at the debug points. The samething happens in 1.x.
Did I miss anything?

Vladimir
Apr 19, 2012, 7:43 PM
Hi,

Did you define PageProxy for the store?

gets_gui
Apr 19, 2012, 7:53 PM
No, we don't want to use paging.
What's the correct way or example we can follow?

Vladimir
Apr 19, 2012, 8:17 PM
PageProxy doesn't mean paging, it means that data will be fetched from a current page by separate ajax request. If you need remote sort then proxy must be used
Please see the sample with remote paging
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/Page/

gets_gui
Apr 20, 2012, 12:59 PM
yep, it works with the PageProxy.
And it seems like the method Store_RefreshData will not be called and no data show up in the grid if I don't specify the Sorters in the store although I believe that there is a sorter for the group field.
Is this a bug or a feature?
Please advise.

Vladimir
Apr 20, 2012, 1:25 PM
It is a bug. I will fix it soon and notify you
Thanks for the report

Vladimir
Apr 20, 2012, 1:35 PM
No, i was wrong. It was specific error for example
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/Page/

That example assumes that sorting is always provided (and it always reads sorting in Store1_RefreshData)
OnReadData event is executed always when store requires a data (it doesn't depend from sorting)

If you have another behaviour then please provide test sample

gets_gui
Apr 20, 2012, 1:59 PM
Ok, it is my bug :).
BTW, if I set RemoteSort="ture", do we have to implement the sort method using OnReadData handler and PageProxy?
We didn't do anything except specify RemoteSort="ture" in the store for V1, but it seems to be working.

gets_gui
Apr 20, 2012, 2:49 PM
Ok, maybe I am also wrong.
I have to set the AutoLoad="False" per your suggestion for the large amount of data.
Althought I set the datasource and bind the data in a method similar to what I put in Page_Load(), but there is no data in the grid when page loads.

Here is the example:


<%@ Page Language="C#" %>

<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

var store = this.GridPanel1.GetStore();

store.DataSource = getData();

store.DataBind();
}

protected void Store_RefreshData(object sender, StoreReadDataEventArgs e)
{
List<Project> data = getData();
if (e.Sort.Length > 1)
{

data.Sort(delegate(Project x, Project y)
{
object a;
object b;

int direction = e.Sort[1].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;

a = x.GetType().GetProperty(e.Sort[1].Property).GetValue(x, null);
b = y.GetType().GetProperty(e.Sort[1].Property).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b)*direction;
});
}

e.Total = data.Count;
Store1.DataSource = data;

}

private List<Project> getData()
{
CultureInfo ci = new CultureInfo("en-US");
return new List<Project>
{
new Project(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci))
};
}

public class Project
{
public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
{
this.ProjectID = projectId;
this.Name = name;
this.TaskID = taskId;
this.Description = description;
this.Estimate = estimate;
this.Rate = rate;
this.Due = due;
}

public int ProjectID { get; set; }
public string Name { get;set; }
public int TaskID { get; set; }
public string Description { get;set; }
public int Estimate { get;set; }
public double Rate { get; set; }
public double Cost { get; set; }
public DateTime Due { get; set; }
}

</script>

<html>
<head id="Head1" runat="server">
<title>GroupingSummary Plugin - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.x-grid-body .x-grid-cell-Cost {
background-color : #f1f2f4;
}

.x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
background-color : #e1e2e4;
}

.task .x-grid-cell-inner {
padding-left: 15px;
}

.x-grid-row-summary .x-grid-cell-inner {
font-weight: bold;
font-size: 11px;
background-color : #f1f2f4;
}
</style>

<script type="text/javascript">
var totalCost = function (records) {
var i = 0,
length = records.length,
total = 0,
record;

for (; i < length; ++i) {
record = records[i];
total += record.get('Estimate') * record.get('Rate');
}
return total;
};
</script>

</head>
<body>
<form id="Form1" runat="server">
<h1>Group Summary Plugin</h1>
<p>Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.</p>

<ext:ResourceManager ID="ResourceManager1" runat="server"/>

<ext:Store ID="Store1" runat="server" GroupField="Name" RemoteSort="True" AutoLoad="False" OnReadData="Store_RefreshData">
<%--<Sorters>
<ext:DataSorter Property="Due" Direction="ASC" />
</Sorters>--%>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TaskID">
<Fields>
<ext:ModelField Name="ProjectID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="TaskID" />
<ext:ModelField Name="Description" />
<ext:ModelField Name="Estimate" Type="Int" />
<ext:ModelField Name="Rate" Type="Float" />
<ext:ModelField Name="Cost" Type="Float" />
<ext:ModelField Name="Due" Type="Date" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy/>
</Proxy>
</ext:Store>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Frame="true"
StoreID="Store1"
Title="Sponsored Projects"
Collapsible="true"
AnimCollapse="false"
Icon="ApplicationViewColumns"
Width="800"
Height="450">
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:SummaryColumn ID="SummaryColumn1"
runat="server"
TdCls="task"
Text="Task"
Sortable="true"
DataIndex="Description"
Hideable="false"
SummaryType="Count"
Flex="1">
<SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />
</ext:SummaryColumn>

<ext:Column ID="Column1" runat="server" Text="Project" DataIndex="Name" Width="20" />

<ext:SummaryColumn ID="SummaryColumn2"
runat="server"
Width="85"
Text="Due Date"
Sortable="true"
DataIndex="Due"
SummaryType="Max">
<Renderer Format="Date" FormatArgs="'m/d/Y'" />
<SummaryRenderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
<Editor>
<ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn ID="SummaryColumn3"
runat="server"
Width="75"
Text="Estimate"
Sortable="true"
DataIndex="Estimate"
SummaryType="Sum">
<Renderer Handler="return value +' hours';" />
<SummaryRenderer Handler="return value +' hours';" />
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn ID="SummaryColumn4"
runat="server"
Width="75"
Text="Rate"
Sortable="true"
DataIndex="Rate"
SummaryType="Average">
<Renderer Format="UsMoney" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
<Editor>
<ext:NumberField ID="NumberField2" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn
runat="server"
Width="75"
ID="Cost"
Text="Cost"
Sortable="false"
Groupable="false"
DataIndex="Cost"
CustomSummaryType="totalCost">
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
</ext:SummaryColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true" MarkDirty="false" />
</View>
<Features>
<ext:GroupingSummary ID="GroupingSummary1" runat="server" GroupHeaderTpl="{name}" HideGroupedHeader="true" EnableGroupingMenu="false">
</ext:GroupingSummary>
</Features>

<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Toggle" ToolTip="Toggle the visibility of summary row">
<Listeners>
<Click Handler="#{GroupingSummary1}.toggleSummaryRow(!#{GroupingSu mmary1}.showSummaryRow);#{GroupingSummary1}.view.r efresh();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</form>
</body>
</html>

Vladimir
Apr 20, 2012, 3:04 PM
BTW, if I set RemoteSort="ture", do we have to implement the sort method using OnReadData handler and PageProxy?

Yes, you have to implement sorting on the server side



We didn't do anything except specify RemoteSort="ture" in the store for V1, but it seems to be working.

Store assumes that data is sorted on the server therefore no errors, just sequence of rows can be wrong if you don't sort data (grid will show data as is)



I have to set the AutoLoad="False" per your suggestion for the large amount of data.
Althought I set the datasource and bind the data in a method similar to what I put in Page_Load(), but there is no data in the grid when page loads.

You set AutoLoad="false" but you don't load data manually like in my test sample (Render listener of GridPanel)


<Render Handler="this.store.load();" />

By the way, we fixed the issue and now it doesn't require to set AutoLoad="false" (you need to update from SVN)

Also, please note that if you use PageProxy you don't need to bind data in Page_Load, databinding must be provide in OnReadData event handler only (proxy will call that handler when data is required, data will be requested by separate ajax request). Therefore please remove data binding from Page_Load

I suggest to consider to use PageProxy with static direct method, in this case page will not be created for ajax request (it is good for performance), of course static direct method cannot be used if you need to access page controls during data binding
https://github.com/extnet/Ext.NET.Examples/blob/master/Ext.Net.Examples/Examples/GridPanel/ArrayGrid/PageProxy_with_DirectMethod/Default.aspx

gets_gui
Apr 20, 2012, 3:34 PM
You set AutoLoad="false" but you don't load data manually like in my test sample (Render listener of GridPanel)


<Render Handler="this.store.load();" />

How do we trigger the load event (I guess this will in turn calling Store_RefreshData) in C# method since our store data is dynamically generated?
BTW, I am using loadData right now but the Store_RefreshData seems not triggered.


Also, please note that if you use PageProxy you don't need to bind data in Page_Load, databinding must be provide in OnReadData event handler only (proxy will call that handler when data is required, data will be requested by separate ajax request). Therefore please remove data binding from Page_Load

I suggest to consider to use PageProxy with static direct method, in this case page will not be created for ajax request (it is good for performance), of course static direct method cannot be used if you need to access page controls during data binding
https://github.com/extnet/Ext.NET.Examples/blob/master/Ext.Net.Examples/Examples/GridPanel/ArrayGrid/PageProxy_with_DirectMethod/Default.aspx
Understood, I found that the store will do the data binding after calling the OnReadData handler.

Vladimir
Apr 20, 2012, 4:16 PM
How do we trigger the load event (I guess this will in turn calling Store_RefreshData) in C# method since our store data is dynamically generated?

Just define Render listener


grid.Listeners.Render.Handler = "this.store.load();";

But AutoLoad="false" (and Render listener) is not required if you use PageProxy or if you update from SVN



BTW, I am using loadData right now but the Store_RefreshData seems not triggered.

loadData is javascript method loads passed data (as method argument) to the store, it doesn't trigger proxy request, see
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-loadData

gets_gui
Apr 20, 2012, 5:25 PM
Please take a look code below, I use refreshData method to simulate the event which I generate the data and have to bind the new data to the store dynamically.

The code

grid.Listeners.Render.Handler = "this.store.load();";
doesn't work.

And I was using C# LoadData not javascript, however, the Store_RefreshData is not called like when you add listener for loading store in the GridPanel.


<%@ Page Language="C#" %>

<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">

protected void Store_RefreshData(object sender, StoreReadDataEventArgs e)
{
List<Project> data = getData();
if (e.Sort.Length > 1)
{

data.Sort(delegate(Project x, Project y)
{
object a;
object b;

int direction = e.Sort[1].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;

a = x.GetType().GetProperty(e.Sort[1].Property).GetValue(x, null);
b = y.GetType().GetProperty(e.Sort[1].Property).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b)*direction;
});
}

e.Total = data.Count;
Store1.DataSource = data;

}

private static List<Project> getData()
{
CultureInfo ci = new CultureInfo("en-US");
return new List<Project>
{
new Project(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci))
};
}

public void RefreshData(object sender, DirectEventArgs e)
{
GridPanel1.Listeners.Render.Handler = "this.store.load();";
//Store1.LoadData(getData());
}

public class Project
{
public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
{
this.ProjectID = projectId;
this.Name = name;
this.TaskID = taskId;
this.Description = description;
this.Estimate = estimate;
this.Rate = rate;
this.Due = due;
}

public int ProjectID { get; set; }
public string Name { get;set; }
public int TaskID { get; set; }
public string Description { get;set; }
public int Estimate { get;set; }
public double Rate { get; set; }
public double Cost { get; set; }
public DateTime Due { get; set; }
}

</script>

<html>
<head id="Head1" runat="server">
<title>GroupingSummary Plugin - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.x-grid-body .x-grid-cell-Cost {
background-color : #f1f2f4;
}

.x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
background-color : #e1e2e4;
}

.task .x-grid-cell-inner {
padding-left: 15px;
}

.x-grid-row-summary .x-grid-cell-inner {
font-weight: bold;
font-size: 11px;
background-color : #f1f2f4;
}
</style>

<script type="text/javascript">
var totalCost = function (records) {
var i = 0,
length = records.length,
total = 0,
record;

for (; i < length; ++i) {
record = records[i];
total += record.get('Estimate') * record.get('Rate');
}
return total;
};

</script>

</head>
<body>
<form id="Form1" runat="server">
<h1>Group Summary Plugin</h1>
<p>Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.</p>

<ext:ResourceManager ID="ResourceManager1" runat="server"/>

<ext:Store ID="Store1" runat="server" GroupField="Name" RemoteSort="True" AutoLoad="False" OnReadData="Store_RefreshData">
<%--<Sorters>
<ext:DataSorter runat="server" Property="Due" Direction="ASC" />
</Sorters>--%>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TaskID">
<Fields>
<ext:ModelField Name="ProjectID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="TaskID" />
<ext:ModelField Name="Description" />
<ext:ModelField Name="Estimate" Type="Int" />
<ext:ModelField Name="Rate" Type="Float" />
<ext:ModelField Name="Cost" Type="Float" />
<ext:ModelField Name="Due" Type="Date" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy/>
</Proxy>
</ext:Store>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Frame="true"
StoreID="Store1"
Title="Sponsored Projects"
Collapsible="true"
AnimCollapse="false"
Icon="ApplicationViewColumns"
Width="800"
Height="450">
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:SummaryColumn ID="SummaryColumn1"
runat="server"
TdCls="task"
Text="Task"
Sortable="true"
DataIndex="Description"
Hideable="false"
SummaryType="Count"
Flex="1">
<SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />
</ext:SummaryColumn>

<ext:Column ID="Column1" runat="server" Text="Project" DataIndex="Name" Width="20" />

<ext:SummaryColumn ID="SummaryColumn2"
runat="server"
Width="85"
Text="Due Date"
Sortable="true"
DataIndex="Due"
SummaryType="Max">
<Renderer Format="Date" FormatArgs="'m/d/Y'" />
<SummaryRenderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
<Editor>
<ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn ID="SummaryColumn3"
runat="server"
Width="75"
Text="Estimate"
Sortable="true"
DataIndex="Estimate"
SummaryType="Sum">
<Renderer Handler="return value +' hours';" />
<SummaryRenderer Handler="return value +' hours';" />
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn ID="SummaryColumn4"
runat="server"
Width="75"
Text="Rate"
Sortable="true"
DataIndex="Rate"
SummaryType="Average">
<Renderer Format="UsMoney" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
<Editor>
<ext:NumberField ID="NumberField2" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn
runat="server"
Width="75"
ID="Cost"
Text="Cost"
Sortable="false"
Groupable="false"
DataIndex="Cost"
CustomSummaryType="totalCost">
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
</ext:SummaryColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true" MarkDirty="false" />
</View>
<Features>
<ext:GroupingSummary ID="GroupingSummary1" runat="server" GroupHeaderTpl="{name}" HideGroupedHeader="true" EnableGroupingMenu="false">
</ext:GroupingSummary>
</Features>

<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Toggle" ToolTip="Toggle the visibility of summary row">
<Listeners>
<Click Handler="#{GroupingSummary1}.toggleSummaryRow(!#{GroupingSu mmary1}.showSummaryRow);#{GroupingSummary1}.view.r efresh();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Buttons>
<ext:Button runat="server" ID="btn1" Text="refreshData" OnDirectClick="RefreshData"/>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>

Vladimir
Apr 20, 2012, 6:16 PM
You don't need to define Render listener in 'Store_RefreshData'
If grid is defined in markup then define Render in markup also (as i suggested first)



<Render Handler="this.store.load();" />


But as I mentioned before you don't need AutoLoad="false" and Render listener if you use PageProxy or if you update from SVN today



And I was using C# LoadData not javascript, however, the Store_RefreshData is not called like when you add listener for loading store in the GridPanel.


LoadData just generates javascript code to call 'loadData' javascript method. 'loadData' loads passed data, it doesn't trigger proxy request (please read documentation about loadData method, the link in my previous post)
If you need reload data then use



<ext:Button runat="server" ID="btn1" Text="refreshData" Handler="function(){#{Store1}.load();}"/>

gets_gui
Apr 20, 2012, 7:00 PM
I am sorry that I may not explain it clearly.
The grid data is generated via web service, and we need to bind the data dynamically.
In order to make sure you understand it better, I changed my example a little bit.
Whenever you click refresh button, it will generate new project ID for the "Ext Forms: Field Anchoring" project.
I have to somehow bind the data and also apply the current filter as well in the RefreshData method(It can be done by the code I commentted + some sorting).
I am just trying to see if there is a way to trigger the OnReadData handler event, so I can reuse Store_RefreshData method.

And if you don't mind, can you take a look the RefreshData method and make the necessary changes?
One more thing, it seems like the Store1.Update() will trigger Store_RefreshData, but I got some javascript error (Microsoft JScript runtime error: 'this.store.data' is null or not an object) after Store_RefreshData called.


<%@ Page Language="C#" %>

<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">
private static int count = 0;
protected void Store_RefreshData(object sender, StoreReadDataEventArgs e)
{
List<Project> data = getData(count);
if (e.Sort.Length > 1)
{

data.Sort(delegate(Project x, Project y)
{
object a;
object b;

int direction = e.Sort[1].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;

a = x.GetType().GetProperty(e.Sort[1].Property).GetValue(x, null);
b = y.GetType().GetProperty(e.Sort[1].Property).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b)*direction;
});
}

e.Total = data.Count;
Store1.DataSource = data;

}

private static List<Project> getData(int i)
{
CultureInfo ci = new CultureInfo("en-US");
return new List<Project>
{
new Project(100+i, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
new Project(100+i, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
new Project(100+i, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
new Project(100+i, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci))
};
}

public void RefreshData(object sender, DirectEventArgs e)
{
count++;
GridPanel1.Listeners.Render.Handler = "this.store.load();";


//some sorting before load the data
//Store1.LoadData(getData(count));

//Or ???
//Store1.Update();
}

public class Project
{
public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
{
this.ProjectID = projectId;
this.Name = name;
this.TaskID = taskId;
this.Description = description;
this.Estimate = estimate;
this.Rate = rate;
this.Due = due;
}

public int ProjectID { get; set; }
public string Name { get;set; }
public int TaskID { get; set; }
public string Description { get;set; }
public int Estimate { get;set; }
public double Rate { get; set; }
public double Cost { get; set; }
public DateTime Due { get; set; }
}

</script>

<html>
<head id="Head1" runat="server">
<title>GroupingSummary Plugin - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.x-grid-body .x-grid-cell-Cost {
background-color : #f1f2f4;
}

.x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
background-color : #e1e2e4;
}

.task .x-grid-cell-inner {
padding-left: 15px;
}

.x-grid-row-summary .x-grid-cell-inner {
font-weight: bold;
font-size: 11px;
background-color : #f1f2f4;
}
</style>

<script type="text/javascript">
var totalCost = function (records) {
var i = 0,
length = records.length,
total = 0,
record;

for (; i < length; ++i) {
record = records[i];
total += record.get('Estimate') * record.get('Rate');
}
return total;
};

</script>

</head>
<body>
<form id="Form1" runat="server">
<h1>Group Summary Plugin</h1>
<p>Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.</p>

<ext:ResourceManager ID="ResourceManager1" runat="server"/>

<ext:Store ID="Store1" runat="server" GroupField="Name" RemoteSort="True" OnReadData="Store_RefreshData">
<%--<Sorters>
<ext:DataSorter runat="server" Property="Due" Direction="ASC" />
</Sorters>--%>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TaskID">
<Fields>
<ext:ModelField Name="ProjectID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="TaskID" />
<ext:ModelField Name="Description" />
<ext:ModelField Name="Estimate" Type="Int" />
<ext:ModelField Name="Rate" Type="Float" />
<ext:ModelField Name="Cost" Type="Float" />
<ext:ModelField Name="Due" Type="Date" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy/>
</Proxy>
</ext:Store>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Frame="true"
StoreID="Store1"
Title="Sponsored Projects"
Collapsible="true"
AnimCollapse="false"
Icon="ApplicationViewColumns"
Width="800"
Height="450">
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:SummaryColumn ID="SummaryColumn1"
runat="server"
TdCls="task"
Text="Task"
Sortable="true"
DataIndex="Description"
Hideable="false"
SummaryType="Count"
Flex="1">
<SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />
</ext:SummaryColumn>

<ext:Column ID="Column1" runat="server" Text="Project" DataIndex="Name" Width="20" />
<ext:Column ID="Column2" runat="server" Text="ProjectID" DataIndex="ProjectID" Width="20" />

<ext:SummaryColumn ID="SummaryColumn2"
runat="server"
Width="85"
Text="Due Date"
Sortable="true"
DataIndex="Due"
SummaryType="Max">
<Renderer Format="Date" FormatArgs="'m/d/Y'" />
<SummaryRenderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
<Editor>
<ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn ID="SummaryColumn3"
runat="server"
Width="75"
Text="Estimate"
Sortable="true"
DataIndex="Estimate"
SummaryType="Sum">
<Renderer Handler="return value +' hours';" />
<SummaryRenderer Handler="return value +' hours';" />
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn ID="SummaryColumn4"
runat="server"
Width="75"
Text="Rate"
Sortable="true"
DataIndex="Rate"
SummaryType="Average">
<Renderer Format="UsMoney" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
<Editor>
<ext:NumberField ID="NumberField2" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn
runat="server"
Width="75"
ID="Cost"
Text="Cost"
Sortable="false"
Groupable="false"
DataIndex="Cost"
CustomSummaryType="totalCost">
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
</ext:SummaryColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true" MarkDirty="false" />
</View>
<Features>
<ext:GroupingSummary ID="GroupingSummary1" runat="server" GroupHeaderTpl="{name}" HideGroupedHeader="true" EnableGroupingMenu="false">
</ext:GroupingSummary>
</Features>

<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Toggle" ToolTip="Toggle the visibility of summary row">
<Listeners>
<Click Handler="#{GroupingSummary1}.toggleSummaryRow(!#{GroupingSu mmary1}.showSummaryRow);#{GroupingSummary1}.view.r efresh();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Buttons>
<ext:Button runat="server" ID="btn1" Text="refreshData" OnDirectClick="RefreshData"/>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>

Vladimir
Apr 20, 2012, 7:55 PM
As I mentioned before, just call 'load' javascript method of store and it will execute OnReadData server side handler, you don't need to call LoadData, Update or something else


<ext:Button runat="server" ID="btn1" Text="refreshData" Handler="function(){#{Store1}.load();}"/>


If your data from webservice then it is better to request webservice directly (if webservice in the same domain)
See
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/JSON_WebService/
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/XML_WebService/

gets_gui
Apr 20, 2012, 8:10 PM
I don't think calling function(){#{Store1}.load();} will trigger the RefreshData method.
Anyway, I make this woking now.
And for the benefit of other people, just need to change the RefreshData as following:
public void RefreshData(object sender, DirectEventArgs e)
{
count++;
//GridPanel1.Listeners.Render.Handler = "this.store.load();";
Store1.Listeners.AddScript("App.Store1.load();");
}

Vladimir
Apr 20, 2012, 8:21 PM
If you use PageProxy then 'load' javascript method will triger OnReadData, registering calling of 'load' in click button server side handler is bad idea because you create separate additional ajax request

gets_gui
Apr 20, 2012, 8:35 PM
The example I posted here is just an example.
The button is a simulation for how the new data coming and need to rebind to the grid dynamically.

Vladimir
Apr 20, 2012, 8:43 PM
The button is a simulation for how the new data coming and need to rebind to the grid dynamically.

Yes, 'load' method can be called at any time and can be used for dynamic data binding
For example, see Refresh button in the following sample
http://examples2.ext.net/#/GridPanel/Update/SqlDataSource/