SearchContext Client Events

[John]

I need to be able to detect, on the client, when the SearchContext selected item has changed. Is there a client event that fires when the user selects an item from the SearchContext dropdown?

[MasterChiefMasterChef]

Hi John,

For the SearchContext feature of the RadSearchBox, you can easily implement your own event to fire when the user changes their selection. There is a good example of data binding on the client side here in the documentation. This event will now return the selected row in the search context box. 

Good luck,
Chef Master Chief

[John]

At this point, I can't get that to work. I'm binding the list of items, for the SearchContext object, on the server-side via an ADO DataTable (dt) object. I'm using:

With radSearchBox.SearchContext
        .DataSource = dt
        .DataTextField = "FieldDescription"
        .DataKeyField = "ID"
        .OnClientItemDataBound = "OnClientItemDataBound"
        .DataBind()
End With

The "OnClientItemDataBound" event in my client script file never fires. Other functions in the same client script file related to other Telerik controls fire correctly. I'm obviously missing something.

[Bozhidar]

Hello John,

The OnClientItemDataBound event fires only if you are binding the SearchContext through WebService or OData - in other words on the client. Since you are using server-side binding, the event won't be triggered.
 
Regards,
Bozhidar
Telerik

[John]

Ok - I'll change it to a web service.

[John]

Successfully got the SearchContext items of a RadSearchBox to load from a WFC service (.svc). However, still unable to detect, on the client, when the user changes selections using the drop down. Any suggestions? The only event I see for the SearchContext object is "OnClientItemDataBound" and it's not getting called at all. If I enter an event defined in my JavaScript code, Visual Studio burps and states that the event is not a member of my page's class. I just need to know if it's possible to detect, on the client, when the user changes selections in the SearchContext dropdown control. I need to set some script var values when this happens.

[Bozhidar]

Hi John,

In the current version of the SearchContext there aren't any predefined client events, however you can use some simple javascript to catch the click event of the item:

function pageLoad() {
    $telerik.$(".rsbListItem").on("click", function(e) {
        var item = Telerik.Web.UI.RadSearchBox._getTarget(e)._item;
    });
}

 
Regards,
Bozhidar
Telerik

[John]

Hi Bozhidar,

I added the code you supplied to the pageLoad event. However, the "click" event for the list item(s) is not being attached/called. It has to be something with the control being reset? I've also tried adding the "click" function in the PageLoaded event (below) to no avail.

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoaded);

function PageLoaded(sender, args) {
  $telerik.$(".rsbListItem").on("click", function (e) {
  e.preventDefault();
   var item = Telerik.Web.UI.RadSearchBox._getTarget(e)._item;
});

[John]

It appears that the list items, possibly due to the fact that they are created on the fly and must wait for the return of the web service data (asynchronous call?), are not available, even after the page has been officially "loaded". I can witness this occurring using Chrome's DevTools debugger. jQuery's delegate "on" is not attaching to the list items. Is there anyway to detect, on the client, when the list items are finished being created? I just find it hard to believe that it's this difficult to simply determine when a user changes their selection in a control, regardless if it's dynamically created.

[Bozhidar]

Hello John,

Here's the modified code, which should work in all cases:

function pageLoad() {
    $telerik.$(".rsbPopup ").on("click", ".rsbListItem", function (e) {
        e.preventDefault();

        var itemData = Telerik.Web.UI.RadSearchBox._getTarget(e)._data;
        console.log(itemData.text);
    });
}

The itemData object contains all of the items properties, like text, value and all the properties that are specified by the DataKeyNames property.
 
Regards,
Bozhidar
Telerik

[John]

Thank you so much. This solution appears to work. I did have to change it to:

var listItem = Telerik.Web.UI.RadSearchBox._getTarget(e)._item;
var listItemID = listItem._properties._data.key;
var listItemValue = listItem._properties._data.text;

to get the key and text of the item selected.