Options

Basic Options

The options you pass are conbined with the default options in Treebeard.run. Below you can see some sensible defaults. All these options can be overwritten and you can find details in the indivual option pages

Quick Guide

Some of the options below have values, you don't have to use what is here, but they are the defaults.

    /**
     * Treebeard default options as a constructor so multiple different types of options can be established.
     * Implementations have to declare their own "filesData", "columnTitles", "resolveRows", all others are optional
     */
    var Options = function() {
        this.divID = "myGrid";          // This div must be in the html already or added as an option
        this.filesData = "small.json";  // REQUIRED: Data in Array or string url
        this.rowHeight = undefined;     // user can override or get from .tb-row height
        this.paginate = false;          // Whether the applet starts with pagination or not.
        this.paginateToggle = false;    // Show the buttons that allow users to switch between scroll and paginate.
        this.uploads = false;           // Turns dropzone on/off.
        this.multiselect = false;       // turns ability to multiselect with shift or command keys
        this.columnTitles = function () {   // REQUIRED: Adjust this array based on data needs.
            return [
                {
                    title: "Title",
                    width: "50%",
                    sortType : "text",
                    sort : true
                },
                {
                    title: "Author",
                    width : "25%",
                    sortType : "text"
                },
                {
                    title: "Age",
                    width : "10%",
                    sortType : "number"
                },
                {
                    title: "Actions",
                    width : "15%"
                }
            ];
        };
        this.resolveRows = function (item) { // REQUIRED: How rows should be displayed based on data.
            return [
                {
                    data : "title",  // Data field name
                    folderIcons : true,
                    filter : true
                }
            ];
        };
        this.filterPlaceholder = 'Search';
        this.resizeColumns = true;      // whether the table columns can be resized.
        this.hoverClass = undefined;    // Css class for hovering over rows
        this.hoverClassMultiselect = 'tb-multiselect'; // Css class for hover on multiselect
        this.showFilter = true;         // Gives the option to filter by showing the filter box.
        this.title = null;      // Title of the grid, boolean, string OR function that returns a string.
        this.allowMove = true;          // Turn moving on or off.
        this.moveClass = undefined;     // Css class for which elements can be moved. Your login needs to add these to appropriate elements.
        this.sortButtonSelector = {};   // custom buttons for sort, needed because not everyone uses FontAwesome
        this.dragOptions = {};          // jQuery UI draggable options without the methods
        this.dropOptions = {};          // jQuery UI droppable options without the methods
        this.dragEvents = {};           // users can override draggable options and events
        this.dropEvents = {};           // users can override droppable options and events
        this.oddEvenClass = {
            odd : 'tb-odd',
            even : 'tb-even'
        };
        this.onload = function () {
            // this = treebeard object;
        };
        this.togglecheck = function (item) {
            // this = treebeard object;
            // item = folder to toggle
            return true;
        };
        this.onfilter = function (filterText) {   // Fires on keyup when filter text is changed.
            // this = treebeard object;
            // filterText = the value of the filtertext input box.
        };
        this.onfilterreset = function (filterText) {   // Fires when filter text is cleared.
            // this = treebeard object;
            // filterText = the value of the filtertext input box.
        };
        this.createcheck = function (item, parent) {
            // this = treebeard object;
            // item = Item to be added.  raw item, not _item object
            // parent = parent to be added to = _item object
            return true;
        };
        this.oncreate = function (item, parent) {  // When new row is added
            // this = treebeard object;
            // item = Item to be added.  = _item object
            // parent = parent to be added to = _item object
        };
        this.deletecheck = function (item) {  // When user attempts to delete a row, allows for checking permissions etc.
            // this = treebeard object;
            // item = Item to be deleted.
            return true;
        };
        this.ondelete = function () {  // When row is deleted successfully
            // this = treebeard object;
            // item = a shallow copy of the item deleted, not a reference to the actual item
        };
        this.addcheck = function (treebeard, item, file) {  // check is a file can be added to this item
            // this = dropzone object
            // treebeard = treebeard object
            // item = item to be added to
            // file = info about the file being added
            return true;
        };
        this.onadd = function (treebeard, item, file, response) {
            // this = dropzone object;
            // item = item the file was added to
            // file = file that was added
            // response = what's returned from the server
        };
        this.onselectrow = function (row, event) {
            // this = treebeard object
            // row = item selected
            // event = mouse click event object
        };
        this.onmultiselect = function (event, tree) {
            // this = treebeard object
            // tree = item currently clicked on
            // event = mouse click event object
        };
        this.onmouseoverrow = function (row, event) {
            // this = treebeard object
            // row = item selected
            // event = mouse click event object
        };
        this.ontogglefolder = function (item) {
            // this = treebeard object
            // item = toggled folder item
        };
        this.dropzone = {                                           // All dropzone options.
            url: "http://www.torrentplease.com/dropzone.php"  // When users provide single URL for all uploads
        };
        this.dropzoneEvents = {};
        this.resolveIcon = function (item) {     // Here the user can interject and add their own icons, uses m()
            // this = treebeard object;
            // Item = item acted on
            if (item.kind === "folder") {
                if (item.open) {

                    return m("i.fa.fa-folder-open-o", " ");
                }
                return m("i.fa.fa-folder-o", " ");
            }
            if (item.data.icon) {
                return m("i.fa." + item.data.icon, " ");
            }
            return m("i.fa.fa-file ");
        };
        this.resolveRefreshIcon = function(){
            return m('i.icon-refresh.icon-spin');
        };
        this.resolveToggle = function (item) {
            var toggleMinus = m("i.fa.fa-minus-square-o", " "),
                togglePlus = m("i.fa.fa-plus-square-o", " ");
            if (item.kind === "folder") {
                if (item.children.length > 0) {
                    if (item.open) {
                        return toggleMinus;
                    }
                    return togglePlus;
                }
            }
            return "";
        };
        this.resolvePagination = function (totalPages, currentPage) {
            // this = treebeard object
            return m("span", [
                m('span', 'Page: '),
                m('span.tb-pageCount', currentPage),
                m('span', ' / ' + totalPages)
            ]);
        };
        this.resolveUploadUrl = function (item) {  // Allows the user to calculate the url of each individual row
            // this = treebeard object;
            // Item = item acted on return item.data.ursl.upload
            return "/upload";
        };
        this.resolveLazyloadUrl = function (item) {
            // this = treebeard object;
            // Item = item acted on
            return false;
        };
        this.lazyLoadError = function (item) {
            // this = treebeard object;
            // Item = item acted on
        };
        this.lazyLoadOnLoad = function (item) {
            // this = treebeard object;
            // Item = item acted on
        };
        this.ondataload = function (item) {
            // this = treebeard object;
        };
    };