Search code examples
javascriptjquerydhtmlx

How do I filter a javascript gantt chart using conditions and handle empty inputs?

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?

Solution

  • This is a working example, you can try with only startDate/endDate or both: https://codesandbox.io/s/7qz1kw9vq