Kanban lock

[vin]

How do i lock the Kanban so i do not allow edit or Drag/drop any items?

Need sample

Thanks

[Gunasekar Kuppusamy]

Hi Vin,

Greetings from Syncfusion support.

We have validated your reported query "How do I lock the Kanban so I do not allow edit or Drag/drop any items?".

We can achieve this functionality using kanban allowDragAndDrop property and dialogOpen event.

We have prepared a sample for your reference

Code snippets:

<ejs-kanban #kanbanObj keyField='Status' [allowDragAndDrop]="false" [dataSource]='kanbanData'  

[cardSettings]='cardSettings' (dialogOpen)="dialogOpen($event)">  

<e-columns>  

    <e-column headerText='To Do' keyField='Open'></e-column>  

    <e-column headerText='In Progress' keyField='InProgress'></e-column>  

    <e-column headerText='Testing' keyField='Testing'></e-column>  

    <e-column headerText='Done' keyField='Close'></e-column>  

</e-columns>  

</ejs-kanban>  

 public dialogOpen = (args): void => {

    args.cancel = true;

  };

Sample: https://stackblitz.com/edit/angular-zqmag3?file=app.component.ts

  

  

Please check the sample and let us know if the solution helps.

Regards,

Gunasekar

[vin]

Can i lock individual card in the kanban ?

insted of locking the whole Kanban?

[Gunasekar Kuppusamy]

Hi Vin,

Good day to you.

We have validated your reported query "Can I lock the individual card in the kanban? instead of locking the whole Kanban?"

Yes,  We can lock the particular card based on its id using the kanban dialogOpen and dragStart event.

We have prepared a sample for your reference.

Code snippets:

<ejs-kanban #kanbanObj  [cardSettings]='cardSettings' (dialogOpen)="dialogOpen($event)" (dragStart)="dragStart($event)">  

. . .  

    </ejs-kanban>  

public dialogOpen = (args): void => {

    if (args.data.Id === 'Task 1') {

      args.cancel = true;

    }

  };

  public dragStart = (args): void => {

    debugger;

    if (args.data[0].Id === 'Task 1') {

      args.cancel = true;

    }

  };

Sample: https://stackblitz.com/edit/angular-zqmag3-vwmaby?file=app.component.html

Please check the sample and let us know if the solution helps.

Regards,

Gunasekar