TreeMap
TreeMap
Max Depth
The TreeMap chart control allows you to set the maximum number of node levels to show in the current view by using the MaxDepth property.
Features
- Root
Settings
Max Depth: 2
Description
The TreeMap chart control allows you to set the maximum number of node levels to show in the current view by using the MaxDepth property.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | using MvcExplorer.Models;using System.Collections.Generic;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class TreeMapController : Controller { // GET: MaxDepth public ActionResult MaxDepth() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateMaxDepthSettings(), DefaultValues = GetMaxDepthDefaultValues() }; return View(ThingSale.GetDate()); } private static IDictionary<string, object[]> CreateMaxDepthSettings() { var settings = new Dictionary<string, object[]> { {"MaxDepth", new object[]{ 0, 1, 2, 3, 4}} }; return settings; } private static IDictionary<string, object> GetMaxDepthDefaultValues() { var defaultValues = new Dictionary<string, object> { {"MaxDepth", 2} }; return defaultValues; } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | @model IEnumerable<ThingSale>@{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;}<ol id="breadCrumbs"></ol>@(Html.C1().TreeMap().Id(demoSettingsModel.ControlId) .Binding("Sales") .BindingName("Category") .ChildItemsPath("Items") .Bind(Model) .MaxDepth((int)demoSettingsModel.DefaultValues["MaxDepth"]) .Tooltip(t => t.Content("<b>{name}</b><br />{value:c}")) .DataLabel(dlb => dlb.Position(C1.Web.Mvc.Chart.LabelPosition.Center).Content("{name}")) .OnClientRendered("onRendered"))@section Scripts{ <script type="text/javascript"> var breadCrumbs = []; var currentItem; var treemap; function onRendered() { if (!treemap) { treemap = wijmo.Control.getControl('#@demoSettingsModel.ControlId'); } if (treemap) { if (currentItem === treemap._currentItem) { return; } currentItem = treemap._currentItem; createBreadCrumbs(); } } function rollUp(num) { //rollup treemap *num times. for (var i = 0; i < num; i++) { treemap._rollUp(); } } function createBreadCrumbs() { breadCrumbs = []; resetBreadCrumbs(currentItem); breadCrumbs.reverse(); appendBreadCrumbs(); } function appendBreadCrumbs() { var ol = document.querySelector('#breadCrumbs'); ol.innerHTML = ''; var len = breadCrumbs.length; breadCrumbs.forEach(function (label, idx) { ol.appendChild(apendBreadCrumb(label, idx !== len - 1, len - idx - 1)); }); } function apendBreadCrumb(label, isAnchor, param) { var li = document.createElement('li'); if (isAnchor) { li.className = 'breakcrumb-item'; var a = document.createElement('a'); a.href = 'javascript:void(0)'; a.innerHTML = label; a.addEventListener('click', function (evt) { rollUp(param); }); li.appendChild(a); } else { li.className = 'breakcrumb-item active'; li.innerHTML = label; } return li; } function resetBreadCrumbs(item) { if (item) { breadCrumbs.push(item.label); resetBreadCrumbs(item.parent); } else { breadCrumbs.push('@(Resources.TreeMap.MaxDepth_Root)'); } } </script>}@section Description{ <p>@Html.Raw(Resources.TreeMap.MaxDepth_Text0)</p>} |