Mat-select component in editorTemplate not working

7 Replies
6 Participants

Created by
HR Hasan Rifaii

Platform
Angular - EJ 2

Platform
Angular - EJ 2

Control
Schedule

Created On
Jul 11, 2019 07:31 PM UTC

Last Activity On
Mar 3, 2021 01:14 PM UTC

Want to subscribe?
SIGN IN

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>

7 Replies

HB Hareesh Balasubramanian Syncfusion Team July 12, 2019 02:12 PM UTC

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>

</mat-form-field>

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

Regards,

Hareesh.

HR Hasan Rifaii July 12, 2019 03:14 PM UTC

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

VD Vinitha Devi Murugan Syncfusion Team July 16, 2019 01:28 PM UTC

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.

SA sai July 29, 2020 05:05 AM UTC

hello,

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

if you find the solution please share it.

thanks in advance

VM Vengatesh Maniraj Syncfusion Team July 30, 2020 05:25 AM UTC

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

DR Dragos March 2, 2021 11:35 AM UTC

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!

HB Hareesh Balasubramanian Syncfusion Team March 3, 2021 01:14 PM UTC

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>

<tbody>

<tr>

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

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

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

<mat-form-field>

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

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

</mat-option>

</mat-select>

</mat-form-field>

</td>

</tr>

<tr>

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

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

<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

Need More Help?

Get personalized assistance from our support team.

Contact Support

7 Replies
6 Participants
Want to subscribe?
SIGN IN
Created by
HR Hasan Rifaii
Platform
Angular - EJ 2
Control
Schedule
Created On
Jul 11, 2019 07:31 PM UTC
Last Activity On
Mar 3, 2021 01:14 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support