DHTMLX Multiselect Drop-down Checkbox filter for Gantt Chart

Question

I'm trying to filter my Gantt Chart using a drop-down checkbox list. this is my code

index.html

<label class="text-primary" for="department">Select by Departments: </label>
    <select id="department" style="width:200px; height:20px; " mode="checkbox">
                            <option value="ALL" selected="1" >ALL</option>
                            <option value="ARTIST">ARTIST</option>
                            <option value="ADMIN">ADMIN</option>
                            <option value="LEAD">LEAD</option>
                            <option value="HR">HR</option>
                            <option value="PRODUCTION">PRODUCTION</option>
                            <option value="MANAGEMENT">MANAGEMENT</option>
                            <option value="TECHNOLOGY">TECHNOLOGY</option>
                        </select>

function

<script>
            var myCombo;
            function checkbox_department() {
            myCombo = dhtmlXComboFromSelect("department");
            myCombo.attachEvent("onCheck", function(value, state){
                gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
                    var department_value = value

                     if (task.job_category == department_value || department_value == 'ALL') {
                     console.log(value);
                         return true;
                    }
                 });
                 gantt.render();
            });

            }

        </script>

the job_category came from a JSON file.

so far I manage to filter the gantt chart with any first checkbox I checked but when I check another checkbox, let say i check artist and production everything disappear and in the console log it'll display

3PRODUCTION
7ARTIST
2PRODUCTION
52ARTIST
PRODUCTION
51ARTIST
2PRODUCTION
3ARTIST
PRODUCTION
22ARTIST

It will turn out like that, it would be easier if i just print screen the whole thing here but I'm using my office desktop and file uploading is blocked. Can anyone help me solves this issue, thanks in advance

Answer 1

Your combo adds an onBeforeTaskDisplay handler each time user checks combo value, while never removing previously added handlers when an option becomes unchecked/unselected. I'd suggest to store combobox selection in some scope variable and declare only one onBeforeTaskDisplay handler which will filter gantt by the value of that variable.

Then, inside onCheck handler of combo you update a scope variable with the selection state of the combo and call gantt repaint in order to invoke filtering

Your code may look following:

var myCombo;
function checkbox_department() {
    var department_value = 'ALL';

    myCombo = dhtmlXComboFromSelect("department");
    myCombo.attachEvent("onCheck", function(value, state){
        department_value = value;// put combo value into scope variable
        gantt.render();// and repaint gantt
    });

    // filter gantt by value of the scope variable
    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
        if (task.job_category == department_value || department_value == 'ALL') {
            console.log(value);
            return true;
        }
    });
}

and here is a simplified demo in case i got something wrong with the explanation and code sample http://docs.dhtmlx.com/gantt/snippet/b6053d50

Update:

If you have a multiselect combo, you may need a bit different code. Something following should work:

var myCombo;
function checkbox_department() {
    var department_value = {'ALL': true};

    myCombo = dhtmlXComboFromSelect("department");
    myCombo.attachEvent("onCheck", function(value, state){
        var values = myCombo.getChecked();
        department_value = {};// put combo value into scope variable
        for(var i = 0; i < values.length; i++){
            department_value[values[i]] = true;// build hash for easy check later
        }
        gantt.render();// and repaint gantt
    });

    // filter gantt by value of the scope variable
    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
        if(department_value['ALL'])
            return true;

        return !!department_value[task.job_category];
    });
}