Mat-select component in editorTemplate not working

[Hasan Rifaii]

Hello

First, I'm wondering if it's ok to add angular material components to editorTemplate?

for me mat-select is not working

<ng-template #editorTemplate>

<mat-form-field>

<mat-select>

<mat-option *ngFor="let location of locations" [value]="location.id">

{{location.name}}

</mat-option>

</mat-select>

</mat-form-field>

</ng-template>

[Hareesh Balasubramanian]

Hi Hasan, 

 

Greetings from Syncfusion Support. 

 

We have prepared a sample with the angular material components inside the editor template. And for the same we have prepared sample which can be viewed from the following link, 

https://stackblitz.com/edit/angular-2icgfu-kx4o4m?file=app.component.html 

 

  <mat-form-field> 

     <textarea matInput id="Subject" class="e-field e-input" type="text" value="{{data.Subject}}" name="Subject" style="width: 100%"></textarea> 

  </mat-form-field> 

  

Please try out the sample. Let us know you need any further assistance. 

 

Regards, 

Hareesh. 

[Hasan Rifaii]

Hello 

First, Thank you for support.

I have tried to add mat-select to your sample and still not working. please check it https://stackblitz.com/edit/angular-2icgfu-rihhov

Moreover, there is an issue in dateParser while it's called continuously, please check console -> https://stackblitz.com/edit/angular-2icgfu-rihhov

 

[Vinitha Devi Murugan]

Hi Hasan, 

 

Thanks for your update. 

 

Q1: We provided the ‘e-field’ support only for limited JS2 Syncfusion components like datepicker, datetimepicker, dropdownlist, multiselect, checkbox and input components . For other JS2 components and angular material component, you have to handle the ‘getting and setting the values to those fields’ in sample end using actionBegin and popupOpen event. 

 

Q2: To overcome this problem, we suggest you to use below highlighted code and same can be available in following link. 

https://stackblitz.com/edit/angular-2icgfu-hznzfr?file=app.component.ts  

 

@Component({ 

  selector: 'app-root', 

  templateUrl: './app.component.html', 

  styleUrls: ['./app.component.css'], 

  providers: [DayService, WeekService, WorkWeekService,MonthService, AgendaService, MonthAgendaService], 

  encapsulation: ViewEncapsulation.None, 

  changeDetection:ChangeDetectionStrategy.OnPush 

}) 

 

 

Kindly try with the above sample and let us know, if you need any further assistance on this. 

Regards, 

M.Vinitha devi. 

 

[sai]

hello,

I am also having the same problem. Did u resolve it?

if you find the solution please share it.

thanks in advance

[Vengatesh Maniraj]

Hi Sai, 

Greetings from Syncfusion Support. 

We already resolved this problem and provided the solution in our previous updates. Please check our previous updates and share the issue details if you still face the problem. 

For more reference, please check the samples. 

https://stackblitz.com/edit/angular-2icgfu-kx4o4m?file=app.component.html 

Regards, 

Vengatesh  

[Dragos]

Hello,

From what I see, the problem is not solved. The person wanted to use a mat-select control, but you provided a sample with a text area.

I also have a case in which I want to use mat-select and it's not working. The options are expanding somehow in the back of the dialog (as in the sample provided by the person above). 

A strange behavior caused by using mat-select is present also if a custom template is provided for the quick add window (the popup window just closes on the dropdown selection change).

Thank you!

[Hareesh Balasubramanian]

Hi Dragos, 

Thanks for the update. 

We have prepared a sample based on your shared query “Need to render the Mat-Select Angular component inside the Scheduler’s editor template as a custom filed” using editorTemplate, actionBegin and popupOpen events of the Scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-scheduler-with-mat-select-angular-control?file=app.component.ts  

[editorTemplate] snippet: 

                                <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"> 

                                                                                                                <textarea matInput id="Subject" class="e-field e-input" type="text" value="{{data.Subject}}" name="Subject" 

                style="width: 100%"></textarea> 

                                                                                                </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}}'> 

                                                                                                                </ejs-dropdownlist> 

                                                                                                </td> 

                                                                                </tr> 

                                                                                <tr> 

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

                                                                                                <td colspan="4"> 

                                                                                                                <mat-form-field> 

                                                                                                                                <mat-select name="countryVaraible" [(value)]="selectedCountry" placeholder="Country"> 

                                                                                                                                                <mat-option *ngFor="let country of countries" [value]="country.short"> 

                                                                                                                                                                {{country.full}} 

                                                                                                                                                </mat-option> 

                                                                                                                                </mat-select> 

                                                                                                                </mat-form-field> 

                                                                                                </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> 

[actionBegin & popupOpen events] snippets: 

 public onActionBegin(args: any): void { 

    if (args.requestType === "eventCreate") { 

      let country = this.countries.filter( 

        x => x.short == this.selectedCountry 

      )[0].full; 

      args.data[0].Country = country; 

    } else if (args.requestType === "eventChange") { 

      let country = this.countries.filter( 

        x => x.short == this.selectedCountry 

      )[0].full; 

      args.data.Country = country; 

    } 

  } 

  public onPopupOpen(args: any): void { 

    if (args.type == "Editor") { 

      if (args.target.classList.contains("e-work-cells")) { 

        this.selectedCountry = ""; 

      } else { 

        this.selectedCountry = this.countries.filter( 

          x => x.full == args.data.Country 

        )[0].short; 

      } 

    } 

  } 

Note: We provided the ‘e-field’ support only for limited JS2 Syncfusion components like datepicker, datetimepicker, dropdownlist, multiselect, checkbox and input components . For other JS2 components and angular material component, you have to handle the ‘getting and setting the values to those fields’ in sample end using actionBegin and popupOpen events of the Scheduler. 

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

We will happy to assist you..! 

Regards, 

Hareesh