Remove Gantt chart check boxes

[Maserati]

1. How do i remove the check box column?
2. How do i stop multiple selections? I only want to be able to select (highlight) one task at a time

thanks

[admin]

Hi 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/

[Maserati]

Personally i can’t see the point but be that as it may how do I limit the user to single selection?

[YavorDashev]

Hi 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/

[Maserati]

Yavor,
please can you advise how i add this to a Blazor page?
Thanks
John
 

[YavorDashev]

Hi 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/

[Author]

Posts