[CLOSED] Mapping text in ListFilter

Hello
It is possible to map values in a "ext:ListFilter"?

We have a dataset with values 'Y' and 'N', in the GridPanel is mapped with Y=Si, and N=No, with a Renderer Handler in the column

But in the filter still appear 'Y' and 'N', and we want Y=Si, and N=No too

here is a example for ext.net 4.5.1.0

Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { this.Store1.DataSource = new object[] { new object[] { "Y" }, new object[] { "Y" }, new object[] { "Y" }, new object[] { "N" }, new object[] { "N" }, new object[] { "N" } }; Store1.DataBind(); } } </script> <!DOCTYPE html> <html> <head runat="server"> <title>Test</title> </head> <body> <ext:ResourceManager runat="server" /> <ext:Viewport runat="server" MarginSpec="0 0 10 0"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Center" Pack="Center" /> </LayoutConfig> <Items> <ext:GridPanel runat="server" Frame="true" Width="400" Height="295"> <Store> <ext:Store ID="Store1" runat="server"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="company" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Plugins> <ext:GridFilters runat="server" MenuFilterText="Filter" /> </Plugins> <ColumnModel runat="server"> <Columns> <ext:Column runat="server" Text="Company" DataIndex="company" Width="300"> <Renderer Handler="return ((value) == 'Y' ? 'Si' : 'No');" /> <Filter> <ext:ListFilter DataIndex="company" > <Listeners> <Deactivate Handler="this.menu.items.each(function (item) {item.setChecked(false);});" /> </Listeners> </ext:ListFilter> </Filter> </ext:Column> </Columns> </ColumnModel> </ext:GridPanel> </Items> </ext:Viewport> </body> </html>

Hello @opendat2000!

I believe there are some existing discussion around this aready in the forums, although it happened for some time now.

Please check out these two related forum threads:
- ListFilter with mappings
- Grid ListFilter with StoreID, ValueField?

I hope this helps! As at least the main discussion happened back in Ext.NET 1, it may be that what's applied there no longer is the case. If you find so, please let us know and we'll try to further help you with the issue.

I tried make it work with the examples from those threads but can't make it work

It is possible to use a LabelField in the filter, like this example? I created a new in the store for the maps, but doesn't show in the filter

Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { this.Store1.DataSource = new object[] { new object[] { "Y","Si" }, new object[] { "Y","Si" }, new object[] { "Y","Si" }, new object[] { "N","No" }, new object[] { "N","No" }, new object[] { "N","No" } }; Store1.DataBind(); } } </script> <!DOCTYPE html> <html> <head runat="server"> <title>Test</title> </head> <body> <ext:ResourceManager runat="server" /> <ext:Viewport runat="server" MarginSpec="0 0 10 0"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Center" Pack="Center" /> </LayoutConfig> <Items> <ext:GridPanel runat="server" Frame="true" Width="400" Height="295"> <Store> <ext:Store ID="Store1" runat="server"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="company" /> <ext:ModelField Name="map" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Plugins> <ext:GridFilters runat="server" MenuFilterText="Filter" /> </Plugins> <ColumnModel runat="server"> <Columns> <ext:Column runat="server" Text="Company" DataIndex="company" Width="300" > <Renderer Handler="return ((value) == 'Y' ? 'Si' : 'No');" /> <Filter> <ext:ListFilter DataIndex="company" LabelField="map" > <Listeners> <Deactivate Handler="this.menu.items.each(function (item) {item.setChecked(false);});" /> </Listeners> </ext:ListFilter> </Filter> </ext:Column> </Columns> </ColumnModel> </ext:GridPanel> </Items> </ext:Viewport> </body> </html>

Hello @opendat2000!

The second code sample you posted looks exactly the same of the initial one... Maybe you copy-pasted the wrong code.

Anyway, I'll show you what you need to do:

1. As discussed in the first thread linked to you in my last post, you need to create a store with the mappings.
Yes, a dedicated store which will contain just (in the case) Y, Si; N, No, nothing else. Just so we can show in the list filter a 'Si' or 'No' using its second field, and when applying the filter, refer to the first field in the store.

2. Feed the store with unique data to be the options.
If you just point to the main store, you will get a lot of Si, Si, Si, No, No, No in the list. Anyway, trying to point your main store won't help; after all, you don't have "Si/No" in it; you have just 'Y' and 'N', and are using a renderer to pretty-print the fields.

3. Point the ListFilter to the mapping store, determine which of its fields should be used as the displayed text and which other should be used as the actual value passed to the grid store's filter when applied.
This is the part that you missed, as far as I could see. You used 'LabelField' pointing to 'Map'. While it makes sense, it is just mapping one field into another, and if that was the case, you'd just better off not using any renderer and having that field in the column instead, right?

With this, you have all elements you were missing for the functionality to work. Now you can drop the "Si/No" field from your main store's fields and -also- use the store for the actual in-grid mapping of the values.

Adding all these elements (including the optional map mentioned in the line right above), you should have something like this in the end:

Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { // This is what it takes to implement the functionality: // A store with the fields' mapping, then point them through // idField and labelField. this.ListFilterMaps.DataSource = new object[] { new object[] { "Y","Si" }, new object[] { "N","No" } }; this.ListFilterMaps.DataBind(); this.Store1.DataSource = new object[] { new object[] { "Y" }, new object[] { "Y" }, new object[] { "Y" }, new object[] { "N" }, new object[] { "N" }, new object[] { "N" } }; this.Store1.DataBind(); } } </script> <!DOCTYPE html> <html> <head runat="server"> <title>Test</title> </head> <body> <ext:ResourceManager runat="server" /> <ext:Viewport runat="server" MarginSpec="0 0 10 0"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Center" Pack="Center" /> </LayoutConfig> <Items> <ext:GridPanel runat="server" Frame="true" Width="400" Height="295"> <Bin> <%-- Then have a store defining the fields. --%> <ext:Store ID="ListFilterMaps" runat="server"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="actual_value" /> <ext:ModelField Name="display_value" /> </Fields> </ext:Model> </Model> </ext:Store> </Bin> <Store> <ext:Store ID="Store1" runat="server"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="company" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Plugins> <ext:GridFilters runat="server" MenuFilterText="Filter" /> </Plugins> <ColumnModel runat="server"> <Columns> <ext:Column runat="server" Text="Company" DataIndex="company" Width="300"> <%-- Here we ensure we are mapping the values to actual values from the mapping store itself. --%> <Renderer Handler="return App.ListFilterMaps.findRecord('actual_value', value).data.display_value;" /> <Filter> <%-- And point the list filter to that store, and give the fields' roles. --%> <ext:ListFilter DataIndex="company" StoreID="ListFilterMaps" IDField="actual_value" LabelField="display_value"> <Listeners> <Deactivate Handler="this.menu.items.each(function (item) {item.setChecked(false);});" /> </Listeners> </ext:ListFilter> </Filter> </ext:Column> </Columns> </ColumnModel> </ext:GridPanel> </Items> </ext:Viewport> </body> </html>

Hope this helps!

Is working ok with that code, that's what we needed

Thanks

Hello, @opendat2000!

Glad it worked for you, and thank you very much for your feedback!