[CLOSED] Clearing ComboBox selection

  1. #1

    [CLOSED] Clearing ComboBox selection

    Hi,

    I'd like to carry over the default v1.7 behavior of a ComboBox in which the selected item would automatically become deselected in the dropdown when it expands the next time. Somehow, one or more items remain selected with MultiSelect set to "false" even after the the combo is reset. Please type in the asterisk character to reproduce the test case in IE11.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        public struct Company
        {
            public int CompanyID { get; set; }
            public string CompanyName { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
            public DateTime LastChange { get; set; }
        }
    
        private List<Company> TestData
        {
            get
            {
                var now = DateTime.Now;
                return new List<Company>
                {
                    new Company { CompanyID = 1, CompanyName = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = now },
                    new Company { CompanyID = 2, CompanyName = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = now },
                    new Company { CompanyID = 3, CompanyName = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = now },
                    new Company { CompanyID = 4, CompanyName = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = now },
                    new Company { CompanyID = 5, CompanyName = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = now },
                    new Company { CompanyID = 6, CompanyName = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = now },
                    new Company { CompanyID = 7, CompanyName = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = now },
                    new Company { CompanyID = 8, CompanyName = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = now },
                    new Company { CompanyID = 9, CompanyName = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = now },
                    new Company { CompanyID = 10, CompanyName = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = now },
                    new Company { CompanyID = 11, CompanyName = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = now },
                    new Company { CompanyID = 12, CompanyName = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = now },
                    new Company { CompanyID = 13, CompanyName = "Government Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = now },
                    new Company { CompanyID = 14, CompanyName = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = now },
                    new Company { CompanyID = 15, CompanyName = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = now },
                    new Company { CompanyID = 16, CompanyName = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = now },
                    new Company { CompanyID = 17, CompanyName = "International Business Machines", Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = now },
                    new Company { CompanyID = 18, CompanyName = "Johnson & Johnson", Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = now },
                    new Company { CompanyID = 19, CompanyName = "JP Morgan & Chase & Co", Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = now },
                    new Company { CompanyID = 20, CompanyName = "McDonald\"s Corporation", Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = now },
                    new Company { CompanyID = 21, CompanyName = "Merck & Co., Inc.", Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = now },
                    new Company { CompanyID = 22, CompanyName = "Microsoft Corporation", Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = now },
                    new Company { CompanyID = 23, CompanyName = "Pfizer Inc", Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = now },
                    new Company { CompanyID = 24, CompanyName = "The Coca-Cola Company", Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = now },
                    new Company { CompanyID = 25, CompanyName = "The Home Depot, Inc.", Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = now },
                    new Company { CompanyID = 26, CompanyName = "The Procter & Gamble Company", Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = now },
                    new Company { CompanyID = 27, CompanyName = "United Technologies Corporation", Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = now },
                    new Company { CompanyID = 28, CompanyName = "Verizon Communications", Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = now },
                    new Company { CompanyID = 29, CompanyName = "Wal-Mart Stores, Inc.", Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = now }
                };
            }
        }
    
        protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
        {
            var store = sender as Store;
            if (store == null) return;
    
            var filter = ComboBox1.RawText;
            var companies = TestData.OrderBy(r => r.CompanyName).ToList();
            if (!string.IsNullOrEmpty(filter) && filter != "*")
            {
                companies.RemoveAll(r => !r.CompanyName.ToLower().StartsWith(filter.ToLower()));
            }
    
            store.DataSource = companies;
            store.DataBind();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
        <style>
            .search-item {
                height: 24px;
                font: normal 10pt tahoma, arial, helvetica, sans-serif;
                padding: 3px 10px 3px 10px;
                /*border: 1px solid #fff;*/
                /*border-bottom: 1px solid #eeeeee;*/
                white-space: normal;
                color: #555;
            }
    
                .search-item h3 {
                    margin-top: 1px;
                    display: block;
                    font: inherit;
                    font-weight: normal;
                    color: #222;
                    text-overflow: ellipsis !important;
                    white-space: nowrap !important;
                    overflow: hidden !important;
                }
        </style>
        <script>
            var onSelect = function (combo, records, eOpts) {
               // These calls don't produce the desired behavior
                this.clearValue();
                this.reset();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:FormPanel
                        ID="FormPanel1"
                        runat="server">
                        <Items>
                            <ext:ComboBox runat="server" ID="ComboBox1" DisplayField="CompanyName" ValueField="CompanyID" TypeAhead="false" LoadingText="Searching..." HideTrigger="true"
                                ItemSelector="div.search-item" FieldLabel="Company" MinChars="1" MultiSelect="false">
                                <Store>
                                    <ext:Store runat="server" ID="Store1" AutoLoad="false" OnReadData="Store1_ReadData">
                                        <Proxy>
                                            <ext:PageProxy NoCache="true" />
                                        </Proxy>
                                        <Model>
                                            <ext:Model runat="server" IDProperty="CompanyID">
                                                <Fields>
                                                    <ext:ModelField Name="CompanyID" />
                                                    <ext:ModelField Name="CompanyName" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ListConfig runat="server">
                                    <ItemTpl runat="server">
                                        <Html>
                                            <tpl for=".">
                            <div class="search-item">
                                <h3><span>{CompanyName}</span></h3>
                             </div>
                         </tpl>
                                        </Html>
                                    </ItemTpl>
                                </ListConfig>
                                <Listeners>
                                    <Select Fn="onSelect" />
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Oct 01, 2015 at 12:35 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    Please try this:
    <Select Fn="onSelect" Delay="1" />
    var onSelect = function (combo, records, eOpts) {
        this.reset();
        delete this.picker.getSelectionModel().lastSelected;
    };
  3. #3
    Thanks, Daniil, that works! Please mark this thread as closed.

Similar Threads

  1. Combobox with force selection
    By dtamils in forum 1.x Help
    Replies: 5
    Last Post: Mar 28, 2012, 12:59 AM
  2. Replies: 4
    Last Post: Aug 11, 2011, 7:16 AM
  3. combobox value selection
    By vyasvyas in forum 1.x Help
    Replies: 6
    Last Post: Jan 23, 2009, 5:42 AM
  4. Replies: 7
    Last Post: Dec 11, 2008, 7:24 AM

Tags for this Thread

Posting Permissions