PDA

View Full Version : [CLOSED] ListFilter Update items



cwolcott
Nov 15, 2014, 4:46 PM
Below is an example of a ListFilter populated via a store. There are two buttons that will attempt to reload the store with 3 items (full) or 2 items (partial). After reloading the store how do I tell the filter to refresh?

Follow these steps:

Launch example
Look at the ListFilter for Category, it should have 2 items.
Press the "Update (Full)" button
Look at the ListFilter again , it might have 3 items but most likely it still shows 2.
Drag the Category column to the first column.
Look at the ListFilter again and it will have 3 items.




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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridStore.DataSource = new object[]
{
new object[] { 1, "Baseline", "Training Guide"},
new object[] { 2, "Reference", "How to ..."},
new object[] { 3, "Archive", "Training Guide (1983)"},
};
this.GridStore.DataBind();
BuildCategoryStore(false);

}
}

protected void UpdateFull(object sender, DirectEventArgs e)
{
BuildCategoryStore(true);
}

protected void UpdatePartial(object sender, DirectEventArgs e)
{
BuildCategoryStore(false);
}

private void BuildCategoryStore(Boolean full)
{

List<object> data = new List<object>
{
new { Cat = "Baseline", IsActive = true, CatCombined = "Baseline" },
new { Cat = "Reference", IsActive = true, CatCombined = "Reference" },
};

if (full)
{
object storeData = new { Cat = "Archive", IsActive = false, CatCombined = "Archive <font color=red><i>(Inactive)</i></font>" };
data.Add(storeData);
}

this.CategoryStore.DataSource = data;
this.CategoryStore.DataBind();

}
</script>
<head runat="server">
<title>ListFiler Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel runat="server">
<Bin>
<ext:Store ID="CategoryStore" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Cat">
<Fields>
<ext:ModelField Name="id" Mapping="Cat" Type="String" />
<ext:ModelField Name="IsActive" Type="Boolean" />
<ext:ModelField Name="CatCombined" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
<Store>
<ext:Store ID="GridStore" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Category" Type="String" />
<ext:ModelField Name="Title" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Id" DataIndex="Id" Width="50" />
<ext:Column runat="server" Text="Category" DataIndex="Category" Width="120" />
<ext:Column runat="server" Text="Title" DataIndex="Title" Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" />
</SelectionModel>
<Features>
<ext:GridFilters ID="GridFilters" runat="server" Local="true">
<Filters>
<ext:ListFilter DataIndex="Category" StoreID="CategoryStore" LabelField="CatCombined"
IDField="id" />
</Filters>
</ext:GridFilters>
</Features>
</ext:GridPanel>
<ext:Button runat="server" Text="Update (Full)" OnDirectClick="UpdateFull" />
<ext:Button runat="server" Text="Update (Partial)" OnDirectClick="UpdatePartial" />
</body>
</html>

cwolcott
Nov 17, 2014, 12:27 AM
After reading some additional threads I came up with this example:

Update GridFilters ListFilter Store Server-Side (http://forums.ext.net/showthread.php?27642-CLOSED-Update-GridFilters-ListFilter-Store-Server-Side&p=123003&viewfull=1#post123003) and 2.3.0 Ext.NET - (Dynamic) GridPanel and Filter (http://forums.ext.net/showthread.php?26854-CLOSED-2-3-0-Ext-NET-(Dynamic)-GridPanel-and-Filter&p=119239&viewfull=1#post119239)

The buttons "Store Full | Filter Client" and "Store Partial | Filter Client" work great. They repopulate the store on the server side either with all or partial records. The filter is recreated on the client side.

The buttons "Store Full | Filter Server" and "Store Partial | Filter Server" also work, but they are not directly creating the filter on the server side. It is calling javascript directly. Is this the only or best way?



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridStore.DataSource = new object[]
{
new object[] { 1, "Baseline", "Training Guide"},
new object[] { 2, "Reference", "How to ..."},
new object[] { 3, "Archive", "Training Guide (1983)"},
};
this.GridStore.DataBind();
BuildCategoryStore(false);
}
}

protected void UpdateStoreAndFilter(object sender, DirectEventArgs e)
{
BuildCategoryStore(Convert.ToBoolean(e.ExtraParams["AllData"]));
if (Convert.ToBoolean(e.ExtraParams["FilterServer"]))
RebuildFilter();
}

private void BuildCategoryStore(Boolean full)
{
List<object> data = new List<object>
{
new { Cat = "Baseline", IsActive = true, CatCombined = "Baseline" },
new { Cat = "Reference", IsActive = true, CatCombined = "Reference" },
};

if (full)
{
object storeData = new { Cat = "Archive", IsActive = false, CatCombined = "Archive <font color=red><i>(Inactive)</i></font>" };
data.Add(storeData);
}

this.CategoryStore.DataSource = data;
this.CategoryStore.DataBind();
}

private void RebuildFilter()
{
//Is this the best approach?
X.Js.AddScript("rebuildFilter();");
}
</script>
<head runat="server">
<title>ListFiler Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel" runat="server" ClientIDMode="Static">
<Bin>
<ext:Store ID="CategoryStore" runat="server" ClientIDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Cat">
<Fields>
<ext:ModelField Name="id" Mapping="Cat" Type="String" />
<ext:ModelField Name="IsActive" Type="Boolean" />
<ext:ModelField Name="CatCombined" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
<Store>
<ext:Store ID="GridStore" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Category" Type="String" />
<ext:ModelField Name="Title" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Id" DataIndex="Id" Width="50" />
<ext:Column runat="server" Text="Category" DataIndex="Category" Width="120" />
<ext:Column runat="server" Text="Title" DataIndex="Title" Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" />
</SelectionModel>
<Features>
<ext:GridFilters ID="GridFilters" runat="server" ClientIDMode="Static" Local="true">
<Filters>
<ext:ListFilter DataIndex="Category" StoreID="CategoryStore" LabelField="CatCombined"
IDField="id" />
</Filters>
</ext:GridFilters>
</Features>
<HtmlBin>
<script type="text/javascript">
function rebuildFilter() {
App.GridFilters.filters.items[0].menu =
App.GridFilters.filters.items[0].createMenu({
dataIndex: 'Category',
grid: App.GridPanel,
idField: 'id',
labelField: 'CatCombined',
store: App.CategoryStore,
type: 'list'
});
}
</script>
</HtmlBin>
</ext:GridPanel>
<ext:ButtonGroup runat="server" Layout="HBoxLayout" >
<Items>
<ext:Button runat="server" Text="Store Full | Filter Client">
<DirectEvents>
<Click OnEvent="UpdateStoreAndFilter" Success="rebuildFilter();">
<ExtraParams>
<ext:Parameter Name="AllData" Value="true" Mode="Value" />
<ext:Parameter Name="FilterServer" Value="false" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Store Partial | Filter Client" Border="true">
<DirectEvents>
<Click OnEvent="UpdateStoreAndFilter" Success="rebuildFilter();">
<ExtraParams>
<ext:Parameter Name="AllData" Value="false" Mode="Value" />
<ext:Parameter Name="FilterServer" Value="false" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:ToolbarSeparator runat="server" />
<ext:Button runat="server" Text="Store Full | Filter Server?">
<DirectEvents>
<Click OnEvent="UpdateStoreAndFilter">
<ExtraParams>
<ext:Parameter Name="AllData" Value="true" Mode="Value" />
<ext:Parameter Name="FilterServer" Value="true" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Store Partial | Filter Server?">
<DirectEvents>
<Click OnEvent="UpdateStoreAndFilter">
<ExtraParams>
<ext:Parameter Name="AllData" Value="false" Mode="Value" />
<ext:Parameter Name="FilterServer" Value="true" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:ButtonGroup>
</body>
</html>

cwolcott
Nov 17, 2014, 1:13 PM
I guess I finally answered my own question this weekend. I think the best solution is to add a listener to the CategoryStore:



<Listeners>
<Load Fn="rebuildFilter" />
<Listeners>


Thus this will always rebuild the ListFilter associated with the Category whenever the store is loaded. No need to recreate on the server side since the filter is associated with the store, let the store control what and when it happens.

Please close the thread.