Skip to content

jQuery datatreeview defaults and options

Maikel Bos edited this page Jan 2, 2021 · 6 revisions

The jQuery-datatreeview is created with ease of use in mind. Almost all options can be configured using data-attributes. However, sometimes there is a need to override the options explicitly or influence the default behaviour. This is possible both by changing the default options, and by explicitly passing the options when first creating the datatreeview.

All defaults and options are defined as functions to make them as flexible as possible.

<div id="example-treeview">
</div>

<script type="text/javascript">
    // Override the default to look at the class instead of the data-attribute
    $.fn.datatreeview.defaults.hasFreehandSelection = function(element) {
        return $(element).hasClass('freehand-select');
    }
    
    // For this specific treeview, simply create a treeview with freehand-selection
    $('#example-tree').datatreeview({
        data: [
            { value: 1, text: 'Foo', selected: true },
            {
                value: 2,
                text: 'Bar',
                children: [
                    { value: '2a', text: 'Bar child', selected: true },
                    { value: '2b', text: 'Another'}
                ]
            },
            { value: 3, text: 'Baz' }
        ],
        hasFreehandSelection: function(element) {
            return true;
        }
    });
</script>

Options

Below are all options that you can provide your own implementation of.

  • getValueProperty(element) should return the name of the property in each data node object that contains the input value
  • getTextProperty(element) should return the name of the property in each data node object that contains the label text
  • getSelectedProperty(element) should return the name of the property in each data node object that contains the selected status
  • getChildrenProperty(element) should return the name of the property in each data node object that contains the child nodes
  • getFieldName(element) should return the field name of the input fields that are created for items
  • hasFreehandSelection(element) should return true if freehand selection should be used
  • isDisabled(element) should return true if the dropdownlist needs to be disabled on initialization
  • getToggleOptions(element) should return an options object that's accepted by the jQuery slideToggle function
  • isCollapsed(element) should return true if the dropdownlist nodes need to be collapsed on initialization
  • getListAttributes() should return an object with html attributes to apply to node lists
  • getNodeAttributes() should return an object with html attributes to apply to nodes
  • getNodeContentAttributes() should return an object with html attributes to apply to node content elements
  • getInputAttributes() should return an object with html attributes to apply to checkbox fields
  • getLabelAttributes() should return an object with html attributes to apply to node labels
  • getTogglerAttributes() should return an object with html attributes to apply to expand/collapse togglers
Clone this wiki locally