This is a migrated thread and some comments may be shown as answers.

RadSearchBox OnClientSearch event

2 Answers 177 Views
SearchBox
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 06 Jul 2017, 03:53 PM

I have the RadSearchBox connected to a datasource through a web service with autocomplete functionality enabled.

After the user selects an item from the Searchbox drop down list, is there a way to have the OnClientSearch event fire only when the user clicks the RadSearchBox search button and not when the user selects an item from the drop down list or Enter is pressed?

Thanks in advance.

2 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 11 Jul 2017, 12:00 PM
Hello Kevin,

The described customization can be achieved with a workaround that overrides part of the code that handles the text entering and the dropdown item click mechanism. Here you go:

<script>
    function pageLoad() {
        var $T = Telerik.Web.UI;
        Telerik.Web.UI.RadSearchBox.prototype._onKeyDown = function (e) {
            var keyCode = e.keyCode,
                key = Sys.UI.Key,
                keyboardNavigator = this._keyboardNavigator;
 
            switch (keyCode) {
                case key.up:
                    {
                        e.preventDefault();
                        if (this.get_enableAutoComplete()) {
                            keyboardNavigator._updateHighlightedItem($T.HighlightItemDirection.Up);
                        }
                    }
                    break;
                case key.down:
                    {
                        e.preventDefault();
                        if (this.get_enableAutoComplete()) {
                            keyboardNavigator._updateHighlightedItem($T.HighlightItemDirection.Down);
                        }
                    }
                    break;
                case key.enter:
                    {
                        var itemData = null;
 
                        e.preventDefault();
                        if (this._highlightedItem) {
                            itemData = this._highlightedItem._data;
                            this._updateInputValue(itemData);
                        }
 
                        //this._raiseSearch(itemData);
                        this.clear();
                    }
                    break;
                case key.esc:
                    {
                        e.preventDefault();
                        this.get_inputElement().value = "";
                        this.clear();
                    }
                    break;
            }
 
 
            Telerik.Web.UI.RadSearchBox.prototype._onItemClick = function (e) {
                var target = Telerik.Web.UI.RadSearchBox._getTarget(e);
                // Telerik.Web.UI.RadSearchBox._toggleFocusedState.call(this, false, SEARCHBOX_FOCUSED_CLASSNAME);
                this._updateInputValue(target._data);
                //  this._raiseSearch(target._data);
                this.clear();
            }
        }
    }
 
    function OnClientSearch(sender, args) {
        console.log("OnClientSearch has been fired!");
    }
</script>
<telerik:RadSearchBox runat="server" ID="RadSearchBox2" OnClientSearch="OnClientSearch">
    <DropDownSettings Height="400" Width="300" />
</telerik:RadSearchBox>


Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kevin
Top achievements
Rank 1
answered on 18 Jul 2017, 04:56 PM
Thanks. It works great.
Tags
SearchBox
Asked by
Kevin
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or