Milestone in Export pdf


#1

Hi,
I am not able to see Milestone in exported pdf.

could you please help on this.

Thanks


Gantt milestone export to files
#2

Hello Prashant,
If you draw the milestones with the help of the addTaskLayer feature, you need to export with the raw: true parameter and include the styles into the header parameter:
https://docs.dhtmlx.com/gantt/desktop__export.html#customstylefortheoutputfile
Here is an example:
http://snippet.dhtmlx.com/5/caf1e07af

If you render tasks with the split mode and there is a milestone subtask, it should be displayed regardless of the raw: true parameter:
http://snippet.dhtmlx.com/5/f800a91f6

If you have a different use case, probably, it is related to the Gantt configuration, but it is hard to suggest what might be wrong as I don’t see your code.
In that case, please, add your configuration in the following snippet and make sure that the issue is reproduced there:
https://snippet.dhtmlx.com/38ee1b370
Then, click on the Share button and send me the link.
Or send me a ready demo with all the necessary Javascript and CSS files so that I can reproduce the issue locally.


#3

Thanks for the reply.

We are rendering milestone with task_text as part of ganttTemplates along with bar values.

ganttTemplates: {
task_text: taskBarText()
}

const taskBarText = () => (start, end, task) => {
return renderToString(

{task.isMilestone && }

);
};

css -
milestoneMark: {
boxSizing: ‘border-box’,
transform: ‘rotate(45deg)’,
backgroundColor: theme.palette.task.milestone,
border: 1px solid ${theme.palette.task.milestone},
width: theme.spacing(2.5),
height: theme.spacing(2.5),
margin: ‘4px -12px 0px auto’,
float: ‘right’,
position: ‘absolute’,
right: 0,
borderRadius: ‘2px’
}


#4

Hello Prashant,
Thank you for the clarification.
The elements inside the task_text template are also included when you export with the raw: true parameter:
http://snippet.dhtmlx.com/5/978216c24
http://snippet.dhtmlx.com/5/d488c464e
So, you need to make sure that you include the styles inside the header parameter:

header: "<style>" +document.getElementById("styles").innerHTML+"</style>"

#5

Thanks for the reply.

We have React app where style name is being create randomly. this document.getElementById(“styles”).innerHTML does not work in react app.

is there any other way?


#6

Hello Prashant,
In that case, you need to find a different way to add the styles. For example, you can manually copy them to the export function:
https://snippet.dhtmlx.com/5/b7ef7c6bc


#7

Hi,

Thanks for the reply.

We tried this approach also. It worked but We are seeing another issue. the mark is not visible completely .


#8

Hello Prashant,
It is hard to suggest what might be wrong as I don’t see your code.

Please, add your configuration in the following snippet and make sure that the issue is reproduced there:
https://snippet.dhtmlx.com/38ee1b370
Then, click on the Share button and send me the link.
Or send me a ready demo with all the necessary Javascript and CSS files so that I can reproduce the issue locally.