ASP.NET MVC Treemap Setup

Home >Shield UI Documentation >TreeMap >ASP.NET MVC >ASP.NET MVC Treemap Setup

ShieldUI TreeMap for ASP.NET MVC is a server-side wrapper component implemented in the ASP.NET MVC HTML helper pattern.

Getting started with the component is a breeze. Simply add a reference to the Shield.Mvc.UI assembly in your ASP.NET MVC 3 or MVC 4 project and add the Shield.Mvc.UI namespace to the <pages> node of the <system.web.webpages.razor> section in your ~/Views/Web.config configuration file:

<?xml version="1.0"?>

<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="Shield.Mvc.UI"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>
  ...

Since the ShieldUI TreeMap for MVC 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>
    <link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
    <script src="js/jquery-1.10.2.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 the ShieldUI JavaScript section.

ShieldUI TreeMap code for ASP.NET MVC follows the MVC helper pattern by providing a set of chainable methods that configure the widgets. The C# helpers API is a 1:1 reflection of the JavaScript widgets configuration, so you only have to get familiar with a single set of configuration options:


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



<script type="text/javascript">
    var 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>

@(Html.ShieldTreeMap()
          .Name("treemap")
          .Cls("treemap")
          .DataSource(ds => ds.Data(@data)))

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

To see the configuration options in action, please refer to our online demos.