May 27, 2012, 10:45 PM
[CLOSED] Difference in Paging Toolbar behaviour between Ext.NET 1.x and 2 for Grid with remote (ashx) paging and local filtering
Hi,
In Ext.NET 1.x if I had a grid that loaded data remotely and pages remotely (e.g. via a JsonReader calling an ASHX), but filters were local, then as you paged through the data, those filters would apply on the client side. I believe this is the way the GridPanel is architected; the presentation is separate from the data so if you get more pages, the filters are then applied once the store is reloaded. And that works fine.
However, in Ext.NET 2, I am finding that the Paging toolbar gets disabled when you go to the next page of data (remote loaded) while you have local filters on and those local filters return no data for that page.
If, however, paging and filtering are both local or both remote, then it seems okay.
Below are code samples for version 1.x and then version 2. Then there are steps to follow to reproduce the difference in behavior.
Here is a version 1.x sample:
ASPX:
Now, here is the Ext.NET 2 equivalent:
ASPX:
Steps to reproduce difference in behaviour:
For 1.x
For 2.0 do the same, but notice for step 6, the pager is disabled after going to the next page.
I would expect 2.0 to work same as 1.x? Hopefully I've just missed a very simple thing to set or configure somewhere?
In Ext.NET 1.x if I had a grid that loaded data remotely and pages remotely (e.g. via a JsonReader calling an ASHX), but filters were local, then as you paged through the data, those filters would apply on the client side. I believe this is the way the GridPanel is architected; the presentation is separate from the data so if you get more pages, the filters are then applied once the store is reloaded. And that works fine.
However, in Ext.NET 2, I am finding that the Paging toolbar gets disabled when you go to the next page of data (remote loaded) while you have local filters on and those local filters return no data for that page.
If, however, paging and filtering are both local or both remote, then it seems okay.
Below are code samples for version 1.x and then version 2. Then there are steps to follow to reproduce the difference in behavior.
Here is a version 1.x sample:
ASPX:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Grid - Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="fit">
<Items>
<ext:GridPanel runat="server" Title="Simple Grid">
<Store>
<ext:Store Id="Store1" runat="server" PageSize="10">
<Reader>
<ext:JsonReader Root="Data" TotalProperty="TotalRecords">
<Fields>
<ext:RecordField Name="Company" Mapping="Name" />
<ext:RecordField Name="Price" Type="Float" />
<ext:RecordField Name="Change" Type="Float" />
<ext:RecordField Name="PctChange" Mapping="PercentChange" Type="Float" />
<ext:RecordField Name="LastChange" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="10" Mode="Raw" />
</BaseParams>
<Proxy>
<ext:HttpProxy Url="FinancialData.ashx" />
</Proxy>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column Header="Company" DataIndex="Company" Width="200" />
<ext:Column Header="Price" DataIndex="Price" Width="50" />
<ext:Column Header="Change" DataIndex="Change" Width="50" />
<ext:Column Header="Change" DataIndex="PctChange" Width="50" />
<ext:DateColumn Header="Last Updated" DataIndex="LastChange" Format="yyyy-MM-dd hh:mmtt" Width="130" />
</Columns>
</ColumnModel>
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters1" Local="true">
<Filters>
<ext:StringFilter DataIndex="Company" />
<ext:NumericFilter DataIndex="Price" />
<ext:NumericFilter DataIndex="Change" />
<ext:NumericFilter DataIndex="PctChange" />
<ext:DateFilter DataIndex="LastChange" />
</Filters>
</ext:GridFilters>
</Plugins>
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="Store1" PageSize="10" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
</body>
</html>public class FinancialData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
int start = Convert.ToInt32(context.Request["start"]);
int limit = Convert.ToInt32(context.Request["limit"]);
Paging<CompanyData> data = GetData(start, limit);
context.Response.Write(JSON.Serialize(data));
}
private Paging<CompanyData> GetData(int start, int limit)
{
var data = CompanyData.Data;
int numberToGet = start + limit > data.Count ? data.Count - start : limit;
return new Paging<CompanyData>(data.GetRange(start, numberToGet), data.Count);
}
public bool IsReusable
{
get { return false; }
}
}public class CompanyData
{
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PercentChange { get; set; }
public DateTime LastChange { get; set; }
public CompanyData(string name, double price, double change, double percentChange, string lastChanged)
{
Name = name;
Price = price;
Change = change;
PercentChange = percentChange;
LastChange = DateTime.ParseExact(lastChanged, "M/d hh:mmtt", CultureInfo.InvariantCulture);
}
public static List<CompanyData> Data
{
get
{
return new List<CompanyData>
{
new CompanyData("3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"),
new CompanyData("Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"),
new CompanyData("Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"),
new CompanyData("American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"),
new CompanyData("American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"),
new CompanyData("AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"),
new CompanyData("Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"),
new CompanyData("Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"),
new CompanyData("Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"),
new CompanyData("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"),
new CompanyData("Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"),
new CompanyData("General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"),
new CompanyData("General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"),
new CompanyData("Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"),
new CompanyData("Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"),
new CompanyData("Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"),
new CompanyData("International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"),
new CompanyData("Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"),
new CompanyData("JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"),
new CompanyData("McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am"),
new CompanyData("Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"),
new CompanyData("Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"),
new CompanyData("Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"),
new CompanyData("The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"),
new CompanyData("The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"),
new CompanyData("The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"),
new CompanyData("United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"),
new CompanyData("Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"),
new CompanyData("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am")
};
}
}
}Now, here is the Ext.NET 2 equivalent:
ASPX:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Grid - Ext.NET Examples</title>
<style type="text/css">
.positive { color: green; }
.negative { color: red; }
</style>
<script type="text/javascript">
var template = '<span class="{0}">{1}</span>';
var change = function(value) {
return Ext.String.format(template, (value > 0) ? "positive" : "negative", value);
};
var pctChange = function(value) {
return Ext.String.format(template, (value > 0) ? "positive" : "negative", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="fit">
<Items>
<ext:GridPanel runat="server" Title="Simple Grid">
<Store>
<ext:Store runat="server" PageSize="10">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Company" Mapping="Name" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Change" Type="Float" />
<ext:ModelField Name="PctChange" Mapping="PercentChange" Type="Float" />
<ext:ModelField Name="LastChange" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="FinancialData.ashx">
<Reader>
<ext:JsonReader Root="Data" TotalProperty="TotalRecords" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1" />
<ext:Column runat="server" Text="Price" DataIndex="Price" Width="50">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="Change" Width="50">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="PctChange" Width="50">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="LastChange" Format="yyyy-MM-dd hh:mmtt" Width="130" />
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters runat="server" ID="GridFilters1" Local="true">
<Filters>
<ext:StringFilter DataIndex="Company" />
<ext:NumericFilter DataIndex="Price" />
<ext:NumericFilter DataIndex="Change" />
<ext:NumericFilter DataIndex="PctChange" />
<ext:DateFilter DataIndex="LastChange" />
</Filters>
</ext:GridFilters>
</Features>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
</body>
</html>public class FinancialData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
int start = Convert.ToInt32(context.Request["start"]);
int limit = Convert.ToInt32(context.Request["limit"]);
Paging<CompanyData> data = GetData(start, limit);
context.Response.Write(JSON.Serialize(data));
}
private Paging<CompanyData> GetData(int start, int limit)
{
var data = CompanyData.Data;
int numberToGet = start + limit > data.Count ? data.Count - start : limit;
return new Paging<CompanyData>(data.GetRange(start, numberToGet), data.Count);
}
public bool IsReusable
{
get { return false; }
}
}Steps to reproduce difference in behaviour:
For 1.x
- Load the 1.x page
- Filter on the company column - type in "American"
- Notice that there will be 2 results on page 1.
- Go to Page 2.
- Notice no results (that is fine)
- Notice also that pager is still enabled - you can go back and forward (this is good)
For 2.0 do the same, but notice for step 6, the pager is disabled after going to the next page.
I would expect 2.0 to work same as 1.x? Hopefully I've just missed a very simple thing to set or configure somewhere?
Last edited by Daniil; Jun 13, 2012 at 4:54 PM.
Reason: [CLOSED]
