JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Gantt › Remove Gantt chart check boxes
Tagged: gantt, gantt chart checkboxes, gantt selection
- This topic has 5 replies, 3 voices, and was last updated 3 years, 2 months ago by YavorDashev.
-
AuthorPosts
-
August 31, 2021 at 10:36 am #102179MaseratiMember
- How do i remove the check box column?
- How do i stop multiple selections? I only want to be able to select (highlight) one task at a time
thanks
August 31, 2021 at 10:38 am #102180adminKeymasterHi Maserati,
Gantt Checkboxes are currently built-in and there’s no option to remove them. This was requested by other users, too and is a priority item for out team.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/August 31, 2021 at 2:23 pm #102181MaseratiMemberPersonally i can’t see the point but be that as it may how do I limit the user to single selection?
September 1, 2021 at 1:44 pm #102182YavorDashevMemberHi Maserati,
By default the GanttChart doesn’t support single selection, but I have created a JavaScript workaround for your scenario which enables you to have such functionality.
JavaScript part:const ganttChart = document.querySelector('smart-gantt-chart'); let selectedTasks; ganttChart.addEventListener('change', (event) => { selectedTasks= ganttChart.getSelectedTasks(); if ( selectedTasks.length >= 1 ) { ganttChart.classList.add('disabled-selection'); } else { ganttChart.classList.remove('disabled-selection'); } });
Also some necessary CSS:
.smart-gantt-chart.disabled-selection .smart-table-select-row{ pointer-events: none; } .smart-gantt-chart.disabled-selection .smart-table-select-row.selected { pointer-events: initial; }
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/September 21, 2021 at 2:30 pm #102257MaseratiMemberYavor,
please can you advise how i add this to a Blazor page?
Thanks
John
September 22, 2021 at 8:35 am #102274YavorDashevMemberHi Maserati,
If you want to have this functionality but with Blazor/C# I have prepeared another code snippet for you to showcase you how to achieve this.
In your razor file:<style> .smart-gantt-chart.disabled-selection .smart-table-select-row{ pointer-events: none; } .smart-gantt-chart.disabled-selection .smart-table-select-row.selected { pointer-events: initial; } </style> <GanttChart class="@ganttSelectionClass" @ref="ganttChart" OnChange="@ChangedHandler" DataSource="Data" OnProgressChangeEnd ="@ProgressChangedHandler" TaskColumns="taskColumns" DurationUnit="Duration.Hour"></GanttChart> @code { GanttChart ganttChart; string ganttSelectionClass= ""; public async void ChangedHandler(Event args) { IEnumerable<object> SelectedTasks = await ganttChart.GetSelectedTasks(); List<object> tasksList = SelectedTasks.ToList(); int maxCount = 1; if (tasksList.Count() >= maxCount) { ganttSelectionClass= "disabled-selection"; } else { ganttSelectionClass= ""; } }
Let me know what you think!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.