SmartChart Templates

SmartChartPro supports ItemTemplate and EditItemTemplate templates that can be used to provide excellent control over the HTML generated by the control. This example uses the FixedBoxHeight property along with templates to render custom output.

<%@ Page language="c#" MasterPageFile="~/SampleCode/SamplesMasterPage.master" Inherits="SmartWebControls.SampleCode.ItemTemplate" CodeFile="ItemTemplate.aspx.cs" %>
<%@ Register TagPrefix="swc" Namespace="SmartWebControls" Assembly="SmartWebControls.SmartChart" %>
<asp:Content ID="content" runat="server" ContentPlaceHolderID="cphMain">
    <br />
            <style type="text/css">
                .header { FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: white; FONT-FAMILY: verdana; BACKGROUND-COLOR: navy }
                .item { FONT-WEIGHT: bold; FONT-SIZE: 8pt; FONT-FAMILY: verdana }
                .textboxHeader { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; BORDER-LEFT: black 0px solid; COLOR: white; BORDER-BOTTOM: black 0px solid; FONT-FAMILY: verdana; HEIGHT: 12px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: center }
                .textboxItem { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; VERTICAL-ALIGN: top; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid; FONT-FAMILY: verdana; HEIGHT: 12px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: center }
            </style>    
            <div id="divTitle">SmartChart Templates</div>
            <br />
            <div id="divInstructions">
                SmartChartPro supports ItemTemplate and EditItemTemplate templates that can be used to provide 
                excellent control over the HTML generated by the control.  This example uses the FixedBoxHeight property along with templates
                to render custom output.
            </div>
            <p /><swc:SmartChartPro id="SmartChart1" FixedBoxHeight="65" 
                title="HTML Templates" runat="server" AllowEditing="true" 
                AllowInserting="True" AllowDeleting="True"
                Height="400px" Width="632px" MaxTextLength="35" OutputType="Html" DataFields="title,name,state,orgname"
                DataTitleFields="add1,add2,city,zip,county,phone,notes" 
                DataNodeName="organization" DataKeyField="key"
                BoxColor="Beige" BoxTextColor="Navy" Font-Name="Verdana" Font-Size="8pt" TitleColor="MidnightBlue"
                MaxChildrenPerLevelGroup="6" XSpacing="20" DrawBorder="False" 
                BorderWidth="1px" DrawShadows="True"
                BoxGradient="True" ChartDepth="6" ShadowOffset="3" Font-Names="Verdana" Font-Bold="True"
                YSpacing="40" ShadowColor="LightGray" AllowDrillDown="True" 
                OnSmartChartItemCommand="SmartChart1_SmartChartItemCommand" OnSmartChartDeleting="SmartChart1_SmartChartDeleting">
                <EditItemTemplate>
                    <div align="center">
                        <table width="60%">
                            <tr>
                                <td colspan="2" class="header" style="text-align:left">Edit Item:</td>
                            </tr>
                            <tr>
                                <td class="item" align="left">
                                    <b>Title:</b>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtTitle" Runat="Server" Text='<%# DataBinder.Eval(Container.DataItem,"title") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td class="item" align="left">
                                    <b>Name:</b>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtName" Runat="Server" Text='<%# DataBinder.Eval(Container.DataItem,"name") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td class="item" align="left">
                                    <b>Org Name:</b>
                                </td>
                                <td>
                                    <asp:TextBox ID="txtOrgname" Runat="Server" Text='<%# DataBinder.Eval(Container.DataItem,"orgname") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td class="item" align="left">
                                    <b>State:</b>
                                </td>
                                <td>
                                    <asp:DropDownList ID="ddStates" Runat="server" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </EditItemTemplate>
                <ItemTemplate>
                    <div style="text-align:center;">
                        <div class="header"><%# DataBinder.Eval(Container.DataItem,"title") %></div>
                        <div class="item"><%# (DataBinder.Eval(Container.DataItem,"name") == String.Empty)?"&nbsp;":DataBinder.Eval(Container.DataItem,"name") %></div>
                        <div class="item"><%# (DataBinder.Eval(Container.DataItem,"orgname") == String.Empty)?"&nbsp;":DataBinder.Eval(Container.DataItem,"orgname") %></div>
                        <div class="item"><%# (DataBinder.Eval(Container.DataItem,"state") == String.Empty)?"&nbsp;":DataBinder.Eval(Container.DataItem,"state") %></div>
                        <div class="item"><a href="Link.aspx" class="item" onclick="event.cancelBubble=true;">More Details</a></div>
                    </div>
                </ItemTemplate>
            </swc:SmartChartPro>
</asp:Content>

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Xml;

namespace SmartWebControls.SampleCode {
    /// <summary>
    /// Summary description for OrgsTest2.
    /// </summary>
    public partial class ItemTemplate : System.Web.UI.Page {
    
        protected void Page_Load(object sender, System.EventArgs e) {
            this.SmartChart1.SmartChartTemplateItemDataBound += new EventHandler<SmartChartTemplateCommandEventArgs>(this.SmartChart1_SmartChartTemplateItemDataBound);
            this.SmartChart1.SmartChartUpdateCommand += new EventHandler<SmartChartTemplateCommandEventArgs>(this.SmartChart1_SmartChartUpdateCommand);

            if (!Page.IsPostBack) {
                string xmlPath = Server.MapPath("~/SampleCode/SmartChartPro/XML/Orgs2.xml");
                XmlDocument doc = new XmlDocument();
                doc.Load(xmlPath);
                SmartChart1.DataSource = doc;
                SmartChart1.DataBind();        
            }
        }

        private void SmartChart1_SmartChartUpdateCommand(object sender, SmartWebControls.SmartChartTemplateCommandEventArgs e) {
            //Get values from controls in EditItemTemplate
            TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle");
            TextBox txtName = (TextBox)e.Item.FindControl("txtName");
            TextBox txtOrgname = (TextBox)e.Item.FindControl("txtOrgname");
            DropDownList ddStates = (DropDownList)e.Item.FindControl("ddStates");

            //Insert/Update SmartChart source with EditTemplate controls' values
            XmlDocument doc = (XmlDocument)SmartChart1.DataSource;
            XmlNode node = doc.SelectSingleNode("//organization[@key='" + e.Item.DataKey + "']");
            if (node != null) {
                //Handle Update
                if (e.Item.Mode == SmartWebControls.SmartChartMode.Editing) {
                    node.Attributes["title"].Value = txtTitle.Text;
                    node.Attributes["name"].Value = txtName.Text;
                    node.Attributes["orgname"].Value = txtOrgname.Text;
                    node.Attributes["state"].Value = ddStates.SelectedValue;    
                //Handle Insert
                } else {
                    XmlElement newNode = doc.CreateElement("organization");
                    newNode.SetAttribute("key",Guid.NewGuid().ToString());
                    newNode.SetAttribute("title",txtTitle.Text);
                    newNode.SetAttribute("name",txtName.Text);
                    newNode.SetAttribute("orgname",txtOrgname.Text);
                    newNode.SetAttribute("state",ddStates.SelectedValue);
                    //Insert new child node...behavior can be changed by cutomizing template to allow user
                    //to select how they'd like the new node added
                    node.AppendChild(newNode);
                }
            }
            SmartChart1.DataSource = doc;
            SmartChart1.DataBind();
        }

        private void SmartChart1_SmartChartTemplateItemDataBound(object sender, SmartWebControls.SmartChartTemplateCommandEventArgs e) {
            //If an EditItemTemplate is being bound update the DropDownList control
            if (e.Item.ItemType == ListItemType.EditItem) {
                DropDownList dd = (DropDownList)e.Item.FindControl("ddStates");
                if (dd != null) {
                    dd.Items.Add(new ListItem("Select One:",String.Empty));
                    dd.Items.Add(new ListItem("Arizona","AZ"));
                    dd.Items.Add(new ListItem("California","CA"));
                    dd.Items.Add(new ListItem("Washington","WA"));
                    if (e.Item.DataItem != null) {
                        DataRowView row = (DataRowView)e.Item.DataItem;
                        ListItem li = dd.Items.FindByValue(row["state"].ToString());
                        if (li != null) li.Selected = true;
                    }
                }
            }
        }

        protected void SmartChart1_SmartChartDeleting(object sender, SmartChartEventArgs e)
        {
            
        }

        protected void SmartChart1_SmartChartItemCommand(object sender, SmartChartTemplateCommandEventArgs e)
        {
            if (e.Item.Mode == SmartChartMode.Editing)
            {
                //Response.Write(e.Item.Controls.Count.ToString());
            }
        }
}
}