The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Mapping text in ListFilter

  1. #1

    [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

    <%@ 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>
    Last edited by fabricio.murta; Jul 31, 2018 at 2:31 PM.
  2. #2
    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.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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

    <%@ 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>
  4. #4
    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:

    <%@ 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!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Is working ok with that code, that's what we needed

    Thanks
  6. #6
    Hello, @opendat2000!

    Glad it worked for you, and thank you very much for your feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Dec 14, 2012, 10:49 AM
  2. Gridpanel, server mapping
    By myaso in forum 2.x Help
    Replies: 4
    Last Post: Nov 29, 2012, 12:59 AM
  3. Problem of Field Mapping
    By howardyin in forum 2.x Help
    Replies: 1
    Last Post: Jul 20, 2012, 2:46 AM
  4. ListFilter_Remote with Mapping
    By howardyin in forum 2.x Help
    Replies: 0
    Last Post: Apr 28, 2012, 4:03 AM
  5. Replies: 2
    Last Post: Mar 07, 2011, 1:54 PM

Posting Permissions