PaginToolBar after configuring GRIDPANEL via metadata from server - MetaChange Listener on Store
Hi Everybody,
I'm referring to the following example
https://examples2.ext.net/#/GridPane..._with_handler/
I find that this is a very useful fast way to load data in grid.
I just added a PagingToolbar to navigate data faster
Code:
<BottomBar>
<ext:PagingToolbar
runat="server"
DisplayInfo="true"
DisplayMsg="Displaying records {0} - {1} of {2}"
EmptyMsg="No record to display" />
</BottomBar>
After I ask to change page via PagingToolBar a new call to the MetaChange listener is fired and view on data doesn't change.
Do I miss something in the logic ?
I tried to return only data and not metadata, to set a condition on executing MetaChange only on start but without any change
Code:
new StoreResponseData
{
Data = JSON.Serialize(data),
//MetaData = metaData
}.Return();
Here below my complete example follows
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Testing wonderful metachange way to conf and load GridPanel</title>
<script type="text/javascript">
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" StateID="Grid1" Stateful="true" runat="server" Region="Center"
Frame="true" Title="Testing data" Margins="0 0 0 0" Width="800"
Height="300">
<Store>
<ext:Store runat="server" RemoteSort="false" PageSize="10">
<Model>
<ext:Model runat="server" Name="MetaModel">
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="GetData.ashx" />
</Proxy>
<Listeners>
<MetaChange Handler="#{GridPanel1}.reconfigure(store, meta.columns);" />
</Listeners>
</ext:Store>
</Store>
<View>
<ext:GridView ID="GridView1" runat="server" LoadMask="false" StripeRows="true" TrackOver="true" />
</View>
<BottomBar>
<ext:PagingToolbar
runat="server"
DisplayInfo="true"
DisplayMsg="Displaying records {0} - {1} of {2}"
EmptyMsg="No record to display" />
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>
and the GetData.ashx file
Code:
<%@ WebHandler Language="C#" Class="DataHandling.GetData" %>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Ext.Net;
using System.Data;
/// <summary>
/// Summary description for GetData
/// </summary>
///
namespace DataHandling
{
public class GetData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
object data;
data = GetDataFromDB();
MetaConfig metaData = MetaConfig.From(data);
metaData.IDProperty = "ID";
metaData.Columns[0].Flex = 0;
metaData.Root = "data";
new StoreResponseData
{
Data = JSON.Serialize(data),
MetaData = metaData
}.Return();
}
public DataTable GetDataFromDB()
{
// load data from mydb
// return DrvSS_Parametri.getDataQuery("select * from mytable");
DataTable table = new DataTable();
table.Columns.Add("Id", typeof(int));
table.Columns.Add("Surname", typeof(string));
table.Columns.Add("Nick", typeof(string));
table.Columns.Add("Event Date", typeof(DateTime));
table.Rows.Add(25, "Johnson", "JD", DateTime.Now);
table.Rows.Add(50, "Frank", "FDK", DateTime.Now);
table.Rows.Add(10, "Jack", "JFK", DateTime.Now);
table.Rows.Add(21, "Bobby", "RFK", DateTime.Now);
table.Rows.Add(100, "The Dancers", "CZT", DateTime.Now);
table.Rows.Add(101, "The Dancers1", "CZT", DateTime.Now);
table.Rows.Add(102, "The Dancers2", "CZT", DateTime.Now);
table.Rows.Add(103, "The Dancers3", "CZT", DateTime.Now);
table.Rows.Add(104, "The Dancers4", "CZT", DateTime.Now);
table.Rows.Add(105, "The Dancers5", "CZT", DateTime.Now);
table.Rows.Add(106, "The Dancers6", "CZT", DateTime.Now);
table.Rows.Add(107, "The Dancers7", "CZT", DateTime.Now);
table.Rows.Add(108, "The Dancers8", "CZT", DateTime.Now);
table.Rows.Add(109, "The Dancers9", "CZT", DateTime.Now);
return table;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
thanks in advance
