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

Schedule custom editor with the exact Resources dropdown input field of the default Editor.

Hi,

I would like to have the default resources dropdown input (with color bullets)  in my custom editor.

Where can I find the default editor template (.html)?

BR

CB



3 Replies

VD Vinitha Devi Murugan Syncfusion Team April 10, 2023 10:54 AM UTC

Hi Carlos,


Refer to the below shared UG to know about how to add the resource options within the editor template.


UG: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#how-to-add-resource-options-within-editor-template


Regards,

Vinitha



CV Carlos Viol Barbosa April 12, 2023 04:22 PM UTC

Dear Vinitha,

Thank you for your reply. I have already found this section in the documentation, but it basically shows how to use the multi-selection input, and its layout is not the same than the  dropdown input of the default editor window for resources.

The default resource input brings automatically the color indicator for each resource. See the picture below:

I would like to render this input in my few custom Editors, such I have it homogeneous though the application.

Thank you

 



RV Ravikumar Venkatesan Syncfusion Team April 14, 2023 02:58 PM UTC

Hi Carlos,


Sample: https://stackblitz.com/edit/ej2-angular-schedule-editor-template-multiselect-templat?file=src%2Fapp.component.html

Demo: https://ej2.syncfusion.com/angular/demos/#/material/multi-select/template


You can achieve your requirement with help of the ejs-multiselect itemTemplate property as shown in the below code snippet.


[app.component.html]

  <ejs-schedule #scheduleObj width='100%' height='550px' [group]="group">

    <ng-template #editorTemplate let-data>

      <table *ngIf="data != undefined" class="custom-event-editor" width="100%" cellpadding="5">

        <tbody>

          <tr>

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

            <td colspan="4">

              <ejs-multiselect id='ConferenceId' class="e-field" data-name="ConferenceId" placeholder='Choose Status'

                [dataSource]='resourceDataSource' [fields]='fields' [value]="data.ConferenceId">

                <ng-template #itemTemplate let-data>

                  <div class="e-resource-template">

                    <div class="e-resource-color" [ngStyle]="{'background': data.Color}"></div>

                    <div class="e-resource-text">{{data.Text}}</div>

                  </div>

                </ng-template>

              </ejs-multiselect>

            </td>

          </tr>

        </tbody>

      </table>

    </ng-template>

  </ejs-schedule>


[app.component.ts]

export class AppComponent {

  public resourceDataSourceObject[] = [

    { Text: "Margaret"Id: 1Color: "#1aaa55" },

    { Text: "Robert"Id: 2Color: "#357cd2" }

  ];

  public fieldsObject = { text: "Text"value: "Id" };

}


Regards,

Ravikumar Venkatesan


Loader.
Live Chat Icon For mobile
Up arrow icon