<div id="multipathGrid" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="doLayout: true">
<script type="dojo/method">

require([
  "dojo/dom",
  "dojo/dom-construct",
  "dojo/json",
  "dojo/on",
  "dojo/data/ItemFileReadStore",
  "dijit/registry",
  "dijit/layout/ContentPane",
  "dijit/tree/ForestStoreModel",
  "dijit/form/Button",
  "dojox/grid/TreeGrid"
  ], function(
  dom,
  domConstruct,
  JSON,
  on,
  ItemFileReadStore,
  registry,
  ContentPane,
  ForestStoreModel,
  Button,
  TreeGrid
  ) {

    var store = new ItemFileReadStore({
        url: "{% url "storage_multipath_status_json" %}"
        });

    var treeModel = new ForestStoreModel({
        store: store,
        rootLabel: 'Multipaths',
        query: { 'type': 'root' },
        childrenAttrs: ['children']
    });

    actions = function(v) {
        var content = new ContentPane({});
        var gridhtml = registry.getEnclosingWidget(dom.byId(this.id));

        var json = JSON.parse(v);
        if(json == undefined) return content;

        if(json.edit_url) {
            var b = new Button({label: gettext("Edit")});
            on(b, 'click', function(){ editObject(gettext('Edit Disk'), json.edit_url, [gridhtml,]); });
            content.domNode.appendChild(b.domNode);
        }

        return content;
    };

    var struc = [
        { field: "name", name: "Name", width: "auto" },
        { field: "status", name: "Status", width: "auto" },
        { field: "lunid", name: "LUN ID", width: "auto" }
        //{ field: "actions", name: "Available Actions", width: "auto", formatter: actions },
        ];

    // create a new grid:
    var grid4 = new TreeGrid({
        treeModel: treeModel,
        rowSelector: true,
        defaultOpen: true,
        structure: struc
        },
        document.createElement('div'));

    container = dom.byId("multipathGrid");
    domConstruct.empty(container);
    container.appendChild(grid4.domNode);
    grid4.startup();
});
</script>
</div>
