PDA

View Full Version : [CLOSED] Filtering in Store Load event doesn't work in complex pages



exe
Dec 08, 2014, 10:51 AM
Hello,
I've found out, that sometimes filtering a grid in a store's load event doesn't work, if the page is too complex. Maybe the filter method is called before the grid is rendered? The solution for me is to add Delay.

This is a working simple solution without Delay:



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

<script runat="server">

public class Company
{
public string Name { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{

}

private void Store1_OnReadData(object sender, StoreReadDataEventArgs e)
{
string add = e.Parameters["add"];

var companies = new List<Company>()
{
new Company { Name = "Heaven" },
new Company { Name = "Hell" }
};

if (add == "1")
{
companies.Add(new Company { Name = "Hell 666"});
}

this.Store1.DataSource = companies;
this.Store1.DataBind();
}

</script>

<!DOCTYPE html >

<html>
<head id="Head1" runat="server">
<title></title>
<ext:XScript runat="server">
<script type="text/javascript">
function filter() {
console.debug("Filtering");

var store = #{Store1};
var searchValue = "Hell";
var filters = [
new Ext.util.Filter({
filterFn: function (item) {
return item.get('Name').toLowerCase().indexOf(searchValue .toLowerCase()) > -1;
}
})
];

store.filter(filters);
}

function reload() {
var store = #{Store1};
store.reload({params: { add: 1 }});
}
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Container runat="server" ID="C1" Visible="True">
<Bin>
<ext:Store ID="Store1" runat="server" PageSize="20"
OnReadData="Store1_OnReadData"
>
<Model>
<ext:Model>
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Fn="filter"></Load>
</Listeners>
<Proxy>
<ext:PageProxy></ext:PageProxy>
</Proxy>
</ext:Store>

</Bin>

<Items>

<ext:GridPanel
IDMode="Static"
ID="GridPanel1"
runat="server"
Border="false"
StoreID="Store1"
Visible="True"
>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="Name" Header="Company"></ext:Column>
</Columns>
</ColumnModel>

<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Icon="Bomb" Text="Load other" OnClientClick="reload"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>

</ext:GridPanel>
</Items>
</ext:Container>
</form>
</body>
</html>


But if I insert this code into a page, where I have a lot of other code, the filtering method is called, but the grid remains unfiltered. So the solution is to Delay like this:



<Listeners>
<Load Fn="filter" Delay="100"></Load>
</Listeners>


It works for me. Is this a correct solution? Can I be sure, that the delay is big enough?

Thanks!

Daniil
Dec 08, 2014, 2:24 PM
Hi @exe,

I am not sure why it is not working for a complex page, so, it is difficult to say something certain.

Does it work with 1?

<Load Fn="filter" Delay="1" />

If it works, then I would say that Delay="1" is good enough.

Also you can try to filter in a GridPanel's ViewReady event instead of a Store's Load one.

exe
Dec 08, 2014, 2:57 PM
Yes, it works with 1 ms delay.

I've tried the ViewReady event, but it is not fired after every store.reload() call, only when the GridPanel is rendered for the first time.

Thanks!

Daniil
Dec 08, 2014, 3:31 PM
Ok, please use the Store's Load event with Delay="1".

We are here to help if any new issues appear.