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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change the width of the template editor

Thread ID:

Created:

Updated:

Platform:

Replies:

141304 Dec 5,2018 10:46 AM UTC Dec 7,2018 04:13 AM UTC Angular - EJ 2 7
loading
Tags: Schedule
Stephane Joue
Asked On December 5, 2018 10:46 AM UTC

Hello,

I'm using the editorTemplate for scheduler (angular js2).

I have issues for changing the width of the popup.

Here a preview of my code : 

<ejs-schedule #scheduleObj width='100%' height='100%'>
<ng-template #editorTemplate>
    
      <table width="100%" cellspacing="20" class="custom-event-editor">
          ...
     </table>
</ng-template>
</ejs-schedule>

thank you in advance


Karthigeyan Krishnamurthi [Syncfusion]
Replied On December 5, 2018 11:05 AM UTC

 
Thank you for contacting Syncfusion support. 
 
We have used the provided code example and suspect that your issue is related to the below image. 
 
 
 
The popupOpen event is not used where the input elements defined with in template are converted to corresponding control. Kindly refer the below links to know more about the template option. 
 
If we misunderstood your requirement, kindly share more details like issue image and code example to proceed further. 
 
Regards, 
Karthigeyan 
 
 
 


Stephane Joue
Replied On December 5, 2018 01:10 PM UTC

 
Thank you for contacting Syncfusion support. 
 
We have used the provided code example and suspect that your issue is related to the below image. 
 
 
 
The popupOpen event is not used where the input elements defined with in template are converted to corresponding control. Kindly refer the below links to know more about the template option. 
 
If we misunderstood your requirement, kindly share more details like issue image and code example to proceed further. 
 
Regards, 
Karthigeyan 
 
 
 


Thank you for responding so quickly.

I already have consulting the documentation and i managed to customize the popup.

But I do not know how to resize it. For example, is it possible to fix the width and the height : 800*600 ?

Thank you


Karthigeyan Krishnamurthi [Syncfusion]
Replied On December 6, 2018 08:50 AM UTC

 
Thanks for your update. 
 
We can customize the custom window width and height through CSS as shown below. 
 
.e-popup.e-popup-open.e-dialog{ 
      width: 800px !important; 
      height : 600px !important; 
      max-height: 600px !important; 
      } 
 
Regards, 
Karthigeyan 
 


Stephane Joue
Replied On December 6, 2018 10:07 AM UTC

Hello, 

Thnak you for responding.

It works but it applies for all the dialogs :



Where can i find the classes for the css (.e-popup.e-popup-open.e-dialog...) ?

Thank you


Karthigeyan Krishnamurthi [Syncfusion]
Replied On December 6, 2018 10:53 AM UTC

Hi Stephane, 
 
Thanks for your update. 
 
Kindly include custom class which will apply only to custom window as below to overcome the issue. 
 
.customDesign{ 
      width: 800px !important; 
      height : 600px !important; 
      max-height: 600px !important; 
      } 
 
public onPopupOpen(args: PopupOpenEventArgs): void { 
    if (args.type === 'Editor') { 
      addClass([args.element], 'customDesign'); 
      let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement; 
      if (!statusElement.classList.contains('e-dropdownlist')) { 
        let dropDownListObject: DropDownList = new DropDownList({ 
          placeholder: 'Choose status', value: statusElement.value, 
          dataSource: ['New', 'Requested', 'Confirmed'] 
        }); 
        dropDownListObject.appendTo(statusElement); 
        statusElement.setAttribute('name', 'EventType'); 
      } 
      let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement; 
      if (!startElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 
      } 
      let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement; 
      if (!endElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 
      } 
    }else { 
         removeClass([args.element], 'customDesign'); 
    } 
  } 
 
 
 
Regards, 
Karthigeyan 


Stephane Joue
Replied On December 6, 2018 01:34 PM UTC

Perfect !

Thank you again.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On December 7, 2018 04:13 AM UTC

 
We are happy that our solution fulfilled your requirement. 
 
Regards, 
Karthigeyan 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;