Several Gantt Issues | Vue 3
Hello,
I am testing the Gantt solution and I setup an example based on the guide at at https://ej2.syncfusion.com/vue/documentation/gantt/getting-started-vue/. I have attached my testing file and a snapshot hereto. Is anyone successfully using the Gantt Chart with vue? Is it possible, I'm configuring it incorrectly?
Here are the issues I am facing:
- The toolbar will not show at all.
- The Selection feature doesn't work. When I click a row, nothing highlights.
- When I set the timelineSettings attribute to show the month only, I am seeing two columns as shown in the snapshot. How to remove the second row that is showing the date?
- I am unable to move the tasks on the timeline, and have the other dependent task move. I can not drag and any task.
- None of the provided modules as listed in the provide section work.
Attachment: gantt_84b82c29.zip
|
Query |
Solution | |
|
1.The toolbar will not show at all.
|
We have checked with your code snippets and we can able to render the toolbar items . We have included toolbar in the attached sample. | |
|
2. The Selection feature doesn't work. When I click a row, nothing highlights.
|
We can able to select the rows by including your code snippets. We have attached sample for your reference. | |
|
3. When I set the timelineSettings attribute to show the month only, I am seeing two columns as shown in the snapshot. How to remove the second row that is showing double the date?
|
We need some time to validate the issue and will share further details within two business days on 10th February 2022. We appreciate your patience until then. | |
|
4. I am unable to move the tasks on the timeline, and have the other dependent task move. I can not drag and drop any task.
|
We noticed that you have not included the API :allowRowDragAndDrop= "true" in your sample . We suggest you to include that in <ejsgantt> part.
Code snippets:
|
Hello Premkumar,
First, thank you for your response. I was able to resolve my issues. In short, I believe the main issue is in the documentation at https://ej2.syncfusion.com/vue/documentation/gantt/getting-started-vue/#enable-toolbar. In short, if you review this documentation, it doesn't advise to use Gantt.Inject(...) which is my main problem. It shows to use provide in the export, but not Gantt.inject(...). Actual, I've found that you don't even need to use provide.
Therefore, my recommendation is to update the Vue 3 documentation.
Please see my responses below:
- The sample you provided helped me to resolve the toolbar issue, and others that I had found after this ticket. The fix was adding Gantt.Inject(...) to my code. After that, things started working and I was able to customize the features.
- Issue was fixed using Gantt.Inject(...)
- No need to continue to research this issue for me as I was able to find out how to implement the designed results. In short, I set timelineSettings.bottomTier.unit = "None" in my returned data and now the bottom tier does not show.
- This fixed my row drag and drop issue.
