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

How do I add more than one custom field to event editor?

Thread ID:

Created:

Updated:

Platform:

Replies:

148971 Nov 9,2019 10:12 PM UTC Nov 11,2019 11:35 AM UTC Angular - EJ 2 1
loading
Tags: Schedule
Youssef Lakdime
Asked On November 9, 2019 10:12 PM UTC

Hi, i took a close look at this page:https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#add-additional-fields-to-the-default-editor
The example shows how to add a dropdown list. However, how can I add multiple additional fields? For example I want one extra dropdown called 'client' , but also one extra checkbox which is a boolean 'business' and another number inputfield called 'distance'.
What part of the code should I replicate in order to add multiple fields, in that onPopupOpen() function?
So I dont want just the dropDownList in below code:
onPopupOpen(args: PopupOpenEventArgs): void {
if (args.type === 'Editor') {
// Create required custom elements in initial time
if (!args.element.querySelector('.custom-field-row')) {
let row: HTMLElement = createElement('div', {className: 'custom-field-row'});
let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
let container: HTMLElement = createElement('div', {className: 'custom-field-container'});
let inputEle: HTMLInputElement = createElement('input', {
className: 'e-field', attrs: {name: 'Client'}
}) as HTMLInputElement;
container.appendChild(inputEle);
row.appendChild(container);
let dropDownList: DropDownList = new DropDownList({
dataSource: [
{text: 'Person1', value: 'Person1'},
{text: 'Person2', value: 'Person2'},
{text: 'Person3', value: 'Person3'},
{text: 'Person4', value: 'Person4'}
],
fields: {text: 'text', value: 'value'},
value: (<{ [key: string]: Object }>(args.data)).Client as string,
floatLabelType: 'Always', placeholder: 'Client'
});
dropDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'Client');

}

}
}
(sorry for posting this in two forum parts as I didnt know where to post it exactly)

Vinitha Devi Murugan [Syncfusion]
Replied On November 11, 2019 11:35 AM UTC

Hi Youssef, 
 
Syncfusion Greetings. 
Based on your shared requirement, we have prepared the sample to add dropdownlist, checkbox and input filed on default window . Please refer the below sample. 
 
 
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