Grid - HtmlChart in Grid column

CompanyNameContactNameContactTitleOrdersPerProduct
Page size:
 91 items in 31 pages
Alfreds FutterkisteMaria AndersSales Representative
Ana Trujillo Emparedados y heladosAna TrujilloOwner
Antonio Moreno TaqueríaAntonio MorenoOwner
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The example demonstrates how to embed RadHtmlChart controls in a template column of RadGrid. The data source of the charts are set in the ItemDataBound event handler of the grid depending on the corresponding item's data.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.HtmlChart.ApplicationScenarios.HtmlChartInGridColumn.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None"
            OnItemDataBound="RadGrid1_ItemDataBound" AllowPaging="True" PageSize="3" AllowSorting="True">
            <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="CustomerID">
                <Columns>
                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName"
                        UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName"
                        UniqueName="ContactName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle"
                        UniqueName="ContactTitle">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn DataField="CustomerID" UniqueName="ChartColumn" HeaderText="OrdersPerProduct">
                        <ItemTemplate>
                            <div style="width: 400px; height: 170px;">
                                <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400" Height="170">
                                    <Legend>
                                        <Appearance Visible="false">
                                        </Appearance>
                                    </Legend>
                                    <PlotArea>
                                        <Series>
                                            <telerik:BarSeries DataFieldY="quantity">
                                                <LabelsAppearance Visible="false">
                                                </LabelsAppearance>
                                                <TooltipsAppearance Color="White" />
                                            </telerik:BarSeries>
                                        </Series>
                                        <XAxis DataLabelsField="pName">
                                        </XAxis>
                                    </PlotArea>
                                </telerik:RadHtmlChart>
                            </div>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        </telerik:RadGrid>
    </div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle] FROM [Customers]"></asp:SqlDataSource>

    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT top 5 p.ProductName as pName, p.ProductID as pID, od.Quantity as quantity 
            FROM orders as o, [order details] as od, products as p 
            WHERE od.ProductID = p.ProductID and od.OrderID = o.OrderID and CustomerID = @CustomerID">
        <SelectParameters>
            <asp:Parameter Name="CustomerID"></asp:Parameter>
        </SelectParameters>
    </asp:SqlDataSource>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?