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.
Hi,
I want to customize a checkbox exactly beside existing two checkboxes, and also an event should be trigeered when the checkbox is checked, once the checkbox is checked it should display two radio buttons just like timezone checkbox
Please suggest a solution Asap
This requirement can be achieved with the help of the popupOpen event of the Schedule and the change event of the CheckBox as shared in the below snippet.
Sample: https://stackblitz.com/edit/angular-hdtaul?file=app.component.ts
Api: https://ej2.syncfusion.com/angular/documentation/api/check-box/checkBoxModel/#change
https://ej2.syncfusion.com/angular/documentation/api/schedule#popupopen
[app.component.ts]
|
@Component({ // tslint:disable-next-line:component-selector selector: 'app-root', templateUrl: 'app.component.html', styles: [ `.custom-field-container { margin-left: 10px; }`, `.default-field-container{ display: none; }`, `.e-enable{ display: block; }`, ], })
public onPopupOpen(args: PopupOpenEventArgs): void { if (args.type === 'Editor') { if (!args.element.querySelector('.custom-field-container')) { // Create required custom elements in initial time const formElement: HTMLElement = args.element.querySelector( '.e-schedule-form' ) as HTMLElement; const container: HTMLElement = createElement('div', { className: 'custom-field-container', }); const inputEle: HTMLElement = createElement('input', { className: 'e-field', attrs: { label: 'Default' }, }); ( formElement.querySelector('.e-all-day-time-zone-row') as HTMLElement ).appendChild(container); container.appendChild(inputEle); const checkbox: CheckBox = new CheckBox({ label: 'Default', change: this.onChange.bind(this), }); checkbox.appendTo(inputEle); inputEle.setAttribute('name', 'Default'); const defaultContainer: HTMLElement = createElement('div', { className: 'default-field-container ', }); const inputEle1: HTMLElement = createElement('input', { className: 'e-field', attrs: { label: 'Radiobutton' }, }); inputEle1.setAttribute('data-name', 'state'); const inputEle2: HTMLElement = createElement('input', { className: 'e-field', attrs: { label: 'Radiobutton' }, }); inputEle2.setAttribute('data-name', 'state'); formElement.firstChild.insertBefore( defaultContainer, args.element.querySelector('.e-time-zone-row') ); defaultContainer.appendChild(inputEle1); defaultContainer.appendChild(inputEle2); const radiobutton1: RadioButton = new RadioButton({ label: 'Radiobutton1', name: 'state', checked: true, }); const radiobutton2: RadioButton = new RadioButton({ label: 'Radiobutton2', name: 'state', }); radiobutton1.appendTo(inputEle1); radiobutton2.appendTo(inputEle2); } } } private onChange(args: ChangeEventArgs): void { const radiobuttondiv: HTMLElement = document.querySelector( '.default-field-container' ) as HTMLElement; if (args.checked) { addClass([radiobuttondiv], 'e-enable'); } else { removeClass([radiobuttondiv], 'e-enable'); } } |
Hi ,
Thank you for the snippet, this is what I was looking for and it really helped me,
Just want to one more customization that is when I select the radio button I need a particular time slot(8:00 Am - 12 PM) to be triggered to starttime and endtime, is it possible?
This is possible with the help of the radio button's change event.
Sample: https://stackblitz.com/edit/angular-hdtaul-ggcq3u?file=app.component.ts
Api: https://ej2.syncfusion.com/angular/documentation/api/radio-button/#change
[app.component.ts]
|
public onPopupOpen(args: PopupOpenEventArgs): void { if (args.type === 'Editor') { if (!args.element.querySelector('.custom-field-container')) { const radiobutton1: RadioButton = new RadioButton({ label: '8:00 Am - 12 PM', name: 'state', value: '1', change: this.OnChange.bind(this), }); const radiobutton2: RadioButton = new RadioButton({ label: '12 PM - 4: 00 PM', name: 'state', change: this.OnChange.bind(this), value: '2', }); radiobutton1.appendTo(inputEle1); radiobutton2.appendTo(inputEle2); } } } private OnChange(args): void { const startDate = (document.getElementById('StartTime') as any) .ej2_instances[0].value; const date1 = new Date(startDate.setHours(args.value === '1' ? 8 : 12, 0)); (document.getElementById('StartTime') as any).ej2_instances[0].value = date1; const EndDate = (document.getElementById('EndTime') as any).ej2_instances[0] .value; const date2= new Date(EndDate.setHours(args.value === '1' ? 12 : 16, 0)); (document.getElementById('EndTime') as any).ej2_instances[0].value = date2; } |
