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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding a slider control to scheduler event template

Thread ID:

Created:

Updated:

Platform:

Replies:

148479 Oct 22,2019 04:00 AM UTC Oct 23,2019 05:34 AM UTC JavaScript - EJ 2 3
loading
Tags: Schedule
Premith Unnikrishnan
Asked On October 22, 2019 04:00 AM UTC

In scheduler control event editor template I'm trying to add a slider control 
Example:
https://ej2.syncfusion.com/javascript/demos/#/material/schedule/editor-template.html

In index.html
added div with id duration
Reason
style="width:100%;height:60px!important;resize:vertical">

in index.js
if(!endElement.classList.contains('e-datetimepicker')){
newej.calendars.DateTimePicker({value:newDate(endElement.value)||newDate()},endElement);
}
varDurElement=args.element.querySelector('#Duration');
if(!DurElement.classList.contains('e-slider-container')){
slider=newej.inputs.Slider({
min:0,
max:120,
step:5,
value:25,
tooltip:{
placement:'Before',isVisible:true,cssClass:'e-tooltip-cutomization'
},
ticks:{placement:'Before',largeStep:10,showSmallTicks:true},
attrs:{name:'Duration'}

},DurElement);
}



The slider is not updating the value to 25. How can I update the slider.
 {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55',                                                                                                                                                                                                                                                                                                                             Duration:50
    },
I want to bind a data property called duration to the slider.



Vinitha Devi Murugan [Syncfusion]
Replied On October 22, 2019 11:12 AM UTC

Hi Premith, 

Syncfusion greetings. 

We have prepared the sample based on the requirement which is available in below link. 


In the above sample, you can render the Slider components in popupOpen event. Once open the dialog we need to refresh the position of Slider component by reposition method in the Dialog’s open event like below, and also set the zIndex  to show the tooltip. 

var DurElement = args.element.querySelector("#Slider"); 
var dialog = args.element.ej2_instances[0]; 
dialog.open = function() { 
  DurElement.ej2_instances[0].reposition(); 
  DurElement.ej2_instances[0].zIndex = 2000; 
}; 


When we add new event with duration, we need to update the event object in popupClose event like below 

popupClose:function(args){ 
    if(args.type === 'Editor' && args.data) { 
      var DurElement = args.element.querySelector("#Slider"); 
      args.data.Duration = DurElement.ej2_instances[0].value; 
    } 
  } 


Kindly check the above sample and revert us for further assistance. 

Regards, 
M.Vinitha devi 


Premith Unnikrishnan
Replied On October 22, 2019 11:30 PM UTC

Thank you for the quick response this works perfectly awesome job.

Vinitha Devi Murugan [Syncfusion]
Replied On October 23, 2019 05:34 AM UTC

Hi Premith, 
 
We are happy to hear that our solution has fulfilled your requirement.  
 
Regards, 
M.Vinitha devi. 


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

Live Chat Icon For mobile
Live Chat Icon