I am looking at some starting point where i can add controls to accordion dynamically. I have below Code
as shown above i am not able to append controls into Accordion pane. I have below code
then i am trying to find the Panel by using getByElementId, which returns null for some reason. I think once we will have panel object then we can append the control like below,
https://stackblitz.com/edit/github-lushmu-aoqgns?file=src%2Fapp%2Fapp.component.html (this sample uses directive but i am looking at something purely from code side)
Hi PDev,
Sample: https://stackblitz.com/edit/github-lushmu-mvn8mp?file=src%2Fapp%2Fapp.component.ts
Api: https://ej2.syncfusion.com/angular/documentation/api/accordion#expanded
You can dynamically add a text box to an Accordion by using the expanded event, as shown in the snippet below.
[app.component.ts]
click(event: any) { event.target.disabled = true; var accordion = (document.querySelector('.e-accordion') as any).ej2_instances[0]; accordion.addItem({ header: 'This is Headeer', content: "<input id='panel'></input>" }); }
public expanded(e: ExpandEventArgs) { let panel: HTMLElement = document.querySelector('#panel') as HTMLElement; if (e.isExpanded == true && panel && !panel.classList.contains('e-textbox')) { const textbox: TextBox = new TextBox({ placeholder: 'enter text here' }); textbox.appendTo(panel); } } |
[app.component.html]
<button id="add-item" (click)="click($event)">Add item</button> <ejs-accordion (expanded)="expanded($event)" > </ejs-accordion> |
Regards,
Swathi Ravi
Thanks, can you please slightly modify this sample for Page Load. when First Panel is expanded by default
Additionally, I am converting already existing control into Syncfusion control e.g. <input> inoto Syncfusion TextBox by using this thread here https://www.syncfusion.com/forums/178432/dynamically-convert-html-dropdown-into-syncfusion-control This will allow me to convert controls. Once that is done I want to Append/Move these upgraded controls to Panel.
Just to give a reference. These are SharePoint pages. where in SharePoint List Forms are dynamic and controls will be created accordingly. Now, I want to add panels and upgraded controls to those accordian panel.
Parth, You can achieve your requirement like the below shared snippet.
Sample: https://stackblitz.com/edit/github-lushmu-awupsn?file=src%2Fapp%2Fapp.component.ts
[app.component.ts]
export class AppComponent { click(event: any) { let panel: HTMLElement = createElement('input', {id: 'field'}); event.target.disabled = true; var accordion = (document.querySelector('.e-accordion') as any).ej2_instances[0]; document.body.appendChild(panel); accordion.addItem({ header: 'This is Headeer', content:'#field' , expanded:true}); const textbox: TextBox = new TextBox({ placeholder: 'enter text here' }); textbox.appendTo(panel); } } |
Hi,
I have tried your code and it worked but for some reason it did not move date picker or dropdown with it. it only moved inputs to panel, can you please upgrade your sample to include date picker and dropdown with it ?
Parth, You can render the dropdown and date picker in the accordion item like the below shared snippet.
Sample: https://stackblitz.com/edit/github-lushmu-c7n2nk?file=src%2Fapp%2Fapp.component.ts
[app.componet.ts]
click(event: any) { let divEle: HTMLElement = createElement('div', {id:'container'}); document.body.appendChild(divEle); let panel: HTMLElement = createElement('input', { id: 'field'}); divEle.append(panel); let dropdownpanel: HTMLElement = createElement('input', { id: 'field1'}); divEle.append(dropdownpanel); let datepanel: HTMLElement = createElement('input', { id: 'field2'}); divEle.append(datepanel);
event.target.disabled = true;
var accordion = (document.querySelector('.e-accordion') as any).ej2_instances[0]; accordion.addItem({ header: 'This is Headeer', content:'#container' , expanded:true}); const textbox: TextBox = new TextBox({ placeholder: 'Enter text here' }); textbox.appendTo(panel); const dropdown: DropDownList = new DropDownList({ placeholder: 'Choose number', dataSource: ['One', 'Two', 'Three'] }); dropdown.appendTo(dropdownpanel); const DateTime: DateTimePicker = new DateTimePicker({ }); DateTime.appendTo(datepanel); } |
but this defeats the whole purpose of upgrading normal input, date picker and Dropddowns to Syncfusion control. If you see my initial ask was to upgrade the controls which are already part of the page. I want to inject something which will upgrade NORMAL HTML controls to Syncfusion Control and then append them to Accordian.
This example https://stackblitz.com/edit/github-lushmu-awupsn?file=src%2Fapp%2Fapp.component.ts does it. but it works with textbox and does not works with datepicker, dropdowns etc.
Please use above example to add Dropdown, Date Picker and Convert them to Syncfusion Controls
in other words you can also say, I want to Copy controls to Accordion after making an upgrade
PDev, You can achieve your requirement by rendering the input items and appending the instance for the input elements, as shown in the below code snippet.
[app.component.html]
<div id="financial-content" class="content-container" style="display:none"> <label for="textbox">TextBox:</label> <input id="textbox" type="text" name="textbox"> <br/> <br/> <label for="dropdown">DropDown:</label> <input id="dropdown" type="text" name="dropdown"> <br/> <br/> <label for="datepicker">DatePicker:</label> <input id="datepicker" type="text" name="datepicker"> </div> |
[app.component.ts]
export class AppComponent { @ViewChild('accordionObj') public accordionObj: AccordionComponent;
click(event: any) { event.target.disabled = true; this.accordionObj.addItem({ header: 'Financial', content: '#financial-content', expanded: true }); const textbox: TextBox = new TextBox({ placeholder: 'enter text here' }); textbox.appendTo('#textbox'); const dropdown: DropDownList = new DropDownList({ placeholder: 'Choose number', dataSource: ['One', 'Two', 'Three'] }); dropdown.appendTo('#dropdown'); const datepicker: DateTimePicker = new DateTimePicker({}); datepicker.appendTo('#datepicker'); } } |