Dijit D3 Custom Dashboard Part 2

Adding Widgets

The technique for adding widget is straightforward enough. Simply add another div element with a drag and drop source as a widget gallery for adding widgets to your dashboard.

<div id="WidgetGallary">
    <div class="WidgetCaption">Widget Gallery</div>
    <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">
        <div id="Widget1" class="dojoDndItem Widget" dndtype="Widget">Widget 1</div>
        <div id="Widget2" class="dojoDndItem Widget" dndtype="Widget">Widget 2</div>
        <div id="Widget3" class="dojoDndItem Widget" dndtype="Widget">Widget 3</div>
        <div id="Widget4" class="dojoDndItem Widget" dndtype="Widget">Widget 4</div>
    </div>
</div>

---

syntax highlighted by Code2HTML, v. 0.9.1

 Adding Widgets (JS Fiddle)

The assumption is that the widgets will be added to the widget gallery using server side code. However, client side code and AJAX is also a possibility. You will need to keep track of what widgets are in the gallery and what widgets have been added to a region in the dashboard.
For each widget you want to store RegionName, WidgetName, and WidgetId. The RegionName would be Gallery if it has not been moved to a region yet.

Resizing Regions

Adding regions is even easier than adding a widget gallery. By adding the dojo property splitter=true as shown below you can allow regions to be re-sized with splitters.

 <div dojoType="dijit.layout.ContentPane" data-dojo-props="splitter:true" id="DashboardTop" region="top">
      <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">
      </div>
 </div>

---

syntax highlighted by Code2HTML, v. 0.9.1

Resize Widgets (JS Fiddle)

Dashboard with Widget Gallery

The above screenshot shows the dashboard app with the widget gallery and splitters to re-size the regions. Next time I will show how to switch between dashboard layouts.