<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SliderTooltip.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" %>
<%@ Register Src="~/Footer.ascx" TagPrefix="my" TagName="Footer" %>
<%@ Register Src="~/Header.ascx" TagPrefix="my" TagName="Header" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .tooltip
        {
            width: 320px;
        }
        
        .tooltip .id
        {
            color:Red;
        }
        
        .tooltip .name
        {
            font-weight:bold;
        }
    </style>
</head>
<body style="background:#E3E3E3;">
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div style="width:1000px; margin:0 auto;">
        <my:Header ID="Header1" runat="server" />

        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="CustomersDS" Skin="Sunset"
            AllowPaging="true" PageSize="10">
            <MasterTableView DataKeyNames="CustomerID" ClientDataKeyNames="CustomerID">               
                <PagerStyle Mode="Slider" />
            </MasterTableView>
            <ClientSettings EnableRowHoverStyle="true">
            </ClientSettings>
        </telerik:RadGrid>

        <telerik:GridSliderTooltipExtender ID="GridSliderTooltipExtender1" runat="server"
            TargetControlID="RadGrid1" OnTooltipUpdate="GridSliderTooltipExtender1_ToolTipUpdate">
            <ToolTipManager Skin="Sunset" Width="335px" Height="130px" ShowDelay="100">                
            </ToolTipManager>
            <ToolTipTemplate>
                <div class="tooltip RadGrid_Telerik">
                    <table class="rgMasterTable" style="width:100%; border-spacing:0;">
                        <tr>
                            <th class="rgHeader" style="width:80px">
                                <span class="id"><%# Eval("CustomerID") %></span>
                            </th>
                            <th class="rgHeader" colspan="2">
                                <b><%# Eval("CompanyName") %></b>
                            </th>
                        </tr>
                        <tr>
                            <td rowspan="5" align="center">
                                <telerik:RadBinaryImage ID="CustomerPhotoImage" runat="server" AutoAdjustImageControlSize="false"
                                    DataValue='<%# Eval("Photo") %>' Width="80px" ResizeMode="Crop"/>
                            </td>
                            <td style="width:60px">
                                Name:
                            </td>
                            <td>
                                <span class="name"><%# Eval("ContactName") %></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                City:
                            </td>
                            <td>
                                <%# Eval("City") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Country:
                            </td>
                            <td>
                                <%# Eval("Country") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Phone:
                            </td>
                            <td>
                                <%# Eval("Phone") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Fax:
                            </td>
                            <td>
                                <%# Eval("Fax") %>
                            </td>
                        </tr>
                    </table>
                </div>
            </ToolTipTemplate>
        </telerik:GridSliderTooltipExtender>

        <asp:LinqDataSource ID="CustomersDS" runat="server"
            Select="new (CustomerID, CompanyName, ContactName, ContactTitle, City, Country, Phone, Fax, Photo)"
            ContextTypeName="CustomersDataContext" TableName="CustomerPhotos">
        </asp:LinqDataSource>

        <my:Footer ID="Footer1" runat="server"></my:Footer>
    </div>
    </form>
</body>
</html>
