Data Binding in Customized Editor Template

[amrutha]

Hi Team, 

I have customized the editor template as  below.  

THis is the sample plunker I have creted https://stackblitz.com/edit/angular-2icgfu-aplmaj

but the data is not getting bound on edit mode.

<ng-template #editorTemplate let-data>

<table class="custom-event-editor" width="100%" cellpadding="5">

<tbody>

<tr>

<td class="e-textlabel">Service By:td>

<td colspan="4">

<ejs-dropdownlist id='employeeId' class="e-field" data-name="employeeId" placeholder='Choose Status'

[dataSource]='resourceDataSource' [fields]='employeeFields' value='{{data.employeeId}}'>

ejs-dropdownlist>

td>

tr>

<tr>

<td class="e-textlabel">Client Nametd>

<td colspan="4">

<ejs-dropdownlist id='clientId' class="e-field" data-name="clientId" placeholder='Choose Status'

[dataSource]='clients' [fields]='statusFields' value='{{data.clientId}}'>

ejs-dropdownlist>

td>

tr>

<tr>

<td class="e-textlabel">Fromtd>

<td colspan="4">

<input id="StartTime" class="e-field" type="text" name="StartTime" />

td>

tr>

<tr>

<td class="e-textlabel">Totd>

<td colspan="4">

<input id="EndTime" class="e-field" type="text" name="EndTime" />

td>

tr>

<ejs-treeview class= 'e-field' data-name="services" id='services' [fields]='field' [showCheckBox]='true' >ejs-treeview>

tbody>

table>

ng-template>

Please provide me the solution.

Regards,

Amrutha

[Karthigeyan Krishnamurthi]

Hi Amrutha, 

 

Syncfusion greetings. 

 

In editor template, the clientId value is set as String type which is the cause. Please use the below code example to overcome the reported issue. 

https://stackblitz.com/edit/angular-2icgfu-rp4xtj?file=app.component.ts 

 

<ejs-dropdownlist id='clientId' class="e-field"  data-name="clientId" placeholder='Choose Status' [dataSource]='clients' [fields]='statusFields' 

[value]="valueParser(data.clientId)"></ejs-dropdownlist> 

 

public valueParser(data: string) { 

    return parseInt(data); 

  } 

 

Regards, 

Karthi 

 

[amrutha]

Thanks Karthi , the issue resolved. 

By following the method you provided, I tried to implement the same for other dropdown I have:

I have implemented Grouping by EmployeeId in my project. So on popup as "employeeId"  exists in eventData, it should be prepopulated by default, But its not selected when I open for new  Appointment

Below is the plunker link: https://stackblitz.com/edit/angular-2icgfu-rp4xtj

<td colspan="4">

<ejs-dropdownlist id='employeeId' class="e-field" data-name="employeeId"

[dataSource]='resourceDataSource' [fields]='employeeFields' [value]="valueParser(data.employeeId)" >

</ejs-dropdownlist>

</td>

[Hareesh Balasubramanian]

Hi Amrutha, 

 

Thanks for your update. 

 

We have checked your sample in which client fields are opening properly at our end and for the same we have shared a video demo which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/146899/ze/schedule_demo1854443327 

Please check the video demo at your end, if your issue replicating steps is different from us, please share the video demo with replicating step. 

 

Regards, 

Hareesh 

[amrutha]

Hi Haresh,

Sorry the plunker I shared yesterday is not updated. This is the updated pluncker:

https://stackblitz.com/edit/angular-2icgfu-arc65q

1)  As here grouping is done by Employee Specific, when the user click on the cell, the "ServiceBy" fileld should be automaticlly popped in to the 'ServiceBy ' in the from.

Ex: If a click for appointment in 'John' , the service name should be popping as John in the appointment form.

2) As  I am checking for Responsiveness  which can be checked in the same plunker, I could see like in Mobiles and Tablets , the click event of the cell is blocked, So could you please let me  know what is another way handling the event creation?

Regards,

Amrutha

[Vinitha Devi Murugan]

Hi Amrutha, 

Thanks for the update. 

Q1: We have modified your sample to show the resource on cell click event and same can be available in below link. 

https://stackblitz.com/edit/angular-2icgfu-fif7h6?file=app.component.html  

<td class="e-textlabel">Service By:</td> 

              <td> 

                  <ejs-dropdownlist id='employeeId' class="e-field" data-name="employeeId" 

                      [dataSource]='resourceDataSource' [fields]='employeeFields'[value]="check(data)" > 

                  </ejs-dropdownlist> 

             </td> 

  public check(data:any){ 

    if(!isNullOrUndefined(data.groupIndex)){ 

    return this.scheduleObj.getResourcesByIndex(data.groupIndex).resourceData.employeeId; 

    }else { 

      return data.employeeId 

    } 

   

Q2: We had check the sample provided by you. In this sample, showQuickInfo property is set as false, so the popup is not opened when we click the cells or event. For your reference, kindly refer the below UG links for more details about this property. 

API: https://ej2.syncfusion.com/angular/documentation/api/schedule/#showquickinfo 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#quick-popups 

Kindly check the above provided links and revert us, if you have any further assistance. 

Regards, 

M.Vinitha devi