Datepicker in Kanban Dialog Template

[Adrien Pech]

Hello,

in my kanban component I would like to use a start and end date in each record.  I would like to display these in the dialog template using the date picker component provided by Syncfusion.

  

 This also works almost perfectly. 

Unfortunately, when I click on save or delete, I get the following error in the console and the data manipulation does not take place.

Without the datepicker in the template everything works fine. It seems that the datepicker and not the kanban is selected. Is there any way to make this use case work?

Best Regards, 

Adrien P.

[Gunasekar Kuppusamy]

Hi Adrien, 

Greeting from Syncfusion support.

We have validated your reported query from our end. Unfortunately, we are not able to reproduce the issue from our end.

We have prepared a sample for your reference.

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

If you are still facing the issue, please share the following details, 

• If possible, please modify the above sample to reproduce the issue
• Any video reference for issue reproducing case
• The exact package version you are using.

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

Regards, 

Gunasekar 

[Adrien Pech]

Hello Gunasekar,

I am very sorry for the late reply. I looked at your example and found the problem in my project. It was because of setting the class "e-field". But now if you change the date, save and open the dialog again, the date fields have the old values. How can I set the new values for the datepicker?

Best Regards,

Adrien P.

[Gunasekar Kuppusamy]

Hi Adrien,

Good day to you.

We have validated your reported issue from our end. Currently, Kanban doesn't support the DateTime type components directly, in the dialog template. So you need to set the value manually.

We have modified the sample for your reference. In this sample, we have updated values using the dialogClose event.

Code Snippets:

app.component.ts

 onDialogClose(args: DialogEventArgs) {

    args.data.StartDate =

      args.element.querySelector('#StartDate').ej2_instances[0].value;

    args.data.EndDate =

      args.element.querySelector('#EndDate').ej2_instances[0].value;

  }

app.component.html

<div class="control-section">

    <div class="col-lg-9 content-wrapper">

      <div id="container">

        <ejs-kanban

          #kanbanObj

          keyField="Status"

          [dataSource]="kanbanData"

          [cardSettings]="cardSettings"

          (dialogClose)="onDialogClose($event)"

        >

         . . .

          <ng-template #dialogSettingsTemplate let-data>

            <table>

              <tbody>

                  <td class="e-label">StartDate</td>

                  <td>

                    <div class="e-float-input e-control-wrapper">

                      <ejs-datepicker

                        id="StartDate"

                        [value]="data.StartDate"

                        format="dd.MM.yyyy"

                      ></ejs-datepicker>

                    </div>

                  </td>

                </tr>

                <tr>

                  <td class="e-label">EndDate</td>

                  <td>

                    <div class="e-float-input e-control-wrapper">

                      <ejs-datepicker

                        id="EndDate"

                        [value]="data.EndDate"

                        format="dd.MM.yyyy"

                      ></ejs-datepicker>

                    </div>

                  </td>

                </tr>

              </tbody>

            </table>

          </ng-template>

        </ejs-kanban>

      </div>

    </div>

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

Please check the sample and let us know if you have any concerns.

Regards,

Gunasekar