Add tab in lightbox

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,
Thank you for your reply.
Here’s a mock-up of what I’m trying to achieve:


Thanks,
Web

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("&nbsp;"); };
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