Filtering by multiple parameters


#1

Hello,

I’ve recently started using the DHTMLX javascript based Gantt chart. I’m having some issues with the filters which I don’t feel are exclusively related to the chart itself, but, related to javascript.

So, the Gantt chart can be filtered by passing in some conditions via an if statement and returning true when those conditions are met. All my conditions values come from a selection of inputs, these inputs represent ranges.

<input type="text" class="k-textbox" id="bedsStart" />
<input type="text" class="k-textbox" id="bedsEnd" />

<input type="text" class="k-textbox" id="deckStart" />
<input type="text" class="k-textbox" id="deckEnd" />

<button type="button" id="filterSort">Set Filters</button>

When you click on the filter button the on click event is triggered and the values are gathered from the input fields.

$("#filterSort").on("click", function (e) {        
    let bedsStart = $('#bedsStart').val();
    let bedsEnd = $('#bedsEnd').val();
    let deckStart = $('#deckStart').val();
    let deckEnd = $('#deckEnd').val();

These values are then passed as conditions to the filter as per the documentation from DHTMLX:

    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
        if (task.crane >= craneStart && task.crane <= craneEnd) {
            return true
        }        
        return false;
    });
    gantt.init("ganttReport");
}

The problem is if any of the text inputs are empty/null then the filter fails and returns nothing. Is there a way I can handle these nulls values by not including them or dynamically specify what filters to use?

The filter seems to only be capable of returning true or false so having multiple if statements don’t work as it’s always the last statement that will deliver an outcome with the previous iterations being overwritten i.e.

if(condition1)
{
    return true
}
if(condition2)
{
    return true
}
return false

The above code wouldn’t work and only condition2 would be used as condition1 would be overwritten. So I can’t just set out my conditions in this manner or using if else.

Can anyone offer a solution to how I can pass all these conditions to this single statement yet handle the nulls?


Search option needed for gantt chart task
#2

Hello Allan,
I think, it can be done by calculating the conditions before returning true or false.
Here is an example of how it might be implemented:
https://snippet.dhtmlx.com/5/6f6a38739
Here is an explanation.
There are variables that control if the task property should be considered for filtering. If at least one of the filtering value is not correct or empty(only min value or only max value) the controlling variable becomes true. When both min and max values are correct, Gantt compares them with the task property.
After that, you check the controlling variables. When all of them are true for the task, you return true to display the task.