<%@ 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" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-containers">
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
<div class="demo-container no-bg ">
<div class="gridTitle">Customers</div>
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
OnPreRender="RadGrid1_PreRender" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged"
Width="392px" 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">
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ContactName" UniqueName="ContactName" HeaderText="Name"
EmptyDataText="&nbsp;" HeaderStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Country" UniqueName="Country" HeaderText="Country"
EmptyDataText="&nbsp;" HeaderStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="allSpentMoney" UniqueName="allSpentMoney" HeaderText="Spent Money"
EmptyDataText="&nbsp;" HeaderStyle-HorizontalAlign="Center">
<ItemStyle 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 class="demo-container no-bg size-medium">
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="SqlDataSource2" Width="600px" Height="400px">
<PlotArea>
<Series>
<telerik:BarSeries Name="Products" DataFieldY="spentMoney">
<TooltipsAppearance Color="White" 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>
</telerik:RadAjaxPanel>
</div>
<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>