<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Overview.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/HtmlChart/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>
<title>ASP.NET Charting Demo | RadHtmlChart for AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
<div style="width: 975px;">
<div style="float: left; margin-right: 20px; width: 380px; text-align: center;">
<strong style="font: 16px/52px Arial,Helvetica,sans-serif">Customers</strong><br />
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
OnPreRender="RadGrid1_PreRender" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged"
Width="380px" Height="340px" GridLines="None" AllowMultiRowSelection="false"
PageSize="3" AllowPaging="true">
<MasterTableView DataSourceID="SqlDataSource1" Height="340px" DataKeyNames="CustomerID">
<Columns>
<telerik:GridTemplateColumn HeaderText="Photo" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Image ID="ImageCustomerPhoto" ImageUrl='<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>'
runat="server" Width="45" Height="55" AlternateText='<%# Eval("ContactName", "{0} photo") %>'>
</asp:Image>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID" HeaderText="CustomerID"
EmptyDataText="&nbsp;" Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ContactName" UniqueName="ContactName" HeaderText="Name"
EmptyDataText="&nbsp;" HeaderStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Country" UniqueName="Country" HeaderText="Country"
EmptyDataText="&nbsp;" HeaderStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="allSpentMoney" UniqueName="allSpentMoney" HeaderText="Spent Money"
EmptyDataText="&nbsp;" HeaderStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
</Columns>
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
</MasterTableView>
<FilterMenu EnableTheming="True">
<CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>
</FilterMenu>
<ClientSettings EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>
<PagerStyle Mode="NumericPages"></PagerStyle>
<HeaderStyle Height="52px"></HeaderStyle>
</telerik:RadGrid>
</div>
<div style="float: left; width: 575px;" class="qsf-ib">
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="575px" DataSourceID="SqlDataSource2"
Style="float: left;">
<PlotArea>
<Series>
<telerik:BarSeries Name="Products" DataFieldY="spentMoney">
<TooltipsAppearance DataFormatString="${0}"></TooltipsAppearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
</telerik:BarSeries>
</Series>
<XAxis DataLabelsField="pName">
<MinorGridLines Visible="false"></MinorGridLines>
<MajorGridLines Visible="false"></MajorGridLines>
</XAxis>
<YAxis>
<LabelsAppearance DataFormatString="${0}"></LabelsAppearance>
<MinorGridLines Visible="false"></MinorGridLines>
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false"></Appearance>
</Legend>
<ChartTitle Text="Money Spent Per Product">
</ChartTitle>
</telerik:RadHtmlChart>
</div>
<br class="qsf-clear-float" />
</div>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
</telerik:RadAjaxLoadingPanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT top 12 c.CustomerID, c.ContactName, c.Country, SUM(p.UnitPrice) AS allSpentMoney
FROM Products AS p, Orders AS o, [Order Details] AS od, Customers AS c
WHERE p.productID = od.productID AND od.OrderID = o.OrderID AND c.CustomerID = o.CustomerID
GROUP BY c.CustomerID, c.ContactName, c.Country"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT p.productId, p.ProductName AS pName, sum(p.UnitPrice) AS spentMoney, c.CustomerID AS cID, c.ContactName AS cName
FROM products AS p, orders AS o, [order details] AS od, customers AS c
WHERE p.productID = od.productID AND od.OrderID = o.OrderID AND c.CustomerID = o.CustomerID AND (c.CustomerID = @CustomerID)
GROUP BY c.CustomerID, c.ContactName, p.productID, p.ProductName">
<SelectParameters>
<asp:ControlParameter ControlID="RadGrid1" Name="CustomerID" DefaultValue="ALFKI" PropertyName="SelectedValue"></asp:ControlParameter>
</SelectParameters>
</asp:SqlDataSource>
</form>
</body>
</html>