[CLOSED] How to get KeyCode in beforeSelect Listener for ext:ComboBox

Hi,

The below code used to works great in ext.net 2.x version but breaking in ext.net 4.x version. Please find the code below:

<ext:ComboBox ID="cmbCustomerSearch" runat="server" Height="32" Width="200"
DisplayField="DisplayName" ValueField="ContactID" EnableKeyEvents="true"
TypeAhead="false" HideTrigger="true" MinChars="3" EmptyText="<%$ Resources: MMResource,Search%>" ForceSelection="false"
HideLabel="true" MaskRe="/[^<>^]/">
<Store>
<ext:Store runat="server" ID="stCustomerSearch" AutoLoad="false">
<Model>
<ext:Model ID="Model5" IDProperty="ID" runat="server">
<Fields>
<ext:ModelField Name="DisplayName" />
<ext:ModelField Name="ContactID" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<BeforeSelect Fn="disableSelectionOnEnter">
</BeforeSelect>
</Listeners>
</ext:ComboBox>

function disableSelectionOnEnter(e) {
if (Ext.EventObject) {
if (Ext.EventObject.keyCode == null && Ext.EventObject.type == "click")
return true;
else if (Ext.EventObject.keyCode == 13) {
if (c > 0)
return true;
return false;
}
else
return true;
} else {
//if (c > 0) { return true; }
return true;
}
}

In the above code we are getting Ext.EventObject as null with ext.net 4.x version.

Could you please help me out with a solution.

Thanks in advance.

Hello @iansriley!

I think you forgot to add [code][/code] tags around the code blocks you shared. Would you mind fixing that? It'd make the code look much more easier to be read.

Notwithstanding we'll take a look and try to figure out the scenario, or at least the objective, with what you provided, and return with a solution soon. It would help if there was a runnable code sample, though.

Sorry for that.. please find the runnable code below. The issue is, when enabled autocomplete for a combobox, after typing min chars we used to show the matching items in the combo, user can select one or hit the search action to get all matching records with query, but with 4.X version it's selecting the first item as a default and when clicks on Enter button/key then the default selected item is populating the control. We don't want this behaviour, when user enters a query text like test/abc/phlox (in below example) we need to show all matching records in the grid. This is working fine 2.5 v but not in 4.5.

Please find the below code and let us know the suggestions asap. I have taken the Examples: Form/ComboBox/Custom_Search/default.aspx

Code:

---

<%@ Page Language="C#" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        // Create Reader
        JsonReader reader = new JsonReader
        {
            RootProperty = "plants",
            TotalProperty = "total"
        };

        // Create Proxy
        AjaxProxy proxy = new AjaxProxy
        {
            Url = "Plants.ashx",
            Reader = { reader },
            ActionMethods =
            {
                Read = HttpMethod.POST
            }
        };

        Model model = new Model()
        {
            Fields = {
                new ModelField("Common"),
                new ModelField("Botanical"),
                new ModelField("Light"),
                new ModelField("Price", ModelFieldType.Float),
                new ModelField("Indoor", ModelFieldType.Boolean)
            }
        };

        // Add Proxy and Reader to Store
        Store store = new Store {
            Proxy = { proxy },
            Model = { model },
            AutoLoad = false
        };

        // Create ComboBox
        ComboBox combobox = new ComboBox
        {
            DisplayField = "Common",
            ValueField = "Common",
            TypeAhead = false,
            Width = 570,
            PageSize = 10,
            HideTrigger = true,
            ListConfig = new BoundList
            {
                LoadingText = "Searching..."
            },
            MinChars = 0,
            TriggerAction = Ext.Net.TriggerAction.Query,
            Store = { store }
        };

        combobox.ListConfig = new BoundList
        {
            ItemTpl = new XTemplate {
                Html = @"
                  <div class=""search-item"">
                    <h3><span>${Price}</span>{Common}</h3>
                    {Botanical}
                  </div>"
            }
        };

        // Add ComboBox to Controls Collection
        this.Placeholder1.Controls.Add(combobox);
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>ComboBox with Templates and AJAX - Ext.NET Examples</title>
    <style>
        .search-item {
            font          : normal 11px 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 {
            display    : block;
            font        : inherit;
            font-weight : bold;
            color      : #222;
            margin      :0px;
        }

        .search-item h3 span {
            float      : right;
            font-weight : normal;
            margin      : 0 0 5px 5px;
            width      : 100px;
            display    : block;
            clear      : none;
        }

        p { width: 650px; }

        .ext-ie .x-form-text { position : static !important; }
    </style>
    <link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>ComboBox with Templates and AJAX</h1>

        <p>This is a more advanced example demonstrating how to combine Store Paging and a Template to create "live search" functionality.</p>

        <div style="width:600px;">
            <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
            <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                <h3 style="margin-bottom:5px;">Search the plants</h3>

            <ext:ComboBox
                runat="server"
                DisplayField="Common"
                ValueField="Common"
                TypeAhead="false"
                Width="570"
                PageSize="10"
                HideTrigger="true"
                MinChars="0"
                TriggerAction="Query" Padding="10">
                <ListConfig  LoadingText="Searching...">
                    <ItemTpl runat="server">
                        <Html>
                            <div class="search-item">
                                <h3><span>${Price}</span>{Common}</h3>
                                {Botanical}
                            </div>
                        </html>                    </ItemTpl>
                </ListConfig>
                <Store>
                    <ext:Store runat="server" AutoLoad="false">
                        <Proxy>
                            <ext:AjaxProxy Url="Plants.ashx">
                                <ActionMethods Read="POST" />
                                <Reader>
                                    <ext:JsonReader RootProperty="plants" TotalProperty="total" />
                                </Reader>
                            </ext:AjaxProxy>
                        </Proxy>
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Common" />
                                    <ext:ModelField Name="Botanical" />
                                    <ext:ModelField Name="Light" />
                                    <ext:ModelField Name="Price" Type="Float" />
                                    <ext:ModelField Name="Indoor" Type="Boolean" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
            </ext:ComboBox>

            <div style="padding-top:4px;">
                Plants search (type '*' (asterisk) for showing all)
            </div>
            </div></div></div>
            <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
        </div>

    </form>
</body>

</html>

---

Please find the attached screenshot

Hello @iansriley!

Your code has errors in it, can you try running it locally? Maybe you're using a master page? I'm sure if you just try to run the code you provided, the error should pop up on your screen.

I think I may have an answer for you, but I'm pretty confused here.

- The thread topic says "how to get KeyCode in BeforeSelect listener".
- The code you shared later and context says you want to change the behavior of the combo box...

I guess you wanted to know how to get keycode to capture the keypresses and interrupt the selection that you're getting... If my guess is right, all you have to do is use the AutoSelect="false" setting in the combo box.

There was some issues with combo boxes in the past that I think they were related to this search and select of combo box entries, and this autoselect config was introduced as part of the solution. And it seems the default behavior changed from not selecting to selecting.

Well, hope this helps, else, let's clear the focus of this thread so we can effectively help you here.

Looking forward to your feedback!

Hello again, @iansriley!

It's been a while since we replied to your inquiry here, and still no feedback from you. Were we able to help you with the last reply we sent, or do you still need help with this?

We may mark this as closed provided no feedback is given in 7+ days from now -- but falter not, for we won't lock up the thread when we mark it as closed, so you'd be able to post again here whenever you feel like it.

Looking forward to your follow-up!