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. Image for the cookie policy date

rangeChanged event


First of all, I think the RangeNavigator control is great however I'm struggling to get some of the functionality working properly.

I'm trying to implement a max selected range e.g. 3 months but can't see anything out-of-the-box for this - feel free to correct me!

I can see from the documentation (https://help.syncfusion.com/js/api/ejrangenavigator#events:rangechanged) that I can listen for when the selected range changes. The documentation for this event shows that there should be four arguments sent to the function but I only seem to be getting "sender" i.e. the instance of the ejRangeNavigator. Is this documentation out of date or have I misunderstood?

Using the "sender" argument, I'm checking the bounds of the selected range and if it exceeds my max allowed value, I'm changing either the start or end date to set the selection to the max period. I was hoping to set the cancel property on the sender itself but this doesn't seem to do anything. Is there a sample or rough code which could give me some sort of heads-up?


3 Replies

SK Saravana Kumar Kanagavel Syncfusion Team September 30, 2016 09:39 PM UTC

Hi Keith, 
Thanks for contacting Syncfusion Support. 
We have analyzed your query and created a sample based on your requirement. In the sample, we haven’t allowed the range changes in range navigator, while selected range max more than 3 months from the minimum.  
And please refer the code example below 
               load: "onLoad", 
               rangeChanged: onchartloaded 
           function onLoad(sender) { //load event triggered 
               window.startDate = new Date(sender.data.model.selectedRangeSettings.start); 
               window.endDate = new Date(sender.data.model.selectedRangeSettings.end); 
           function onchartloaded(sender) { //rangaChanged event triggered 
               var rangeNavigator = $("#scrollcontent").data("ejRangeNavigator"); 
               var start = sender.selectedRangeSettings.start; 
               var end = sender.selectedRangeSettings.end; 
               var startYear = start.getYear(); 
               var endYear = end.getYear(); 
               var diffYear = endYear - startYear; 
               var startMonth = start.getMonth() + 1; 
               var endMonth = end.getMonth() + 1; 
               var diff; 
               var startDate = start.getDate(); 
               var endDate = end.getDate(); 
               var diffDate = endDate - startDate; 
               var month = start, date = 0; 
               if (diffYear > 0) { 
                   var totMonth = diffYear * 12; 
                   endMonth = endMonth; 
                   startMonth = totMonth - startMonth; 
                   diff = startMonth + endMonth; 
                   diff = endMonth - startMonth; 
               if (diff == 3) { 
                   if ((startDate == endDate) || ((startDate == (1 || 28 || 31)) && (endDate == (1 || 28 || 30)))) 
                       diff = diff; 
                   else if ((startDate != endDate) && ((startDate == (1 || 28 || 31)) && (endDate == (1 || 28 || 30)))) 
                       diff = diff + 1; 
               if (diff > 3) { 
                   sender.selectedRangeSettings.end = window.endDate; 
                   sender.selectedRangeSettings.start = window.startDate; 
               window.startDate = sender.selectedRangeSettings.start; 
               window.endDate = sender.selectedRangeSettings.end; 
In the above code, we are triggering “load” event . In the event , we have got the initial range of min and max value for range navigator. Then, we are triggering “rangeChanged” event. In the event, we haven’t allowed to set the selected range settings, if selected range of maximum value more than 3 months. 
And you can find the sample from the below location 
Please find the output of the sample below 
If this query is misunderstood at our end, kindly revert back us with more details of that scenario, so that we can provide appropriate solution for that query. 
Please let us know if you have any concern. 
Saravana Kumar K 

KP Keith Pilkington October 4, 2016 08:50 AM UTC


Many thanks for the sample - I've adapted the code to suit my requirements and it's all working. I was missing the redraw() method.


AT Anandaraj T Syncfusion Team October 5, 2016 11:34 AM UTC

Hi Keith, 
Thanks for the update. Please let us know if you need further assistance on this. 

Live Chat Icon For mobile
Up arrow icon