Aug 14, 2013, 7:30 PM
[CLOSED] Ext.data.Store getTotalCount method reports 0 in GridPanel listeners
Hi,
Please help me understand the lifecycle of some of the grid panel events and possible workaround. In the code sample below, the number of records reported by the Store getTotalCount() method for the filter is zero if invoked from Grid's Render listener. You can replace the filter's store identity with the main store ID and it shouldn't change a thing. In a more involved and loaded scenario, the ViewReady call also reports zero records albeit not consistently. When debugging, both stores appear to be populated and data bound in the Page_Load method on the server before any client side code is executed. I haven't encountered this issue in 1.x. Please advise if more info is needed.
Please help me understand the lifecycle of some of the grid panel events and possible workaround. In the code sample below, the number of records reported by the Store getTotalCount() method for the filter is zero if invoked from Grid's Render listener. You can replace the filter's store identity with the main store ID and it shouldn't change a thing. In a more involved and loaded scenario, the ViewReady call also reports zero records albeit not consistently. When debugging, both stores appear to be populated and data bound in the Page_Load method on the server before any client side code is executed. I haven't encountered this issue in 1.x. Please advise if more info is needed.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
private DataTable TestData
{
get
{
var now = DateTime.Now;
var dataTable = new DataTable();
dataTable.Columns.AddRange(new DataColumn[] {
new DataColumn { ColumnName = "company", DataType = typeof(System.String) },
new DataColumn { ColumnName = "industry", DataType = typeof(System.String) },
new DataColumn { ColumnName = "price", DataType = typeof(System.Double) },
new DataColumn { ColumnName = "change", DataType = typeof(System.Double) },
new DataColumn { ColumnName = "pctChange", DataType = typeof(System.Double) },
new DataColumn { ColumnName = "lastChange", DataType = typeof(System.DateTime) },
new DataColumn { ColumnName = "visible", DataType = typeof(System.Boolean) },
});
var dataArray = new object[]
{
new object[] { "3m Co", "Conglomerates", 71.72, 0.02, 0.03, now, true },
new object[] { "Alcoa Inc", "Basic Materials", 29.01, 0.42, 1.47, now, true },
new object[] { "Altria Group Inc", "Consumer Goods", 83.81, 0.28, 0.34, now, true },
new object[] { "American Express Company", "Financial", 52.55, 0.01, 0.02, now, true },
new object[] { "American International Group, Inc.", "Financial", 64.13, 0.31, 0.49, now, false },
new object[] { "AT&T Inc.", "Technology", 31.61, -0.48, -1.54, now, false },
new object[] { "Boeing Co.", "Industrial", 75.43, 0.53, 0.71, now, false },
new object[] { "Caterpillar Inc.", "Industrial", 67.27, 0.92, 1.39, now, false },
new object[] { "Citigroup, Inc.", "Financial", 49.37, 0.02, 0.04, now, false },
new object[] { "E.I. du Pont de Nemours and Company", "Basic Materials", 40.48, 0.51, 1.28, now, false },
new object[] { "Exxon Mobil Corp", "Energy", 68.1, -0.43, -0.64, now, true },
new object[] { "General Electric Company", "Industrial", 34.14, -0.08, -0.23, now, true },
new object[] { "General Motors Corporation", "Consumer", 30.27, 1.09, 3.74, now, true },
new object[] { "Hewlett-Packard Co.", "Technology", 36.53, -0.03, -0.08, now, true },
new object[] { "Honeywell Intl Inc", "Industrial", 38.77, 0.05, 0.13, now, true },
new object[] { "Intel Corporation", "Technology", 19.88, 0.31, 1.58, now, false },
new object[] { "International Business Machines", "Technology", 81.41, 0.44, 0.54, now, false },
new object[] { "Johnson & Johnson", "Consumer", 64.72, 0.06, 0.09, now, false },
new object[] { "JP Morgan & Chase & Co", "Financial", 45.73, 0.07, 0.15, now, false },
new object[] { "McDonald\"s Corporation", "Consumer", 36.76, 0.86, 2.40, now, false },
new object[] { "Merck & Co., Inc.", "Consumer", 40.96, 0.41, 1.01, now, true },
new object[] { "Microsoft Corporation", "Technology", 25.84, 0.14, 0.54, now, false },
new object[] { "Pfizer Inc", "Consumer", 27.96, 0.4, 1.45, now, false},
new object[] { "The Coca-Cola Company", "Consumer", 45.07, 0.26, 0.58, now, true },
new object[] { "The Home Depot, Inc.", "Consumer", 34.64, 0.35, 1.02, now, true },
new object[] { "The Procter & Gamble Company", "Consumer", 61.91, 0.01, 0.02, now, true },
new object[] { "United Technologies Corporation", "Industrial", 63.26, 0.55, 0.88, now, true },
new object[] { "Verizon Communications", "Communications", 35.57, 0.39, 1.11, now, true },
new object[] { "Wal-Mart Stores, Inc.", "Consumer", 45.45, 0.73, 1.63, now, true }
};
foreach (object[] row in dataArray)
{
dataTable.LoadDataRow(row, true);
}
return dataTable;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var mainDataSource = this.TestData;
this.Store1.DataSource = mainDataSource;
this.Store1.DataBind();
mainDataSource.DefaultView.Sort = "industry ASC";
var industryTable = mainDataSource.DefaultView.ToTable(true, "industry");
StoreIndustry.DataSource = industryTable;
StoreIndustry.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Local Data Paging - Ext.NET Examples</title>
<script type="text/javascript">
var showTotalRecords = function (caller) {
var store = App.StoreIndustry;
var totalCount = store.getTotalCount();
if(totalCount==0)
Ext.Msg.alert(Ext.String.format("Called by {0}", caller), Ext.String.format("Total count is {0}", totalCount));
};
var showTotalRecordsX = function (caller) {
var store = App.StoreIndustry;
var totalCount = store.getTotalCount();
Ext.Msg.alert(Ext.String.format("Called by {0}", caller), Ext.String.format("Total count is {0}", totalCount));
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="StoreIndustry" runat="server" AutoLoad="true">
<Model>
<ext:Model runat="server" IDProperty="industry">
<Fields>
<ext:ModelField Name="industry" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Flex="1" SelectionMemory="false">
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="false" AutoLoad="true" PageSize="10">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="company">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="industry" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
<ext:ModelField Name="visible" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Industry" DataIndex="industry" Width="200">
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField ID="TextField2" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="change" />
<ext:Column ID="Column5" runat="server" Text="% Change" Width="100" DataIndex="pctChange" />
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
Format="HH:mm:ss" />
<ext:Column ID="Column6" runat="server" Text="Visible" DataIndex="visible" Align="Center">
<Renderer Handler="return (value) ? 'Yes':'No';" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
</SelectionModel>
<Features>
<ext:GridFilters runat="server" Local="true">
<Filters>
<ext:ListFilter DataIndex="industry" LabelField="industry" IDField="industry" StoreID="StoreIndustry">
<Listeners>
<Deactivate Handler="Ext.Msg.alert('Prompt', 'De-Activated!');" />
<Activate Handler="Ext.Msg.alert('Prompt', 'Activated!');" />
<Update Handler="Ext.Msg.alert('Prompt', 'Updated!');" />
</Listeners>
</ext:ListFilter>
<ext:DateFilter DataIndex="lastChange">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:BooleanFilter DataIndex="visible">
</ext:BooleanFilter>
</Filters>
</ext:GridFilters>
</Features>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server">
<Items>
<ext:Button runat="server" Text="Show Total Records">
<Listeners>
<Click Handler="showTotalRecordsX('Click');">
</Click>
</Listeners>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
<Listeners>
<ViewReady Handler="showTotalRecords('ViewReady');" />
<Render Handler="showTotalRecords('Render');" />
</Listeners>
<View>
<ext:GridView ID="GridView1" runat="server">
<Listeners>
<BeforeRefresh Handler="showTotalRecords('BeforeRefresh');" />
</Listeners>
</ext:GridView>
</View>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Aug 16, 2013 at 1:33 PM.
Reason: [CLOSED]
