How to add an itemTemplate to a DropDownList Programmatically

[Jessica]

I am trying to add a template to a dropDownList in the Schedule Editor but I am not sure what thee format should be. I want to bind data tot he template like when the template is added in html but I cannot figure out how.

This is what I have tried:

let ticketElement: HTMLInputElement = args.element.querySelector('#ticketInput') as HTMLInputElement;

let element = args.element;

if (ticketElement) {

  if (!ticketElement.classList.contains('e-dropdownlist')) {

    let dropDownListObject: DropDownList = new DropDownList({

     placeholder: 'Choose ticket',

      value: eventData.AssignmentID,

      dataSource: this.tickets,

      fields: { text: 'RequestNumber', value: 'AssignmentID' },

      floatLabelType: 'Auto',

      itemTemplate: `<ng-template #itemTemplate="" let-data>

   <div>

     {{data.AssignmentID}}

   </div>

</ng-template>`

    });

    dropDownListObject.appendTo(ticketElement);

    ticketElement.setAttribute('name', 'AssignmentID');

  }

}

This is the result:

Thanks for your help

[Hareesh Balasubramanian]

Hi Jessica, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared code snippets “Add an Dropdownlist component with itemTemplate in the Editor window” using editorTemplate property of the Scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-editor-template-sample?file=app.component.ts  

UG link: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-event-editor-using-template  

    <ng-template #editorTemplate let-data> 

      <table 

        *ngIf="data != undefined" 

        class="custom-event-editor" 

        width="100%" 

        cellpadding="5" 

      > 

        <tbody> 

          <tr> 

            <td class="e-textlabel">Summary</td> 

            <td colspan="4"> 

              <input 

                id="Subject" 

                class="e-field e-input" 

                type="text" 

                value="{{data.Subject}}" 

                name="Subject" 

                style="width: 100%" 

              /> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">Status</td> 

            <td colspan="4"> 

              <ejs-dropdownlist 

                id="Status" 

                class="e-field" 

                data-name="Status" 

                placeholder="Choose Status" 

                [dataSource]="StatusData" 

                [fields]="statusFields" 

                value="{{data.Status}}" 

              > 

                <ng-template #itemTemplate let-StatusData> 

                  <div> 

                    <div class="ename">{{StatusData.StatusText}}</div> 

                  </div> 

                </ng-template> 

              </ejs-dropdownlist> 

            </td> 

         </tr> 

          <tr> 

            <td class="e-textlabel">From</td> 

            <td colspan="4"> 

              <ejs-datetimepicker 

                id="StartTime" 

                class="e-field" 

                data-name="StartTime" 

                format="M/dd/yy h:mm a" 

                [value]="dateParser(data.startTime || data.StartTime)" 

              > 

              </ejs-datetimepicker> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">To</td> 

            <td colspan="4"> 

              <ejs-datetimepicker 

                id="EndTime" 

                class="e-field" 

                data-name="EndTime" 

                format="M/dd/yy h:mm a" 

                [value]="dateParser(data.endTime || data.EndTime)" 

              ></ejs-datetimepicker> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">Reason</td> 

            <td colspan="4"> 

              <textarea 

                id="Description" 

                class="e-field e-input" 

                name="Description" 

                rows="3" 

                cols="50" 

                value="{{data.Description}}" 

                style="width: 100%; height: 60px !important; resize: vertical" 

              ></textarea> 

            </td> 

          </tr> 

        </tbody> 

      </table> 

    </ng-template> 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh