ComponentOne TreeMap for ASP.NET WebForms
Features / Data Binding
In This Topic
    Data Binding
    In This Topic

    You can bind the TreeMap control to a .sitemap file or an XML. Complete the following steps to bind the TreeMap control to an XML file or a .sitemap file.

    The TreeMap can only be bound to a database that contains numeric values to indicate the Value for every region. This topic assumes that the XML or the .sitemap file you want to bind the TreeMap control to, is added to the project as an embedded resource.

    The XML file used in this sample contains two fields:

    Sample XML file

    Sample XML
    Copy Code
    <?xml version="1.0" encoding="utf-8" ?>
    <root>
        <treeMapItem label="North America" value="18625">
            <treeMapItem label="United States" value="16800"></treeMapItem>
            <treeMapItem label="Canada" value="1825"></treeMapItem>
        </treeMapItem>
        <treeMapItem label="Asia" value="18934">
            <treeMapItem label="China" value="9240"></treeMapItem>
            <treeMapItem label="Japan" value="4901"></treeMapItem>
            <treeMapItem label="India" value="1876"></treeMapItem>
            <treeMapItem label="South Korea" value="1304"></treeMapItem>
            <treeMapItem label="Indonesia" value="868"></treeMapItem>
            <treeMapItem label="Saudi Arabia" value="745"></treeMapItem>
        </treeMapItem>
        <treeMapItem label="Europe" value="16685">
            <treeMapItem label="Germany" value="3634"></treeMapItem>
            <treeMapItem label="France" value="2734"></treeMapItem>
            <treeMapItem label="United Kingdom" value="2522"></treeMapItem>
            <treeMapItem label="Russia" value="2096"></treeMapItem>
            <treeMapItem label="Italy" value="2071"></treeMapItem>
            <treeMapItem label="Spain" value="1358"></treeMapItem>
            <treeMapItem label="Turkey" value="820"></treeMapItem>
            <treeMapItem label="Netherlands" value="800"></treeMapItem>
            <treeMapItem label="Switzerland" value="650"></treeMapItem>
        </treeMapItem>
        <treeMapItem label="South America" value="4554">
            <treeMapItem label="Brazil" value="2245"></treeMapItem>
            <treeMapItem label="Mexico" value="1260"></treeMapItem>
            <treeMapItem label="Argentina" value="611"></treeMapItem>
            <treeMapItem label="Venezuela" value="438"></treeMapItem>
        </treeMapItem>
        <treeMapItem label="Australasia & Oceania" value="1742">
            <treeMapItem label="Australia" value="1560"></treeMapItem>
            <treeMapItem label="New Zealand" value="182"></treeMapItem>
        </treeMapItem>
        <treeMapItem label="Africa" value="872">
            <treeMapItem label="Nigeria" value="522"></treeMapItem>
            <treeMapItem label="South Africa" value="350"></treeMapItem>
        </treeMapItem>
    </root>
    

    Complete the following steps to populate the TreeMap with XML Data.

    In the Designer

    1. Right click the TreeMap control and select Properties to open the Properties Window.
    2. Set the MinColor, MidColor and MaxColor properties.
    3. Click the smart tag  to open the TreeMap Tasks Menu.
    4. Click the drop-down button next to Choose Data Source and select <New data source...> to open the Data Source Configuration Wizard.
    5. Select XML File. The Configure Data Source window opens.
    6. Click the Browse button next to Data File. The Select XML File window opens.
    7. Select the XML file and click OK to close the Select XML File window. Click OK to close the Configure Data Source window and Data Source Configuration Wizard.
    8. A new XmlDataSource control is added to the form.
    9. Right click the TreeMap control and select Properties to open the Properties Window.
    10. Click the ellipsis button (...) next to the Databindings property to open the C1TreeMapItemBinding Collection Editor.
    11. Click the Add button to add a new ItemBinding.  Set the LabelField to label (or the field in the database indicating the Label of the region) and ValueField to value (or the numeric field in the database indicating the Value of the region).
    12. Right click the XmlDataSource control and select Properties to open the Properties window.
    13. Set the XPath to root/treeMapItem.
    14. Press F5 to run the project.

    In Source View

    1. Add the following markup between the <form></form> tags to add an XmlDataSource control.

      Source View
      Copy Code
      <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/treemap_structure.xml" XPath="root/treeMapItem"></asp:XmlDataSource>
      
    2.  Set the DataSourceID property in the <c1:C1TreeMap> tag, to bind the TreeMap to the XML Data Source, and add the markup for DataBindings, between <c1:C1TreeMap></c1:C1TreeMap> tags as shown below:

      Source View
      Copy Code
      <c1:c1treemap ID="C1TreeMap1" runat="server" MaxColor="#6600cc" MinColor="#ffccff" MidColor="#9966ff" DataSourceID="XmlDataSource1" Height="600" Width="700px">
             <DataBindings>
                 <c1:C1TreeMapItemBinding LabelField="label" ValueField="value" />
             </DataBindings>
        </c1:c1treemap>
      

    In Code

    Add the following code to the Page_Load event, to add and configure the XmlDataSource and populate the TreeMap control with XML data.

    C#
    Copy Code
    // set colors for the TreeMap
    C1TreeMap1.MinColor = System.Drawing.ColorTranslator.FromHtml("#ffccff" );
    C1TreeMap1.MidColor = System.Drawing.ColorTranslator.FromHtml("#9966ff");
    C1TreeMap1.MaxColor = System.Drawing.ColorTranslator.FromHtml("#6600cc");
                
    // add and configure XmlDataSource
    XmlDataSource XmlDataSource1 = new XmlDataSource();
    XmlDataSource1.ID = "XmlDataSource1";
    this.Controls.Add(XmlDataSource1);
    XmlDataSource1.DataFile = "~/treemap_structure.xml";
    XmlDataSource1.XPath = "root / treeMapItem";
    C1TreeMap1.DataSourceID = "XmlDataSource1";
          
    // create and add DataBindingsItem
    C1TreeMapItemBinding Item1 = new C1TreeMapItemBinding();
    Item1.LabelField = "label";
    Item1.ValueField = "value";
    C1TreeMap1.DataBindings.Add(Item1);
    

    VB
    Copy Code
    ' set colors for the TreeMap
    C1TreeMap1.MinColor = System.Drawing.ColorTranslator.FromHtml("#ffccff")
    C1TreeMap1.MidColor = System.Drawing.ColorTranslator.FromHtml("#9966ff")
    C1TreeMap1.MaxColor = System.Drawing.ColorTranslator.FromHtml("#6600cc")
    
    ' add and configure XmlDataSource
    Dim XmlDataSource1 As New XmlDataSource()
    XmlDataSource1.ID = "XmlDataSource1"
    Me.Controls.Add(XmlDataSource1)
    XmlDataSource1.DataFile = "~/treemap_structure.xml"
    XmlDataSource1.XPath = "root / treeMapItem"
    C1TreeMap1.DataSourceID = "XmlDataSource1"
    
    ' create and add DataBindingsItem
    Dim Item1 As New C1TreeMapItemBinding()
    Item1.LabelField = "label"
    Item1.ValueField = "value"
    C1TreeMap1.DataBindings.Add(Item1)
    

    What You've Accomplished

    When you run the project, regions are added to the TreeMap based on the XML data bound to it.