Disabling multi-selection in a Dijit Tree

On October 28, 2013, in Javascript, by Anuj Gakhar

The Dijit Tree component lets you select multiple options by default and there is no easy way to turn that off, or atleast none that I could find. Ideally, this should be a configurable property, byt sadly, that’s not the case.
However, there is a “singular” property on the _dndSelector that would let us disable multi-select.

The easiest way is to just extend the Tree class and set singular: true :-

define([
    'dojo/_base/declare',
    'dijit/Tree'
], function (
    declare,
    Tree
    ) {
    return declare('SingleSelectionTree', Tree, {
        singular: true,
        /*add "singular" property to the default dndParams 
        as we want to be able to disable
        multi selection of tree nodes */
        dndParams: [
            "singular",
            "onDndDrop",
            "itemCreator",
            "onDndCancel",
            "checkAcceptance",
            "checkItemAcceptance",
            "dragThreshold",
            "betweenThreshold"
        ]
    });
})

Once that is done, you can use this new Class like below :-

define([
    'SingleSelectionTree',
    'dijit/tree/_dndSelector',
], function (
    SingleSelectionTree,
    _dndSelector) {
    var myTree = new SingleSelectionTree({
        dndController: _dndSelector,
        ......
        other config params
        .......
    });
})

Hope this little tip helps someone out :)

Tagged with:  

Leave a Reply

© 2011 Anuj Gakhar
%d bloggers like this: