1 Attachment(s)
[CLOSED] How to load data on store and set Total of pagingtoolbar in client side for static direct method
Hi,
We are using Static direct methods to load data result on gridpanel using store. In this scenario we need to get the inputs from different controls (Search Criteria input controls) and send those to database and get data based on inputs, finally bind that data to gridpanel.
Controls are not access in STATIC direct method, we are preparing object in client side and sending that as parameter for that method, so we are able to load data using
Code:
App.direct.StaticBindData(optionalFilterValuesObj, storeParams, {
success: function (result) {
App.Store1.loadData(result.data);
App.GridPanel1.view.loadMask.hide();
}
});
but not able to set the Total for PageProxy, so that the pagination is not working.
Please suggest us like how we can set Total value to PageProxy of store ? are we doing in correct way to load data with static direct methods?
Please find the attached screen shot of result and issue.
Sample Code:
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PagingNSortingWithStaticDirect.aspx.cs"
Inherits="Ext.Net.Examples.RealtimeSamples.PagingNSortingWithStaticDirect" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 runat="server">
<title></title>
<script runat="server">
public class TestClass
{
public string company { get; set; }
public string Firstname { get; set; }
public string Lastname { get; set; }
public double price { get; set; }
public double change { get; set; }
public DateTime lastChange { get; set; }
public double pctChange { get; set; }
}
static int firstRecord = 0;
static int lastRecord = 100;
private static List<TestClass> TestData
{
get
{
DateTime now = DateTime.Now;
List<TestClass> testDataList = new List<TestClass>();
for (int i = firstRecord; i < lastRecord; i++)
{
testDataList.Add(new TestClass() { company = "3m Co " + i, price = 71.72 * i, change = 0.02 * i, pctChange = 0.03 * i, lastChange = now });
}
return testDataList;
}
}
[DirectMethod]
public static object StaticBindData(TestClass optionalFilterValuesObj, Dictionary<string, object> extraParams)
{
StoreRequestParameters prms = new StoreRequestParameters(extraParams);
firstRecord = (prms.Page - 1) * prms.Limit;
lastRecord = prms.Page * prms.Limit + 1;
List<TestClass> testData1 = null;
if (prms.SimpleSortDirection == Ext.Net.SortDirection.ASC)
testData1 = TestData.OrderBy(o => o.company).ToList();
else
testData1 = TestData.OrderByDescending(o => o.company).ToList();
int total = 100;
List<TestClass> data = testData1;
Ext.Net.X.Mask.Hide();
//return new Paging<TestClass>(data, total).SerializationObject();
return new { data, total };
}
</script>
<script language="javascript" type="text/javascript">
function loadResult() {
App.Store1.reload({ params: { start: 0, limit: parseInt(App.cmbPagesize.getValue(), 10), page: 1} });
}
function loadDataStatic(action, storeParams, p3) {
var optionalFilterValuesObj = new Object();
optionalFilterValuesObj.company = App.txtCompanyName.getValue();
optionalFilterValuesObj.Firstname = App.txtFirstName.getValue();
optionalFilterValuesObj.Lastname = App.txtLastName.getValue();
App.direct.StaticBindData(optionalFilterValuesObj, storeParams, {
success: function (result) {
App.Store1.loadData(result.data);
App.GridPanel1.view.loadMask.hide();
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:Store ID="Store1" runat="server" RemoteSort="true" PageSize="10" AutoLoad="false">
<Proxy>
<ext:PageProxy DirectFn="loadDataStatic" >
</ext:PageProxy>
</Proxy>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="10" Mode="Raw" />
</AutoLoadParams>
<Sorters>
<ext:DataSorter Property="company" Direction="ASC" />
</Sorters>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:ComboBox ID="cmbPagesize" runat="server">
<Items>
<ext:ListItem Value="5" Text="5" />
<ext:ListItem Value="10" Text="10" />
<ext:ListItem Value="20" Text="20" />
<ext:ListItem Value="50" Text="50" />
</Items>
<SelectedItems>
<ext:ListItem Value="10" Text="10" />
</SelectedItems>
<Listeners>
<Select Handler="#{Store1}.pageSize = parseInt(this.getValue(), 10); loadResult();" />
</Listeners>
</ext:ComboBox>
<ext:TextField ID="txtCompanyName" runat="server" FieldLabel="Company" />
<ext:TextField ID="txtFirstName" runat="server" FieldLabel="Firstname" />
<ext:TextField ID="txtLastName" runat="server" FieldLabel="Lastname" />
<ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="320"
ButtonAlign="Center" StoreID="Store1">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField ID="TextField2" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="change" />
<ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="pctChange" />
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="85" DataIndex="lastChange"
Format="HH:mm:ss" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" Weight="100" StoreID="Store1" />
</BottomBar>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Load">
<Listeners>
<Click Handler="loadResult();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</div>
</form>
</body>
</html>
