Modal

[vin]

How do i  stop opening the modal window on double clicking a card? i do not want any modal window to open in EDIT

 <ejs-kanban #kanbanSubObj keyField='Status' cssClass='kanban-header-template'

                        [dataSource]='aSubTasksDisplay' [cardSettings]='cardSettings'

                        (dragStop)="onSubDragStop($event)">

                       <ng-template #cardSettingsTemplate let-data>

                            <form #UpdateSubItem="ngForm" novalidate (ngSubmit)="UpdateBacklogSubItem(UpdateSubItem, data)">

                                <div class="{{data.nodeTypeColor}}">

                                    <div class="e-card-content">

                                        <table class="card-template-wrap">

                                            <tbody>

                                                <tr>

                                                    <td colspan="2" class="font-weight-bold">

                                                        <label for="feature" class="labels cardHeader">

                                                            Name:

                                                        </label><br>

                                                        {{data.itemName}}

                                                    </td>

                                                </tr>

                                                <tr>

                                                   

                                                    <td colspan="2">

                                                        <label for="feature" class="labels cardHeader">

                                                            Item Id:

                                                        </label><br>

                                                        {{data.itemNumber}}

                                                    </td>

                                                </tr>

                                                <tr>

                                                  

                                                    <td colspan="2">

                                                       

                                                        <label for="feature" class="labels cardHeader">

                                                            Assign To:

                                                        </label><br>

                                                        <ejs-dropdownlist name="memberItem{{data.itemId}}"

                                                            class="e-error ts-bold"

                                                            [(ngModel)]="data.assignedToPersonageId"

                                                            id='memberItem{{data.itemId}}' [dataSource]='aMembers'

                                                            [fields]='memberFields' placeholder='Select member'

                                                            (change)="assignedToChange($event)">

                                                        </ejs-dropdownlist>

                                                    </td>

                                                </tr>

                                            

                                                <tr>

                                                    <td colspan="2" class="cardHeader">Update Hours:</td>

                                                </tr>

                                                <tr>

                                                    <td colspan="1">

                                                        

                                                        <label for="feature" class="labels cardHeader">

                                                            Burn:

                                                        </label><br>

                                                        <ejs-dropdownlist name="burnItem{{data.itemId}}"

                                                            class="e-error ts-bold" [(ngModel)]="data.hourUsageType"

                                                            id='burnItem{{data.itemId}}' [dataSource]='timeTypesData'

                                                            [fields]='timeFields' placeholder='Select Type'  #burnItem="ngModel"

                                                            (change)="assignedToChange($event)">

                                                        </ejs-dropdownlist>

                                                    </td>

                                                    <td colspan="1">

                                                        

                                                        <label for="feature" class="labels cardHeader">

                                                            Time:

                                                        </label><br>

                                                        <input type="text" class="form-control e-input"

                                                            name="estimatedPoints{{data.itemId}}"

                                                            id="estimatedPoints{{data.itemId}}"

                                                            placeholder="Enter Usage" #estimatedPoints="ngModel"

                                                            [(ngModel)]="data.hourUsage" title="Enter Usage">

                                                    </td>

                                                </tr>

                                               

                                                <tr>

                                                    <td>

                                                        <button type="submit"

                                                            class="btn btn-primary btn-widthV ">Update</button>

                                                    </td>

                                                    <td> </td>

                                                </tr>

                                            </tbody>

                                        </table>

                                    </div>

                                </div>

                            </form>

                        </ng-template>

</ejs-kanban>

[Indrajith Srinivasan]

Hi Vin, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. You can prevent the Edit dialog from being opened, in the dialogOpen event of the Kanban component. We have also prepared a sample, that tries to meet your requirements. 

 

 

onOpen(args) { 

    // Preventing the modal dialog Open 

    args.cancel = true; 

  } 

 

 

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

 

API link: https://ej2.syncfusion.com/angular/documentation/api/kanban#dialogopen 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[vin]

Thanks

[Revanth Krishnan]

Hi Vin, 

 

Please let us know if you need any further assistance. 

 

Regards, 

Revanth