We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Data Binding in Customized Editor Template

Thread ID:

Created:

Updated:

Platform:

Replies:

146899 Aug 24,2019 04:47 PM UTC Aug 29,2019 12:57 PM UTC Angular - EJ 2 5
loading
Tags: Schedule
amrutha
Asked On August 24, 2019 09:03 PM UTC

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 [Syncfusion]
Replied On August 26, 2019 08:59 AM UTC

 
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. 
 
<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
Replied On August 26, 2019 06:50 PM UTC

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 [Syncfusion]
Replied On August 27, 2019 03:00 PM UTC

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. 

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
Replied On August 27, 2019 10:09 PM UTC

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 [Syncfusion]
Replied On August 29, 2019 12:57 PM UTC

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. 


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



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

Regards, 
M.Vinitha devi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon