<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <style>
            .list li {
                display: inline-block;
            }

            .listelem {
                width: 75%;
            }

            .listelem2 {
                width: 20%;
            }

            html body .RadSearchBox.no-results .rsbInner {
                border-color: red;
            }
        </style>
        <ul class="list">
            <li class="listelem"></li>
            <li class="listelem2">
                <script>
                    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");
                        }
                    }
                    Telerik.Web.UI.RadSearchBox.prototype._onReflowed = function () {
                        var that = this;

                        var $animationContainer = $(that._dropDown._animationContainer);

                        if (that._enableScreenBoundaryDetection) {
                            var availableSpace = that._dropDown._getAvailableSpace();
                            var tableWidth = $(that._innerWrapElement).outerWidth();
                            var dropDownWidth = $animationContainer.outerWidth();
                            var overflow = dropDownWidth - (tableWidth + availableSpace.right);

                            if (overflow > 0) {
                                var left = parseInt($animationContainer.css("left"), 10);
                                var newLeft = Math.max(left - overflow, left - (dropDownWidth - tableWidth));

                                $animationContainer.css("left", newLeft);
                            }
                        }
                    }

                    function OnClientLoad(sender, args) {
                        sender._dropDown.on({ "reflowed": sender._onReflowed }, sender)
                    }
                </script>
                <telerik:RadSearchBox runat="server" ID="RadSearchBox1"
                    DataTextField="ShipName" OnClientLoad="OnClientLoad" DropDownSettings-Width="500px" DataValueField="OrderID">
                </telerik:RadSearchBox>
            </li>
        </ul>
    </form>
</body>
</html>
