May 25, 2010, 6:25 PM
Load GridPanel manually with RemotePaging (without AutoLoad)
Hello,
I'm using Remote Paging just like the example page below, but using DataTable instead of List<object> as data source:
please click on "Source Code" button
https://examples1.ext.net/#/GridPane...ilters_Remote/
My problem is that I don't want the grid to be initially filled (AUTOLOAD).
I need it to be loaded on a click event of a button, or in the page Load event, for example.
But if I change the store property AutoLoad="false", the grid appears EMPTY. It will be only loaded if you click on the "Refresh" button on the paging toolbar (which triggers the RefreshData event)
Here's my code. What's wrong?
I'm using Remote Paging just like the example page below, but using DataTable instead of List<object> as data source:
please click on "Source Code" button
https://examples1.ext.net/#/GridPane...ilters_Remote/
My problem is that I don't want the grid to be initially filled (AUTOLOAD).
I need it to be loaded on a click event of a button, or in the page Load event, for example.
But if I change the store property AutoLoad="false", the grid appears EMPTY. It will be only loaded if you click on the "Refresh" button on the paging toolbar (which triggers the RefreshData event)
Here's my code. What's wrong?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Paging.aspx.cs" Inherits="Prototipo.Paging"
Theme="Cabinet" %>
<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Import Namespace="Company.Prototipo" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Ext.IsAjaxRequest)
{
LoadGrid();
}
}
protected void Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
FiltersTestData obj = new FiltersTestData();
int totalCount = 0;
System.Data.DataTable rangeData = obj.GetSQLData(e.Start, e.Limit, out totalCount); //pagination on the stored procedure
e.TotalCount = totalCount;
this.Store1.DataSource = rangeData;
}
public void LoadGrid()
{
int start, limit, cont;
start = (String.IsNullOrEmpty(this.Store1.BaseParams["start"]) ? 0 : Convert.ToInt32(this.Store1.BaseParams["start"].ToString()));
limit = (String.IsNullOrEmpty(this.Store1.BaseParams["limit"]) ? 10 : Convert.ToInt32(this.Store1.BaseParams["limit"].ToString()));
this.Store1.DataSource = LoadGrid(start, limit, out cont);
this.Store1.DataBind();
this.GridPanel1.StoreID = this.Store1.ID;
this.GridPanel1.DataBind();
}
public System.Data.DataTable LoadGrid(int start, int limit, out int total_count)
{
Givaudan.Cabinet.Web.Prototipo.FiltersTestData obj = new Givaudan.Cabinet.Web.Prototipo.FiltersTestData();
System.Data.DataTable rangeData = obj.GetSQLData(start, limit, out total_count);
return rangeData;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example
</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" />
<h1>
GridPanel with Remote Filtering, Sorting and Paging</h1>
<p>
Please see column header menu for apllying filters</p>
<ext:Store runat="server" ID="Store1" AutoLoad="false" RemotePaging="true" OnRefreshData="Store1_RefreshData">
<Proxy>
<ext:DataSourceProxy />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="Id">
<Fields>
<ext:RecordField Name="cd_stor_cabi" />
<ext:RecordField Name="nm_stor_cabi" />
<ext:RecordField Name="cd_sale_orga" />
<ext:RecordField Name="ds_dirt_file_impt" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="10" Mode="Raw" />
<ext:Parameter Name="sort" Value="" />
<ext:Parameter Name="dir" Value="" />
</BaseParams>
</ext:Store>
<ext:Window ID="Window1" runat="server" Width="700" Height="400" Closable="false"
Collapsible="true" Title="Example" Maximizable="true">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:GridPanel runat="server" ID="GridPanel1" Border="false" StoreID="Store1">
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Code" DataIndex="cd_stor_cabi" Sortable="true" />
<ext:Column Header="Name" DataIndex="nm_stor_cabi" Sortable="true" />
<ext:Column Header="Sales Org." DataIndex="cd_sale_orga" Sortable="true" />
<ext:Column Header="Directory" DataIndex="ds_dirt_file_impt" Sortable="true" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<Plugins>
</Plugins>
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1"
DisplayInfo="true" />
</BottomBar>
</ext:GridPanel>
</ext:FitLayout>
</Body>
</ext:Window>
</body>
</html>
Thank you!!!