RadGrid是一款功能强大的表格控件，可以帮助开发人员创建强大的数据编辑、统计和浏览的交互式应用程序，该产品包含在telerik公司下的多个界面套包产品里，这篇文章主要介绍Telerik UI for ASP.NET AJAX界面套包里的RadGrid表格控件，如何在该表格控件中的模板列里添加RadChart，该图表的数据源可以在ItemDataBound 事件里进行指定，图表用于表格中每行数据的图形直观显示，具体可以参考下面的代码：

 

Asp.NET代码如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="RadGrid1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"> 

</telerik:RadAjaxLoadingPanel>

<telerik:Header runat="server" ID="Header1" NavigationLanguage="C#"></telerik:Header>

<!-- content start -->

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None"

    OnItemDataBound="RadGrid1_ItemDataBound" AllowPaging="True" PageSize="3"

    Width="750px" 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>

                    <telerik:RadChart ID="RadChart1" runat="server" Width="350" Height="170"

                        ChartTitle-Visible="false" DataSourceID="SqlDataSource2" CreateImageMap="false">

                        <Series>

                            <telerik:ChartSeries Name="Orders" DataYColumn="quantity" DataLabelsColumn="pName">

                            </telerik:ChartSeries>

                        </Series>

                        <PlotArea Appearance-Dimensions-Margins="10,10,10,10" />

                        <Legend Visible="false"></Legend>

                    </telerik:RadChart>

                </ItemTemplate>

            </telerik:GridTemplateColumn>

        </Columns>

    </MasterTableView>

    <PagerStyle Mode="NextPrevAndNumeric" />

</telerik:RadGrid>

<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" />

    </SelectParameters>

</asp:SqlDataSource>

 

后台代码C#：

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

    if (e.Item is GridDataItem)

    {

        GridDataItem item = e.Item as GridDataItem;

        RadChart chart = item["ChartColumn"].FindControl("RadChart1") as RadChart;

        SqlDataSource2.SelectParameters[0].DefaultValue = item.GetDataKeyValue("CustomerID").ToString();

        chart.DataSource = SqlDataSource2.Select(DataSourceSelectArguments.Empty);

        chart.DataBind();

    }

}