SearchContext Client Events

11 posts, 1 answers
  1. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 09 Sep 2013 Link to this post

    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?
  2.
  3. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 09 Sep 2013 Link to this post

    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
  5. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 09 Sep 2013 Link to this post

    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.
  7. Bozhidar
    Admin
    Bozhidar avatar
    1192 posts

    Posted 12 Sep 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 15 Sep 2013 Link to this post

    Ok - I'll change it to a web service.
  11. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 18 Sep 2013 Link to this post

    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.
  13. Bozhidar
    Admin
    Bozhidar avatar
    1192 posts

    Posted 20 Sep 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  15. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 24 Sep 2013 Link to this post

    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;
    });

  17. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 24 Sep 2013 Link to this post

    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.
  19. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1192 posts

    Posted 25 Sep 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  21. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 25 Sep 2013 Link to this post

    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.
Back to Top