<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.WebService.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="CustomerInfo.ascx" TagName="CustomerInfo" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        .title
        {
            display: block;
            font-weight: bold;
            text-decoration: underline;
            margin-top: 4px;
            margin-left: 0;
        }
        .info
        {
            color: black;
        }
    </style>
</head>
<body class="BODY">
    <form id="Form1" method="post" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Position="BottomCenter"
        Width="415px" Height="250px" Style="font-size: 18px; text-align: center; font-family: Arial;"
        HideEvent="ManualClose" RelativeTo="Element">
        <WebServiceSettings Method="GetToolTipData" Path="ToolTipWebService.asmx" />
    </telerik:RadToolTipManager>
    <h3>
        Load on demand - WebService</h3>
    <br />
    <h4>
        The tooltips below retrieve new data on every request. You can confirm this by examining
        the time which changes on every show.</h4>
    <br />
    <asp:Repeater runat="server" ID="Repeater1" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRepeater_ItemDataBound">
        <ItemTemplate>
            <div style="float: left" id="smallImage" runat="server">
                <div style="border: 1px solid #999999; margin: 5px; width: 90px; height: 110px; background-position: center;
                    background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "Img/Thumbs/{0}.jpg") %>');">
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
    <asp:Label runat="server" ID="InfoLabel" Visible="false" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID FROM [Customers] 
                    WHERE Country = 'Austria' OR Country = 'Belgium' OR 
                    Country = 'Canada'
                    "></asp:SqlDataSource>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h4>
        The tooltips below retrieve data only the first time they are shown. You can confirm
        this by examining the time which does not change on subsequesnt show.</h4>
    <br />

    <script type="text/javascript">

        function OnClientRequestStart(sender, args)
        {
            var currentToolTip = Telerik.Web.UI.RadToolTip.getCurrent();
            var contentElement = currentToolTip.get_contentElement();
            //cancel the event here according to the custom logic
            if (contentElement)
            {
                if (sender.get_id() == "<%=RadToolTipManager4.ClientID %>" || sender.get_id() == "<%=RadToolTipManager2.ClientID %>")
                {
                    args.set_cancel(true);
                    currentToolTip.set_contentElement(contentElement);
                }
            }
        }
    
    </script>

    <asp:Repeater runat="server" ID="Repeater2" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRepeater_ItemDataBound">
        <ItemTemplate>
            <div style="float: left" id="smallImage" runat="server">
                <div style="border: 1px solid #999999; margin: 5px; width: 90px; height: 110px; background-position: center;
                    background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "Img/Thumbs/{0}.jpg") %>');">
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
    <telerik:RadToolTipManager ID="RadToolTipManager2" OnClientRequestStart="OnClientRequestStart"
        runat="server" Position="BottomCenter" Width="415px" Height="250px" Style="font-size: 18px;
        text-align: center; font-family: Arial;" RelativeTo="Element" HideEvent="ManualClose">
        <WebServiceSettings Method="GetToolTipData" Path="ToolTipWebService.asmx" />
    </telerik:RadToolTipManager>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3>
        Load on demand - AJAX</h3>
    <h4>
        The tooltips below retrieve new data on every request. You can confirm this by examining
        the time which changes on every show.</h4>
    <br />
    <telerik:RadToolTipManager ID="RadToolTipManager3" runat="server" Position="BottomCenter"
        OnAjaxUpdate="OnAjaxUpdate" Width="415px" Height="250px" Style="font-size: 18px;
        text-align: center; font-family: Arial;" RelativeTo="Element" HideEvent="ManualClose">
    </telerik:RadToolTipManager>
    <asp:Repeater runat="server" ID="Repeater3" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRepeater_ItemDataBound">
        <ItemTemplate>
            <div style="float: left" id="smallImage" runat="server">
                <div style="border: 1px solid #999999; margin: 5px; width: 90px; height: 110px; background-position: center;
                    background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "Img/Thumbs/{0}.jpg") %>');">
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
    <asp:Label runat="server" ID="Label1" Visible="false" />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h4>
        The tooltips below retrieve data only the first time they are shown. You can confirm
        this by examining the time which does not change on subsequesnt show.</h4>
    <br />
    <asp:Repeater runat="server" ID="Repeater4" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRepeater_ItemDataBound">
        <ItemTemplate>
            <div style="float: left" id="smallImage" runat="server">
                <div style="border: 1px solid #999999; margin: 5px; width: 90px; height: 110px; background-position: center;
                    background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "Img/Thumbs/{0}.jpg") %>');">
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
    <telerik:RadToolTipManager ID="RadToolTipManager4" OnClientRequestStart="OnClientRequestStart"
        runat="server" Position="BottomCenter" Width="415px" Height="250px" Style="font-size: 18px;
        text-align: center; font-family: Arial;" RelativeTo="Element" OnAjaxUpdate="OnAjaxUpdate"
        HideEvent="ManualClose">
    </telerik:RadToolTipManager>
    </form>
</body>
</html>
