ASPX Code
<%@ Page language="c#" MasterPageFile="~/SampleCode/SamplesMasterPage.master" Inherits="SmartWebControls.SampleCode.ItemTemplate2" CodeFile="ItemTemplate2.aspx.cs" %>
<%@ Register TagPrefix="swc" Namespace="SmartWebControls" Assembly="SmartWebControls.SmartChart" %>
<asp:Content ID="content" runat="server" ContentPlaceHolderID="cphMain">
<br />
<style type="text/css">
.header { height:27px; 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>
<div id="divInstructions">
SmartChart supports custom ASP.NET templates that allow developers to control the HTML that is output. This example
demonstrates how templates can be used to add custom CSS and images into the chart dynamically.
</div>
<br />
<p /><swc:SmartChartPro id="SmartChart1" FixedBoxHeight="50" title="HTML Templates" runat="server" AllowInserting="True" AllowDeleting="True"
Height="400px" Width="800px" MaxTextLength="35" OutputType="Html" DataFields="title,name"
DataTitleFields="" DataNodeName="person" DataKeyField="id"
BoxColor="Beige" HighlightChildrenOnMouseOver="true" 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" AllowEditing="True" AllowDrillDown="True">
<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>
</table>
</div>
</EditItemTemplate>
<ItemTemplate>
<div style="text-align:center;">
<div class="header" style="vertical-align:middle;">
<img src='<%# GetImage(DataBinder.Eval(Container.DataItem,"title").ToString().ToLower()) %>' align="middle" />
<%# AdjustTitle(DataBinder.Eval(Container.DataItem,"title").ToString()) %>
</div>
<div class="item">Name: <br /><%# (DataBinder.Eval(Container.DataItem,"name") == String.Empty)?" ":DataBinder.Eval(Container.DataItem,"name") %></div>
</div>
</ItemTemplate>
</swc:SmartChartPro>
</asp:Content>
C# Code:
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 ItemTemplate2.
/// </summary>
public partial class ItemTemplate2 : System.Web.UI.Page {
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.SmartChart1.SmartChartUpdateCommand += new EventHandler<SmartChartTemplateCommandEventArgs>(this.SmartChart1_SmartChartUpdateCommand);
}
protected void Page_Load(object sender, System.EventArgs e) {
if (!Page.IsPostBack) {
string xmlPath = Server.MapPath("~/SampleCode/SmartChartPro/XML/OrgChart.xml");
XmlDocument doc = new XmlDocument();
doc.Load(xmlPath);
SmartChart1.DataSource = doc;
SmartChart1.DataBind();
}
}
protected string AdjustTitle(string title)
{
if (!String.IsNullOrEmpty(title))
{
if (title.Length > 10) title = title.Substring(0, 8) + "..";
}
return title;
}
public string GetImage(string title)
{
if (title.Contains("mgr") || title.Contains("cio"))
{
return "../Images/personIcon.png";
}
else if (title.Contains("designer"))
{
return "../Images/paintIcon.png";
}
else if (title.Contains("dba"))
{
return "../Images/dbIcon.png";
}
else if (title.Contains("developer"))
{
return "../Images/csharpIcon.png";
}
else
{
return "../Images/personIcon2.png";
}
}
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");
//Insert/Update SmartChart source with EditTemplate controls' values
XmlDocument doc = (XmlDocument)SmartChart1.DataSource;
XmlNode node = doc.SelectSingleNode("//person[@id='" + 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;
//Handle Insert
} else {
XmlElement newNode = doc.CreateElement("person");
newNode.SetAttribute("id",Guid.NewGuid().ToString());
newNode.SetAttribute("title",txtTitle.Text);
newNode.SetAttribute("name",txtName.Text);
//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();
}
}
}