Dec 08, 2014, 9:51 AM
[CLOSED] Filtering in Store Load event doesn't work in complex pages
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:
Thanks!
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!
Last edited by Daniil; Dec 08, 2014 at 2:32 PM.
Reason: [CLOSED]