Hi,
How do you add a new tab in the lightbox section right after the task text? Once clicked, it will hide the description and will show a different info in a table format.
Thanks
Hi,
How do you add a new tab in the lightbox section right after the task text? Once clicked, it will hide the description and will show a different info in a table format.
Thanks
Hi,
there is no built-in way to do so. You can implement a custom element for the lightbox, and make it not an editor but a tab control. Define an empty set/get_value methods and add a onclick handlers for needed elements. On click you can manually manipulate the lightbox structure and build it as required
docs.dhtmlx.com/gantt/desktop__c … ditor.html
If you provide a mockup of the desired look of the lightbox, maybe I’ll be able to give more detailed suggestion.
Hi,
regarding a custom button in the header of the lightbox, you can add it using lightbox_header template
JS:
function toggleScopeOfWorks(){
var task = gantt.getState().lightbox;
dhtmlx.message(task);
}
gantt.templates.lightbox_header = function(start, end, task){
var els = [
"<b>"+gantt.templates.task_date(start, end, task)+"</b>",
gantt.templates.task_text(start, end, task),
"<div class='header-button' onclick='toggleScopeOfWorks()'>SCOPE OF WORKS</div>"
];
return els.join(" ");
};
CSS:
.header-button {
position: absolute;
right: 5px;
top: 2px;
padding: 5px;
background: #aeaeae;
color: white;
}
The Scope of Works table can be implemented as a custom lightbox control
docs.dhtmlx.com/gantt/desktop__c … ditor.html
‘render’ should define a common layout (probably a container for the table),
‘set_value’ should generate a table with the data of the related event.
you can add all controls to the lightbox configuration (text, duration, scope of works).
And change visibility of certain controls using css [b]display=“none”/b or [b]display = “”/b. DOM node of the control can be accessed using following method:
docs.dhtmlx.com/gantt/api__gantt … ction.html
E.g.
[code]gantt.getLightboxSection(“description”).header.style.display = “none”;
gantt.getLightboxSection(“description”).node.style.display = “none”;
gantt.resizeLightbox();[/code]
Hi Aliaksandr,
Thank you for this. It's working but my problem is that. The customization I made for the lightbox (i.e. show Scope Of Works table) is applied only after I cancel the lightbox and open it again. How can you show the changes made once the Scope of Works button is clicked?
Thanks,
Web