[CLOSED] How to set multiple values for ListFilter on the client?

  1. #1

    [CLOSED] How to set multiple values for ListFilter on the client?

    Hi,

    I need to check off multiple values for the ListFilter menu on the client. Please suggest how to achieve that.
    I had some success using the code below, but it needs to be more robust and use the dataIndex property:

    var selectedOptions=["Option1", "Option2"];
    filter.menu.setSelected(selectedOptions);
    This call sets an individual value for the menu:

    filter.setValue([filter.dataIndex, selectedOptions[0]]);
    Last edited by Daniil; May 09, 2013 at 12:43 PM. Reason: [CLOSED]
  2. #2
    Hello!


    Sorry, I don't quite understand your requirements.

    Quote Originally Posted by vadym.f View Post
    Hi,

    I need to check off multiple values for the ListFilter menu on the client. Please suggest how to achieve that.
    I had some success using the code below, but it needs to be more robust and use the dataIndex property:

    var selectedOptions=["Option1", "Option2"];
    filter.menu.setSelected(selectedOptions);
    You need some method to select filter by DataIndex and set its value?

    Quote Originally Posted by vadym.f View Post
    This call sets an individual value for the menu:

    filter.setValue([filter.dataIndex, selectedOptions[0]]);
    As I see in this case using DataIndex doesn't make any difference. Or I miss something?
  3. #3
    I was just being curious if the setValue() method could be used to select multiple options. But apparently, I'd have to create an override for that.
  4. #4
    Yes, in your case it seems that you should extend it. If you will have any questions feel free to ask. We will keep this thread open.
  5. #5
    Quote Originally Posted by vadym.f View Post
    I was just being curious if the setValue() method could be used to select multiple options. But apparently, I'd have to create an override for that.
    I think it can be used to select multiple options.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" },
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var set = function () {
                var gridFilters = GridPanel1.filters,
                    listFilter = gridFilters.filters.get(0);
    
                listFilter.setValue(["test1", "test2"]);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
             <ext:Button runat="server" Text="Set values for ListFilter">
                <Listeners>
                    <Click Fn="set" />
                </Listeners>
            </ext:Button>
    
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:GridFilters runat="server" Local="true">
                        <Filters>
                            <ext:ListFilter DataIndex="test" Options="test1, test2, test3" />
                        </Filters>
                    </ext:GridFilters>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    But I don't understand the following. Could you, please, clarify?
    but it needs to be more robust and use the dataIndex property:
  6. #6
    Thanks guys, that was helpful!

    I was thinking along the lines of the example below whereby the list filter has the LabelField property defined. I wasn't clear on what arguments to pass to the setValue() method. But Daniil's code sample demonstrated that it indeed works well accepting an array of DataIndex matched values. You can mark this thread as closed.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Data" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { 1, "test1" },
                    new object[] { 2, "test2" },
                    new object[] { 3, "test3" },
                    new object[] { 1, "test4" },
                    new object[] { 2, "test5" },
                };
                store.DataBind();
    
                // Populate the list filter options
                var filterTable = new DataTable();
                filterTable.Columns.Add("StatusID", typeof(Int32));
                filterTable.Columns.Add("StatusName", typeof(String));
                filterTable.Rows.Add(new object[] { 1, "Active" });
                filterTable.Rows.Add(new object[] { 2, "Inactive" });
                filterTable.Rows.Add(new object[] { 3, "Unknown" });
                StoreFilterOptions.DataSource = filterTable;
                StoreFilterOptions.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var set = function () {
                var gridFilters = GridPanel1.filters,
                    listFilter = gridFilters.filters.get(0);
    
                listFilter.setValue([1, 3]);
                listFilter.setActive(true);
            };
    
            var valueStatusRenderer = function (value, metadata, record) {
                if (!Ext.isEmpty(record)) {
                    var statusId = record.get("StatusID");
    
                    switch (statusId) {
                        case 1:
                            value = "Active";
                            break;
                        case 2:
                            value = "Inactive";
                            break;
                        case 3:
                            value = "Unknown";
                            break;
                    }
                }
    
                return value;
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <ext:Button ID="Button1" runat="server" Text="Set values for ListFilter">
                <Listeners>
                    <Click Fn="set" />
                </Listeners>
            </ext:Button>
            <ext:Store ID="StoreFilterOptions" AutoLoad="true" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="StatusID">
                        <Fields>
                            <ext:RecordField Name="StatusID" />
                            <ext:RecordField Name="StatusName" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="StatusID" />
                                    <ext:RecordField Name="Desc" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="Status" DataIndex="StatusID">
                            <Renderer Fn="valueStatusRenderer" />
                        </ext:Column>
                        <ext:Column Header="Description" DataIndex="Desc">
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:GridFilters ID="GridFilters1" runat="server" Local="true">
                        <Filters>
                            <ext:ListFilter DataIndex="StatusID" LabelField="StatusName" StoreID="StoreFilterOptions" />
                        </Filters>
                    </ext:GridFilters>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by vadym.f; May 09, 2013 at 12:41 PM.
  7. #7
    Here is a related thread regarding Ext.NET v2:
    http://forums.ext.net/showthread.php?27868

Similar Threads

  1. Replies: 3
    Last Post: Dec 15, 2012, 8:13 PM
  2. [CLOSED] ListFilter values
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 23, 2012, 3:41 PM
  3. add multiple tab pages from Client side
    By Mahloujian in forum 1.x Help
    Replies: 0
    Last Post: Feb 24, 2012, 11:26 AM
  4. Selecting multiple values in Multiselect
    By masudcseku in forum 1.x Help
    Replies: 1
    Last Post: Nov 23, 2011, 7:26 AM
  5. Replies: 1
    Last Post: Jan 31, 2011, 7:45 AM

Tags for this Thread

Posting Permissions