kanban

[vin]

When i change and update a Card - dropdown and input - Not able to retrieve data

After clicking the Submit button, i am not seeing the dropdown selected value and Input value in aSubTasks object

Also, can we make the card width/height min fixed size

[(ngModel)]="data.itemCreatedByName"

[(ngModel)]="data.itemCreatedByNameId"

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

                        [dataSource]='aSubTasks' [cardSettings]='cardSettings' (dialogOpen)="onDialogOpen($event)"

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

                        

                        <e-columns>

                            <e-column *ngFor="let column of columns;" headerText={{column.headerText}}

                                keyField='{{column.keyField}}'>

                                <ng-template #template let-data>

                                    <div class="header-template-wrap">

                                        <div class="header-icon e-icons {{data.keyField}}"></div>

                                        <div class="header-text cardHeaderB">{{data.headerText}}</div>

                                    </div>

                                </ng-template>

                            </e-column>

                        </e-columns>

                        <ng-template #cardSettingsTemplate let-data>

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

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

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

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

                                            <tbody>

                                                <tr>

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

                                                        {{data.itemName}}</td>

                                                </tr>

                                                <tr>

                                                    <td class="cardHeader">Item No:</td>

                                                    <td>{{data.itemNumber}}</td>

                                                </tr>

                                                <tr>

                                                    <td class="cardHeader">Assigned To:</td>

                                                    <td>

                                                        <!-- {{data.itemCreatedByName}} -->

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

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

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

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

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

                                                        </ejs-dropdownlist>

                                                    </td>

                                                </tr>

                                                <tr>

                                                    <td class="cardHeader">Priority:</td>

                                                    <td>{{data.Priority}}</td>

                                                </tr>

                                                <tr>

                                                    <td class="cardHeader">Estimate:</td>

                                                    <td>

                                                       

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

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

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

                                                            placeholder="Enter Backlog Name" #estimatedPoints="ngModel"

                                                            [(ngModel)]="data.estimatedPoints" title="Estimated Points">

                                                    </td>

                                                </tr>

                                                

                                                <tr>

                                                    <td>{{data.Tags}} </td>

                                                    <td>

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

[vin]

When i change and update a Card - dropdown and input - Not able to retrieve data

After clicking the Submit button, i am not seeing the dropdown selected value and Input value in aSubTasks object

Also, can we make the card width/height min fixed size

[(ngModel)]="data.itemCreatedByName"

[(ngModel)]="data.itemCreatedByNameId"

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

                        [dataSource]='aSubTasks' [cardSettings]='cardSettings' (dialogOpen)="onDialogOpen($event)"

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

                        

                        <e-columns>

                            <e-column *ngFor="let column of columns;" headerText={{column.headerText}}

                                keyField='{{column.keyField}}'>

                                <ng-template #template let-data>

                                    <div class="header-template-wrap">

                                        <div class="header-icon e-icons {{data.keyField}}"></div>

                                        <div class="header-text cardHeaderB">{{data.headerText}}</div>

                                    </div>

                                </ng-template>

                            </e-column>

                        </e-columns>

                        <ng-template #cardSettingsTemplate let-data>

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

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

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

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

                                            <tbody>

                                                <tr>

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

                                                        {{data.itemName}}</td>

                                                </tr>

                                                <tr>

                                                    <td class="cardHeader">Item No:</td>

                                                    <td>{{data.itemNumber}}</td>

                                                </tr>

                                                <tr>

                                                    <td class="cardHeader">Assigned To:</td>

                                                    <td>

                                                        <!-- {{data.itemCreatedByName}} -->

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

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

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

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

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

                                                        </ejs-dropdownlist>

                                                    </td>

                                                </tr>

                                                <tr>

                                                    <td class="cardHeader">Priority:</td>

                                                    <td>{{data.Priority}}</td>

                                                </tr>

                                                <tr>

                                                    <td class="cardHeader">Estimate:</td>

                                                    <td>

                                                       

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

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

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

                                                            placeholder="Enter Backlog Name" #estimatedPoints="ngModel"

                                                            [(ngModel)]="data.estimatedPoints" title="Estimated Points">

                                                    </td>

                                                </tr>

                                                

                                                <tr>

                                                    <td>{{data.Tags}} </td>

                                                    <td>

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

Need help please

[Buvana Sathasivam]

Hi vin, 

 

We are currently validating your query, we will update you with further details on or before 4^th May.  

 

We appreciate your patience till then.  

Regards, 

Buvana S 

[vin]

Looking forward for your update

Thanks

[Buvana Sathasivam]

Hi Vin, 

Thanks for your pertinence. 

Query #1: When i change and update a Card - dropdown and input - Not able to retrieve data 

We have checked your reported query. But, unfortunately we were unable to reproduce your reported problem. We were able to retrieve the data from changed card using template driven angular form. We have rendered the angular template driven form inside the card template.  When you use [{ngModel}] on element, you must define the name attribute for that element. We have retrieved the modified data when click the submit button using below code. 

app.component.html 

 <ejs-dropdownlist name="Status" required #book='ngModel' [(ngModel)]='data.Status' 

                [dataSource]='statusData' [placeholder]='status' floatLabelType='Auto'> 

              </ejs-dropdownlist> 

app.component.ts 

 onSubmit(form: NgForm) { 

    console.log("Your form data : ", form.value); 

  } 

Note: cardSettings.headerField property act as a primary key for Kanban component. You can’t able to change the primary key field. 

API link: https://ej2.syncfusion.com/angular/documentation/kanban/cards/#header 

Query #2: After clicking the Submit button, i am not seeing the dropdown selected value and Input value in aSubTasks object  

We have specified the collection of object to the Kanban datasource. So, we need to manually assigned the changed data to the Kanban datasource when submit button click using below code. 

 onSubmit(form: NgForm) { 

   let cardId: string = event.currentTarget 

      .closest(".e-card") 

      .getAttribute("data-id"); // Get the corresponding card id 

    let cardData = this.data.filter(obj => obj.Id == cardId); // Filter the card 

    cardData[0].Assignee = form.value.Assignee; // Changed their value as per form 

     …….. 

    this.kanban.refresh(); // Refresh the Kanban board 

  } 

Query #2: Also, can we make the card width/height min fixed size 

 

By default, our Kanban card width is set as 100% based on individual column width and 50px minimum height is set on each card. If you wish to change the minimum height for the card, you will use the below CSS code. 

 

.e-kanban .e-card { 

  min-height: 200px !important; 

} 

 

   

Please find the below sample for your reference. 

https://stackblitz.com/edit/angular-1ssa9h-ogoap9?file=app.component.html 

Can you please check the above sample and let us know if you face any difficulties? 

Regards, 

Buvana S