Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #102179
    Maserati
    Member
    Up
    0
    Down
    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

    #102180
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102181
    Maserati
    Member
    Up
    0
    Down

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

    #102182
    YavorDashev
    Member
    Up
    0
    Down

    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/

    #102257
    Maserati
    Member
    Up
    0
    Down

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

    #102274
    YavorDashev
    Member
    Up
    0
    Down

    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/

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.