Possible to change box's color if no results?

[Alex]

I find that the user doesn't get enough feedback when a search is conducted and returns no results. Is there a way to highlight this (non) event?

[Peter Milchev]

Hello Alex, 

As I have answered in your other thread (Would like to inform user when search returns no results), the SearchBox does not have public client-side events that are fired when the response is received from the server.

Nevertheless, the following JavaScript workaround can be used to check the response of the server and notify the client if there are no results:

<style>
    html body .RadSearchBox.no-results .rsbInner {
        border-color: red;
    }
</style>

<script type="text/javascript">
    var $ = $telerik.$;
    var oldOnCallbackResponse = Telerik.Web.UI.RadSearchBox.prototype._onCallbackResponse;
    Telerik.Web.UI.RadSearchBox.prototype._onCallbackResponse = function (response, args) {
        // call the default function
        oldOnCallbackResponse.call(this, response, args);

        var searchbox = this;
        var split = response.split("_$$_"),
            data = $.parseJSON(split[0]);

        if (!data.length) {
            searchbox.addCssClass("no-results");
            // notify user or style the SearchBox
        } else {
            searchbox.removeCssClass("no-results");
        }
    }
</script>

Regards,
Peter Milchev
Progress Telerik

[Alex]

I saw - thank you very much!

[Fit2Page]

Hi Peter,

 

The given method conflicts with other JQuery scrips in our environment. Obviously this line is causing this: var $ = $telerik.$;
Do you have a solution for this misbehavior?

 

Marc

 

[Peter Milchev]

Hello Marc,

One option is to set $ to $telerik.$ if $ is undefined: 

var $ = $ || $telerik.$;

Regards,
Peter Milchev
Progress Telerik

[Fit2Page]

Hi Peter,

 

I am loading data with client template. Everything in this function seems to be ignored in a way, even alerts are not shown:

 

Telerik.Web.UI.RadSearchBox.prototype._onCallbackResponse = function (response, args) {...etc.

 

Am I doing something wrong you think?

 

Marc

[Peter Milchev]

Hello Marc,

You can try applying the override in the OnClientLoad event handler.

<telerik:RadSearchBox runat="server"  OnClientLoad="OnClientLoad" ... >

function OnClientLoad(sender, args) {
    // insert workaround here
}

Regards,
Peter Milchev
Progress Telerik

[Fit2Page]

Hi Peter,

 

Unfortunately not working also....
Is it possible that you try create a working sample?

Marc

[Peter Milchev]

Hello Marc,

Attached is a sample project implementing the suggested approach along with the screen side boundary detection improvement from https://feedback.telerik.com/Project/108/Feedback/Details/242128-improve-radsearchbox-screen-side-boundary-detection:

Regards,
Peter Milchev
Progress Telerik

[Fit2Page]

Hi Peter,

 

Your solution is working, but not when the Searchbox uses a clienttemplate and is populated from a webservice.
I have tested and that is where the difference lies.
Do you have any more suggestions to get that working?

Marc

[Peter Milchev]

Hello Marc,

When the SearchBox is bound to a WebService, the _onWebServiceResponse should be overridden: 

var old_onWebServiceResponse = Telerik.Web.UI.RadSearchBox.prototype._onWebServiceResponse;
Telerik.Web.UI.RadSearchBox.prototype._onWebServiceResponse = function (sender, args) {
    // call the default function
    old_onWebServiceResponse.call(this, sender, args);

    var searchbox = this;
    var data = args.get_data();

    if (!data.length) {
        searchbox.addCssClass("no-results");
        // notify user or style the SearchBox
    } else {
        searchbox.removeCssClass("no-results");
    }
}

Regards,
Peter Milchev
Progress Telerik

[Fit2Page]

Yeah that works! Thanks Peter.