bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
53 stars 6 forks source link

Add a way to disable the resize handle per event #10003

Closed marciogurka closed 2 weeks ago

marciogurka commented 2 weeks ago

Forum post

"Hello! - real quick, thank you so much for your speedy responses!

Current issue: I am trying to hide the resize handle on tasks with a certain kind of date. Functionally, I am able to prevent the user from being able to resize a task with this specific kind of date, but it is confusing to the user to see the handle, but not be able to resize it.

I have seen some discussion on overriding the isResizable readonly property, but those examples have been React specific. Am I maybe just misunderstand how to do this via Vue? I have tried manipulating the rightHandle, but that doesn't seem to be able to be dynamically achieved, rather you can only seem to set it false for all tasks or no tasks.

I have also tried adding a class to the parent element, where the div for the handle gets dynamically inserted, so I can use CSS to hide it. But that hasn't worked either (I attached pictures so you can see what I mean). Note: I have tried with and without ::v-deep, and moving this CSS to different components"

marciogurka commented 2 weeks ago

We have resizable getter that can be overridden in a custom TaskModel, and from there, have a custom rule to be/not to be resizable.

export default class Task extends TaskModel {

    static $name = 'Task';

    get resizable() {
        // add custom rule here
        return true;
    }

}

Then set it to the project model

const ganttConfig = {
    project: {
          taskModelClass: Task
    }
}