PDA

View Full Version : [CLOSED] pagingstore refresh



elke.schreiber
May 03, 2013, 2:32 PM
Hi
I have a page with a remote paging grid on this page.
I have also a search form for the user. And now I want update the grid with new search parameter.

Therefor I need the possiblitity to reset the pagingstore.
how can I do that?

Thanks for help.

Daniil
May 03, 2013, 3:18 PM
Hi @elke.schreiber,

Do you set up any kind of Proxy for the Store? If so, please try:

store.reload();


If no, you might need to call a server side method (DirectEvent/DirectMethod) and rebind the data.

store.DataSource = ...;
store.DataBind();

elke.schreiber
May 04, 2013, 8:42 AM
Hi @elke.schreiber,

Do you set up any kind of Proxy for the Store? If so, please try:

store.reload();


If no, you might need to call a server side method (DirectEvent/DirectMethod) and rebind the data.

store.DataSource = ...;
store.DataBind();

Hi

I create the store in page load on server side

Public Function CreateRemoteStorePaging(id As String, reader As Ext.Net.Model, pageSize As Integer) As Ext.Net.Store
Dim st As New Ext.Net.Store
st.PageSize = pageSize
st.IsPagingStore = True
st.ID = id
Dim p As New Ext.Net.PageProxy
st.Proxy.Add(p)
If Not IsNothing(reader) Then
st.Model.Add(reader)
End If
Return st
End Function

and add an store dataload handler

AddHandler store.ReadData, AddressOf Store_ReadData

Inside the function I get the data from database and bind it to the store.
This works and I can remote paging.

But I wont clear the grid and fire the "dataload" event from the store and get in the eventhanler new data with an other searchcondition from database.

my code looks like

Public Sub UpdateGrid()

'remove store
Me.GridPanelPermit.GetStore.Proxy.Clear()
Dim basestore = GridPanelPermit.GetStore
Me.GridPanelPermit.Store.Remove(basestore)
PagingToolbarOrder.ClearContent()
'create new store
Dim store As Ext.Net.Store = CreateRemoteStorePaging("PermitGridPanelStore", StoreGenerator.GridReader, 10)

store.Call("load")
GridPanelPermit.Store.Add(store)
Me.GridPanelPermit.Render()


End Sub

This produces a lot of java script errors, but it woks.
But Im not sure if it a good way to do that.
Did you know a better way?

Daniil
May 06, 2013, 4:58 AM
When you load a new set of data do you need to change a Store's Mode or a GridPanel's Columns?

elke.schreiber
May 06, 2013, 5:31 AM
When you load a new set of data do you need to change a Store's Mode or a GridPanel's Columns?

No. I don't change the column model.
I only want to reset the grid and fill with a new pagable Query.

Daniil
May 06, 2013, 6:00 AM
Nice. Did you try this?



Do you set up any kind of Proxy for the Store? If so, please try:

store.reload();


It should call an OnReadData handler where you should bind new data.

elke.schreiber
May 06, 2013, 7:37 AM
Nice. Did you try this?



It should call an OnReadData handler where you should bind new data.


Yes, I had tried it. The handler uses the new Query.
But when i am with the first Query on second paging side now the reload maks the new Query also on the second paging side.

Daniil
May 06, 2013, 8:07 AM
Do you mean that you see the same data for the first and second pages?

elke.schreiber
May 06, 2013, 8:09 AM
Do you mean that you see the same data for the first and second pages?

No, I mean that I see the data from the second query but the paging page is on the same page as the first query.

As example:

first query --> paging to sthe second page

second query result from the second page

Daniil
May 06, 2013, 8:12 AM
Hard to say what can be wrong. Could you, please, provide a test case?

elke.schreiber
May 06, 2013, 10:44 AM
Hard to say what can be wrong. Could you, please, provide a test case?


Hi Daniel,
yes it is hard to say what is wrong.

I think the better way is going back to my frist question :


pagingstore refresh

Hi
I have a page with a remote paging grid on this page.
I have also a search form for the user. And now I want update the grid with new search parameter.

Therefor I need the possiblitity to reset the pagingstore.
how can I do that?

Thanks for help.



Therefor I need the possiblitity to reset the pagingstore.
how can I do that?

Set set StoreReadDataEventArgs parameters back to e.limit to 0

Daniil
May 06, 2013, 11:51 AM
Please try the following.

store.reload({
params: {
start: 0,
limit: 10
}
});

elke.schreiber
May 07, 2013, 7:24 AM
Please try the following.

store.reload({
params: {
start: 0,
limit: 10
}
});

Hi Daniil,

next Question, I have on my page a directmethod which resets the grid.

How can I reset the pagingToolbar.
It looks like


<ext:PagingToolbar ID="PagingToolbarOrder" runat="server" PageSize="10"
DisplayInfo="true" >
<Items>
<ext:Label ID="Label1" runat="server" Text="<%$ Resources:CUSTRocheImport, PagerSize %>" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
<ext:ComboBox ID="ComboBox1" runat="server" Width="80">
<Items>
<ext:ListItem Text="2" />
<ext:ListItem Text="4" />
<ext:ListItem Text="10" />
</Items>
<SelectedItems>
<ext:ListItem Value="10" />
</SelectedItems>

<Listeners>
<Select Handler="#{GridPanelPermit}.store.pageSize = parseInt(this.getValue()); #{GridPanelPermit}.store.reload();" />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSpacer ID="ToolbarSpacer3" runat="server" Width="10" />
<ext:DisplayField ID="QueryDisplayField" runat="server" Text="" FieldCls="x-toolbar-text "></ext:DisplayField>
</Items>
</ext:PagingToolbar>

Daniil
May 07, 2013, 9:30 AM
Please clarify what you mean under resetting a PagingToolbar?

elke.schreiber
May 07, 2013, 10:23 AM
Please clarify what you mean under resetting a PagingToolbar?

Hi,

I have a grid with data and in :PagingToolbar I see on which actual page I'am and the total count.

Now I want to reset the grid. Clear the gridentries and clear the TotalCount.

Daniil
May 07, 2013, 1:34 PM
A Store's RemoveAll call looks enough.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" },
new object[] { "test4" },
new object[] { "test5" },
new object[] { "test6" },
new object[] { "test7" },
new object[] { "test8" },
new object[] { "test9" }
};
store.DataBind();
}
}

protected void Clear(object sender, DirectEventArgs e)
{
this.GridPanel1.GetStore().RemoveAll();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" PageSize="3">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>

<ext:Button runat="server" Text="Clear" OnDirectClick="Clear" />
</form>
</body>
</html>

elke.schreiber
May 08, 2013, 11:38 AM
A Store's RemoveAll call looks enough.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" },
new object[] { "test4" },
new object[] { "test5" },
new object[] { "test6" },
new object[] { "test7" },
new object[] { "test8" },
new object[] { "test9" }
};
store.DataBind();
}
}

protected void Clear(object sender, DirectEventArgs e)
{
this.GridPanel1.GetStore().RemoveAll();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" PageSize="3">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>

<ext:Button runat="server" Text="Clear" OnDirectClick="Clear" />
</form>
</body>
</html>



Hi Daniel,


you are right. It works for me too.
But, how I told you on the start of the tread I have a
Remote paging stored and for that it doesn't work.

Daniil
May 08, 2013, 11:53 AM
In a case with remote paging you can use an additional parameter, for example, a boolean "clear" parameter.

Example

<%@ 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 Store_ReadData(object sender, StoreReadDataEventArgs e)
{
bool clear = false;

if (e.Parameters["clear"] != null)
{
clear = JSON.Deserialize<bool>(e.Parameters["clear"]);
}

if (clear) {
e.Total = 0;
return;
}

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;
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" OnReadData="Store_ReadData" PageSize="3">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>

<ext:Button
runat="server"
Text="Clear"
Handler="App.GridPanel1.getStore().reload({ params: { clear: true }});" />

<ext:Button
runat="server"
Text="Load"
Handler="App.GridPanel1.getStore().reload({ params: { start: 0, clear: false }});" />
</form>
</body>
</html>

elke.schreiber
May 09, 2013, 7:00 PM
In a case with remote paging you can use an additional parameter, for example, a boolean "clear" parameter.

Example

<%@ 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 Store_ReadData(object sender, StoreReadDataEventArgs e)
{
bool clear = false;

if (e.Parameters["clear"] != null)
{
clear = JSON.Deserialize<bool>(e.Parameters["clear"]);
}

if (clear) {
e.Total = 0;
return;
}

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;
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" OnReadData="Store_ReadData" PageSize="3">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>

<ext:Button
runat="server"
Text="Clear"
Handler="App.GridPanel1.getStore().reload({ params: { clear: true }});" />

<ext:Button
runat="server"
Text="Load"
Handler="App.GridPanel1.getStore().reload({ params: { start: 0, clear: false }});" />
</form>
</body>
</html>


Hi Daniil,

yes that works.

But when I call reload in codebehind I get an Exception.



Dim param As New Ext.Net.Parameter
param.Name = "clear"
param.Value = CStr(True)
gridContactInternal.GetStore().Reload(param)


{"Error getting value from 'InnerHtml' on 'System.Web.UI.HtmlControls.HtmlForm'."}

at Newtonsoft.Json.Serialization.DynamicValueProvider .GetValue(Object target)
at Newtonsoft.Json.Serialization.JsonSerializerIntern alWriter.CalculatePropertyValues(JsonWriter writer, Object value, JsonContainerContract contract, JsonProperty member, JsonProperty property, JsonContract& memberContract, Object& memberValue)
at Newtonsoft.Json.Serialization.JsonSerializerIntern alWriter.SerializeObject(JsonWriter writer, Object value, JsonObjectContract contract, JsonProperty member, JsonContainerContract collectionContract, JsonProperty containerProperty)
at Newtonsoft.Json.Serialization.JsonSerializerIntern alWriter.SerializeValue(JsonWriter writer, Object value, JsonContract valueContract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerProperty)
at Newtonsoft.Json.Serialization.JsonSerializerIntern alWriter.SerializeObject(JsonWriter writer, Object value, JsonObjectContract contract, JsonProperty member, JsonContainerContract collectionContract, JsonProperty containerProperty)
at Newtonsoft.Json.Serialization.JsonSerializerIntern alWriter.SerializeValue(JsonWriter writer, Object value, JsonContract valueContract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerProperty)
at Newtonsoft.Json.Serialization.JsonSerializerIntern alWriter.SerializeObject(JsonWriter writer, Object value, JsonObjectContract contract, JsonProperty member, JsonContainerContract collectionContract, JsonProperty containerProperty)
at Newtonsoft.Json.Serialization.JsonSerializerIntern alWriter.SerializeValue(JsonWriter writer, Object value, JsonContract valueContract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerProperty)

Daniil
May 10, 2013, 3:49 AM
Please use the code tags to wrap the code.

You should pass a ParameterCollection to the Reload method.

Example C#

Ext.Net.Parameter param = new Ext.Net.Parameter();
param.Name = "clear";
param.Value = true.ToString();
GridPanel1.GetStore().Reload(new Ext.Net.ParameterCollection() { param });

or an object like this.

Example C#

GridPanel1.GetStore().Reload(new
{
@params = new
{
clear = true
}
});

elke.schreiber
May 10, 2013, 7:20 AM
Please use the code tags to wrap the code.

You should pass a ParameterCollection to the Reload method.

Example C#

Ext.Net.Parameter param = new Ext.Net.Parameter();
param.Name = "clear";
param.Value = true.ToString();
GridPanel1.GetStore().Reload(new Ext.Net.ParameterCollection() { param });

or an object like this.

Example C#

GridPanel1.GetStore().Reload(new
{
@params = new
{
clear = true
}
});

Hi Daniil,

thanks, now it works a little bit better.

But if I load the grid -> move to page 2 from pagingstore
reset the grid and now I load the grid again the grid starts from page 2.

How can I make that the new load starts from page 1

Daniil
May 10, 2013, 7:32 AM
The answer is here.

App.GridPanel1.getStore().reload({ params: { start: 0, clear: false }});

You should pass "start: 0".

elke.schreiber
May 11, 2013, 8:05 AM
The answer is here.

App.GridPanel1.getStore().reload({ params: { start: 0, clear: false }});

You should pass "start: 0".

Thanks for your help.
Now it works for all my grids