[CLOSED] Store to be client-side or server-side paginated upon the checkbox change
We have a screen in which we show a dropdown and a grid(along with Store). The drop-down will have couple of records and the user can select records and add to the grid. The grid in this case will need to have client-side pagination.
In the same screen, we have a checkbox called Display All. When the user checks this checkbox, the above drop-down shall be hidden and the grid will be cleared and then populated with 1st page of the record from the server. Here the pagination is server-side pagination.
The grid pagination will depend on checkbox. We tried to set RemotePaging(RemoteGroup) from the javascript on check/uncheck of checkbox. But the pagination is not working.
Could you please help me with some sample ?
The example is not working with MVC application
Hi Daniil,
The example is working fine. But our application is being developed using MVC. Here, I am unable to invoke DirectMethod. The moment I call DirectMethod, the application is throwing error.
Quote:
Originally Posted by
Daniil
Hi,
I would implement it this way.
1. Use two Stores.
2. Assign a respective Store'.
3. Re-render a GridPanel.
Example
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
public List<object> MyData = new List<object>
{
new { test = "test1" },
new { test = "test2" },
new { test = "test3" },
new { test = "test4" },
new { test = "test5" },
new { test = "test6" },
new { test = "test7" },
new { test = "test8" },
new { test = "test9" }
};
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = this.MyData;
store.DataBind();
}
}
protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
List<object> data = this.MyData;
var limit = e.Limit;
if ((e.Start + e.Limit) > data.Count)
{
limit = data.Count - e.Start;
}
List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
e.Total = data.Count;
(sender as Store).DataSource = rangeData;
}
[DirectMethod]
public void ChangePaging(bool remote)
{
if (remote)
{
this.GridPanel1.Title = "Remote";
this.GridPanel1.StoreID = this.Store2.ID;
this.Store2.Call("load");
}
else
{
this.GridPanel1.Title = "Local";
this.GridPanel1.StoreID = this.Store1.ID;
}
this.GridPanel1.Render();
}
</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 runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store
ID="Store2"
runat="server"
OnRefreshData="Store_RefreshData"
AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="3" Mode="Raw" />
</BaseParams>
</ext:Store>
<ext:Container
runat="server"
Width="500"
Height="200"
Layout="FitLayout">
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
Title="Local">
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar runat="server" PageSize="3" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Container>
<ext:Checkbox runat="server">
<Listeners>
<Check Handler="Ext.net.DirectMethods.ChangePaging(checked);" />
</Listeners>
</ext:Checkbox>
</form>
</body>
</html>
