ASP.NET Treemap Setup

ShieldUI TreeMap for ASP.NET is a server-side wrapper component implemented in the ASP.NET server side component pattern. To get started using the component simply add a reference to the Shield.Web.UI assembly in your ASP.NET project.
Since this is a wrapper of the javascript treemap component you need to include the references to the CSS and JavaScript resources in the HEAD section of your webpage:

<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>

The javascript resources for client side component you can find on the download page under “ShieldUI JavaScript” section.

In order to have intellisence into the aspx pages markup you need to add the Shield.Web.UI namespace to the node of the
section in your Web.config configuration file:

<system.web>
  <pages>
    <controls>
      <add tagPrefix="shield" namespace="Shield.Web.UI" 
          assembly="Shield.Web.UI" />
    </controls>
  </pages>
</system.web>

The other approach is to add following line of code into your aspx page:

<%@ Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" 
    TagPrefix="shield" %>

The ASP.NET Wrapper offers a 1:1 correspondence with the relevant properties of the jquery widget.

For example, the following client side initialization:


<div id="treemap" />

<script type="text/javascript">
    $(function () {
        $('#treemap').shieldTreeMap({
              cls: "treemap",
              dataSource: {
                    data: [
                        {
                            "title": "Fastest Cars in the World",
                            "value": 1301,
                            "items": [
                                {
                                    "title": "Hennessey Venom GT",
                                    "value": 435
                                },
                                {
                                    "title": "Vector Avtech WX8 Hypercar",
                                    "value": 435
                                },
                                {
                                    "title": "Bugatti Veyron 16.4 Super Sport",
                                    "value": 431
                                }
                            ]
                        }
                    ]
                }
          });
    });
</script>

<style>
      .treemap {
         max-width: 600px;
         height: 500px;
      }
</style>

is translated into the following ASP.NET code:


<script type="text/javascript">

        var carsData = [
            {
                "title": "Fastest Cars in the World",
                "value": 1301,
                "items": [
                    {
                        "title": "Hennessey Venom GT",
                        "value": 435
                    },
                    {
                        "title": "Vector Avtech WX8 Hypercar",
                        "value": 435
                    },
                    {
                        "title": "Bugatti Veyron 16.4 Super Sport",
                        "value": 431
                    }
                ]
            }
        ];
</script>
     
<shield:ShieldDataSource runat="server" ID="shieldDataSource" Data="carsData"></shield:ShieldDataSource>
<shield:ShieldTreeMap ID="treemap" runat="server" Cls="treemap" ClientDataSourceID="shieldDataSource">
   <Tooltip Enabled="true" Template="{title}: {value} km/h" />
</shield:ShieldTreeMap>

<style>
      .treemap {
         max-width: 600px;
         height: 500px;
      }
</style>