Customizing event editor template with material mat-tab-group/mat-tab

[Thomas Hoffmann]

Hi Syncfusion-Support-Team 

Is it possible to create a custom dialog with material tabs?

Attached is the created example. There I get an error:

TypeError: Cannot read prperty 'classList' of null

If I remove the html-elements "mat-tab-group" and "mat-label" it works fine.

Kind regards, 

Thomas

Attachment: images_79f001d4.zip

[Vinitha Devi Murugan]

Hi Thomas, 

 

Greetings from Syncfusion support. 

We have validated your reported “Is it possible to create a custom dialog with material tabs and There I get an error: TypeError: Cannot read prperty 'classList' of null” issue at our end by preparing sample like your shared scenario and reproduce your reported issue at our end. To overcome this, we suggest you to render the editor template items in Angular way like below code.  We have prepared the below sample for your reference.  

Sample: https://stackblitz.com/edit/angular-editor-template-with-mat-tab?file=app.component.html  

 

 <ng-template #editorTemplate let-data> 

            <mat-tab-group mat-stretch-tabs class="mat-elevation-z4" (selectedTabChange)="onSelected($event)"> 

                <mat-tab label="Termin"> 

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

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

                </mat-tab> 

 

                <mat-tab label="Tab2"> 

                    This is the second content 

                </mat-tab> 

            </mat-tab-group> 

        </ng-template> 

 

Kindly refer the above sample. If you still facing the same problem share us the below details to serve your better.  

• Share Syncfusion version
• Scheduler related code snippets
• Replicate your problem in the above shared sample or
• Share a sample illustrating the problem which would help us to proceed further.

Regards, 

Vinitha 

[Thomas Hoffmann]

Hi Vinitha,

Thank you for your quick reply. The error "Is it possible to create a custom dialog with material tabs and There I get an error: TypeError: Cannot read prperty 'classList' of null” was in my own event-function.

You can close this issue. Thank you very mutch for the example.

Kind Regards,

Thomas

[Satheesh Kumar Balasubramanian]

Hi Thomas,

Thanks for your update.

We are happy that your issue has been resolved at your end. Please get back to us if you need any further assistance.

Regards,

Satheesh Kumar B