Hello webix_B_123,
I want to filter the tasks based on the search input , so that only matching tasks are visible, and still keep the highlighting as shown in the example.
To filter the tasks based on the search input and keep the highlighting you need to apply the custom filter function from the customized Local class( row 147):
local.filter("#text#",value);
Also you can configure filtering with filterMode setting of the Tasks collection. You can define it in the default init function of the customized TreeView class (row 64):
const tasks = this.Local.tasks();
tasks.define({
filterMode: {
showSubItems: false,
}
});
Please check the example: Code Snippet
1. Refreshing Gantt without Recreating
If you want to reload the data at any moment - the reload method will work.
If it’s necessary not just to refresh but to change the data source URL, then the url method in the Backend Service needs to be customized additionally:
class Backend extends gantt.services.Backend {
/**
* Returns absolute url based on relative one
* @param {string} path - relative url, e.g. "tasks", "links"
* @returns {string} absolute url, e.g. "https://docs.webix.com/gantt-backend/tasks"
*/
url(path) {
// this._url is an initial url in Gantt confic, you can replace it here
return this._url + path;
}
}
Please check the example: Code Snippet
2. Calling Custom Save API on Add/Edit/Delete
Applying url property you can define your own path to load the data to the gantt. You can call custom save API on Add/Edit/Delete in the default methods of the customized MyBackend class (row 5). More detailed information about loading data into the gantt you can find here . How to customize backend service you can find here. Descriptions of the default methods and return values of the backend service are here.
Please check the example of loading data into the gantt: Code Snippet
3. Suppressing Auto API Calls (e.g.,
/undefinedtasks/3/position)
To use your custom API you can redefine the default reorderTask(id, config) method. But you need to take into account the parameters and returned values of this method.
In the example below row 43: Code Snippet
4. Other Auto Calls – Did I Miss Anything?
All the methods that are applyed in the gantt backend service you can find in the sources/models/Backend.js directory and in this article.
5. Customizing Tooltips
To customize or override the tooltips shown on Gantt tasks you need to override the default method GetTooltip(obj, _) of the gantt.views[‘chart/bars’] which recieves the obj parameter with task data information, _ parameter which is the translator function of jet locale plugin and returns a string with HTML content of a tooltip for tasks (row 50 ):
GetTooltip(obj, _) {
const parser = webix.i18n.longDateFormatStr;
let tip = `${obj.text || _("(no title)")}<br>
<br>${_("Start date")}: ${parser(obj.start_date)}`;
if (obj.type != "milestone") {
tip += `<br>${_("End date")}: ${parser(obj.end_date)}
<br>${_("Lasts")} ${obj.duration} ${obj.duration > 1 ? _("days") : _("day")}`;
}
return tip;
}
Please check the example: Code Snippet
6. Hiding Fields in Edit Drawer
To hide some default fields in a task editor you need to customize the gantt.views[‘task/form’] and get access to the child views of the gantt form editor in the default init function where you can hide the fields you need (row 51):
init() {
super.init()
const childViews = this.Form.getChildViews()
console.log("childViews", childViews)
const slider = childViews[5].hide()
const start = childViews[2].hide()
const end = childViews[3].hide()
}
Please check the example: Code Snippet