Hello, i have a few questions , can i rewrite function on double click to tasks ?
https://gyazo.com/41544d11609d60734da7a5211b7594ac
I want that top level tasks, without parents were closed at first, after double clicking on it, its shew only childs.
And edit button, cant find how to add it.
Also adding ‘priority’ string to this for filter
https://gyazo.com/1fdb87d489a8e213f91eef6d5eb3afd1
Any advices or links to documantations also great, or maybe those options only in PRO version ?
Hello,
I want that top level tasks, without parents were closed at first, after double clicking on it, its shew only childs.
By default, Gantt doesn’t open tasks unless they have the open parameter set to true or if you use the gantt.config.open_tree_inititially = true property.
To manually close all tasks, you need to use the gantt.eachTask and gantt.close methods:
https://docs.dhtmlx.com/gantt/api__gantt_eachtask.html
https://docs.dhtmlx.com/gantt/api__gantt_close.html
It is not necessary to rewrite the double-click function. You can make API calls inside the onTaskDblClick event handler and return false to prevent the default action:
https://docs.dhtmlx.com/gantt/api__gantt_ontaskdblclick_event.html
And edit button, cant find how to add it.
Gantt doesn’t have built-in buttons in the grid. But you can show any HTML elements there if you return them as a string in the column template:
{name:"edit", label:"edit", template: function(task){
return "<input type=button value=edit onclick=gantt.showLightbox("+task.id+")>"
}},
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates
Also adding ‘priority’ string to this for filter
To add a section into the default editing form (the lightbox), you need to edit the gantt.config.lightbox.sections property.
If you want to add a dropdown element, you need to use the “Select control”:
https://docs.dhtmlx.com/gantt/desktop__select.html
And there are other sections available:
https://docs.dhtmlx.com/gantt/desktop__textarea.html
https://docs.dhtmlx.com/gantt/desktop__duration.html
https://docs.dhtmlx.com/gantt/desktop__checkbox.html
https://docs.dhtmlx.com/gantt/desktop__radio.html
https://docs.dhtmlx.com/gantt/desktop__template.html
You can read more about it in the following article:
https://docs.dhtmlx.com/gantt/desktop__default_edit_form.html
Any advices or links to documantations also great, or maybe those options only in PRO version ?
The features you mentioned, work in the Standard version. The following article contains the list of features that available only in the PRO version:
https://docs.dhtmlx.com/gantt/desktop__editions_comparison.html
Here is an example of how it might work with the features you requested:
https://snippet.dhtmlx.com/6d4ed19a5
Hello, thx for your help, but a i missed few things, like, i want that edit button(icon) was like here with add and delete https://docs.dhtmlx.com/gantt/media/desktop/custom_elements_grid_columns.png
tried this http://snippet.dhtmlx.com/afb3cde34 but it gaves error undefiend colHeader, and where get it, i have no clue
i tried also this http://snippet.dhtmlx.com/38006b081 but it shows only 1 add button(icon) there’s probem to load icons ?
locally giving another error https://gyazo.com/b37806bf19a300d74c42832e35021ef4
also scoller didnt work in greed
And last questions, i’m using laravel, getting data like so
var xhr = gantt.ajax;
// // HTTP GET
xhr.get({
url: “/api/data”,
mode: “REST”,
headers: {
‘Authorization’: 'Bearer ’ + token,
}
}).then(function (resp) {
gantt.clearAll();
gantt.parse(resp.responseText);
});
So it’s showing new data, but if i want show only childs without parent its not working
Hello,
You need to copy all the necessary code from the sources to get all the functionality you need.
The colHeader variable is used in the header to create new tasks:
If you want to add buttons like in the following sample, you need to add the font-awesome library and add CSS rules:
https://docs.dhtmlx.com/gantt/samples/07_grid/07_custom_buttons.html
Font awesome:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?v=6.1.7">
Style rules:
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.fa {
cursor: pointer;
font-size: 14px;
text-align: center;
opacity: 0.2;
padding: 5px;
}
.fa:hover {
opacity: 1;
}
.fa-pencil {
color: #ffa011;
}
.fa-plus {
color: #328EA0;
}
.fa-times {
color: red;
}
</style>
Configuration:
var colHeader = '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.createTask()"></div>',
colContent = function (task) {
return ('<i class="fa gantt_button_grid gantt_grid_edit fa-pencil" onclick="clickGridButton(' + task.id + ', \'edit\')"></i>' +
'<i class="fa gantt_button_grid gantt_grid_add fa-plus" onclick="clickGridButton(' + task.id + ', \'add\')"></i>' +
'<i class="fa gantt_button_grid gantt_grid_delete fa-times" onclick="clickGridButton(' + task.id + ', \'delete\')"></i>');
};
gantt.config.columns = [
{name: "text", tree: true, width: '*', resize: true},
{name: "start_date", align: "center", resize: true},
{name: "duration", align: "center"},
{
name: "buttons",
label: colHeader,
width: 75,
template: colContent
}
];
function clickGridButton(id, action) {
switch (action) {
case "edit":
gantt.showLightbox(id);
break;
case "add":
gantt.createTask(null, id);
break;
case "delete":
gantt.confirm({
title: gantt.locale.labels.confirm_deleting_title,
text: gantt.locale.labels.confirm_deleting,
callback: function (res) {
if (res)
gantt.deleteTask(id);
}
});
break;
}
}
Here is the snippet with that functionality:
http://snippet.dhtmlx.com/b30025000
also scoller didnt work in greed
If you want to add the scrollbars in the grid, you need to change the layout configuration:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#scrollbar
First, it is better to use the rows inside columns structure (cols:[rows[]]).
You need to specify the vertical and horizontal scrollbars for the grid and put them in the right place:
In the following snippet, you can see how it works:
http://snippet.dhtmlx.com/084e66435
So it’s showing new data, but if i want show only childs without parent its not working
If that task has the parent parameter, but that parent task doesn’t exist, Gantt won’t the child task. There is no way to change that unless you modify the source code.
So, you need to load the data with parent tasks and hide them in the onBeforeTaskDisplay event handler:
http://snippet.dhtmlx.com/95c9fa4fe
Or reassign the parent parameter:
http://snippet.dhtmlx.com/27b086415
Thx for your time and your help