I would like to use an ojInputSearch to filter the labels (on the rowAxis) in an ojGantt. The filter works, but the Gantt-chart doesn’t show the right tasks and rows (it now shows just the last task and row from the searchresults). When I switch to a different tab in the application and back, the correct filtered rows are shown. I’ve tried several refresh methods, but they don’t do the job. And it seems to me that the ko.observables should be taking care of this. I have seen similar questions, but the solutions don’t seem to apply to the Gantt. What am I missing? The relevant part of my code:
HTML:
<input id="inputSearch" placeholder="Search for rental object"
aria-label="Search by Label"
data-bind="ojComponent: {
component: 'ojInputSearch',
optionChange: labelSearch,
rootAttributes: {style:'max-width: 25em'}}"/>
JS:
The data for self.rows is collected with $.getJSON.
self.rows = ko.observableArray();
self.rows.push({
label: <omitted value>
id: <omitted value>
tasks: <omitted array>
});
self.rowsClone = ko.observableArray();
self.labelSearch = function (event, ui) {
if (ui.option !== "value") {
return;
}
self.filter = ui.value[0];
self.rowsClone = self.rows().slice(0);
self.rows([]);
ko.utils.arrayFilter(self.rowsClone, function (item) {
if (item.label.indexOf(self.filter) !== -1) {
self.rows.push(item);
}
});
}
Thanks in advance!