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. Image for the cookie policy date

Upgrading HTML controls to syncfusion controls and Add them to Accordian Dynamically

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

this.acrdnInstance.addItem({
id:wpIndex,header:"This is Headeer",content:"<div id='panle"+wpIndex+"'>Test</div>"
});



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)

var panel = document.getElementById(panelID) as any;
let textbox:TextBox=new TextBox({width:this.controlWidth, change:this.onChange.bind(null)});
textbox.appendTo($field);
$field.append(panel);



8 Replies

SR Swathi Ravi Syncfusion Team December 8, 2022 12:12 PM UTC

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(eventany) {

    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(eExpandEventArgs) {

    let panelHTMLElement = document.querySelector('#panel'as HTMLElement;

    if (e.isExpanded == true && panel && !panel.classList.contains('e-textbox')) {

      const textboxTextBox = 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



PD PDev December 8, 2022 12:57 PM UTC

Thanks, can you please slightly modify this sample for Page Load. when First Panel is expanded by default



PD PDev December 8, 2022 01:29 PM UTC

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.




SR Swathi Ravi Syncfusion Team December 9, 2022 11:16 AM UTC

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(eventany) {

    let panelHTMLElement = 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 textboxTextBox = new TextBox({ placeholder: 'enter text here' });

    textbox.appendTo(panel);

  }

}




PD PDev December 10, 2022 01:38 PM UTC

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 ?




SR Swathi Ravi Syncfusion Team December 12, 2022 11:25 AM UTC

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(eventany) {

    let divEleHTMLElement = createElement('div', {id:'container'});

    document.body.appendChild(divEle);

    let panelHTMLElement = createElement('input', { id: 'field'});

    divEle.append(panel);

    let dropdownpanelHTMLElement = createElement('input', { id: 'field1'});

    divEle.append(dropdownpanel);

    let datepanelHTMLElement = 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 textboxTextBox = new TextBox({ placeholder: 'Enter text here' });

    textbox.appendTo(panel);

    const dropdownDropDownList = new DropDownList({ placeholder: 'Choose number'dataSource: ['One''Two''Three'] });

    dropdown.appendTo(dropdownpanel);

    const DateTimeDateTimePicker = new DateTimePicker({ });

    DateTime.appendTo(datepanel);

  }



PD PDev December 12, 2022 01:57 PM UTC

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



RV Ravikumar Venkatesan Syncfusion Team December 13, 2022 06:11 PM UTC

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.


Sample: https://stackblitz.com/edit/ej2-angular-accordion-add-item-dynamically?file=src%2Fapp%2Fapp.component.ts


[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 accordionObjAccordionComponent;

 

  click(eventany) {

    event.target.disabled = true;

    this.accordionObj.addItem({ header: 'Financial'content: '#financial-content'expanded: true });

    const textboxTextBox = new TextBox({ placeholder: 'enter text here' });

    textbox.appendTo('#textbox');

    const dropdownDropDownList = new DropDownList({ placeholder: 'Choose number'dataSource: ['One''Two''Three'] });

    dropdown.appendTo('#dropdown');

    const datepickerDateTimePicker = new DateTimePicker({});

    datepicker.appendTo('#datepicker');

  }

}


Loader.
Up arrow icon