CODEWITHSUNDEEP
javascriptvis.jsvis.js-timeline
jessica
jessica

Reputation: 3141

Vis.js Timeline - How to collapse a group without nesting

I'd like to be able to collapse or toggle visibility of specific groups on the timeline by clicking on the group title (or an icon next to it, etc.)

All examples I've seen for accomplishing similar functionality requires using nested groups, and then collapsing the group, but the nested model does not work for our data, and we only want to be able to collapse one at a time.

I have figured how to show a group as collapsed on initialization by setting a className, but I haven't figured out how to toggle the className on the group label + row on the fly.

Upvotes: 0

Views: 1895

Answers (1)

Anja R
Anja R

Reputation: 88

I uses thise functions in order to remove/show all items in a group

    function plannerCloseGroup(groupID){
    // retrieve all items having a property group with value groupID
    var itemsFiltered = items.get({
      filter: function (item) {
        return (item.group == groupID);
      }
    });
    closedItems[groupID] = itemsFiltered;
    items.remove(itemsFiltered);
    $("#plannerMinus_" + groupID).addClass("hidden");
    $("#plannerMinus_" + groupID).removeClass("display");
    $("#plannerPlus_" + groupID).removeClass("hidden");
    $("#plannerPlus_"+ groupID).addClass("display");
}

function plannerOpenGroup(groupID){
    items.update(closedItems[groupID]);
    $("#plannerMinus_" + groupID).addClass("display");
    $("#plannerMinus_" + groupID).removeClass("hidden");
    $("#plannerPlus_" + groupID).removeClass("display");
    $("#plannerPlus_" + groupID).addClass("hidden");
    delete closedItems[groupID];
}

closedItems is a global array

plannerMinus og plannerPlus are icons next to the group name

When I define my groups I have this code in content, where $employeeID also is my groupID

'<span id="plannerPlus_'.$employeeID.'" class="hidden"><img src="images/planner-plus-grey.gif" width=10 height=10 onclick="plannerOpenGroup('.$employeeID.')"> </span><span id="plannerMinus_'.$employeeID.'" class="display"><img src="images/planner-minus.gif" width=10 height=10 onclick="plannerCloseGroup('.$employeeID.')"> </span>'

It then looks like this open group closed group

Upvotes: 1

Related Questions