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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

rangeChanged event

Thread ID:

Created:

Updated:

Platform:

Replies:

126195 Sep 29,2016 07:02 PM UTC Oct 5,2016 11:34 AM UTC JavaScript 3
loading
Tags: ejRangeNavigator
Keith Pilkington
Asked On September 29, 2016 07:02 PM UTC

Hi

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?

Thanks
Keith

Saravana Kumar Kanagavel [Syncfusion]
Replied On 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 
 
[JS] 
$("#scrollcontent").ejRangeNavigator({ 
               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; 
               } 
               else 
                   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; 
                   rangeNavigator.redraw(); 
               } 
               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. 
 
Regards, 
Saravana Kumar K 


Keith Pilkington
Replied On October 4, 2016 08:50 AM UTC

Hi

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.

Regards
Keith

Anandaraj T [Syncfusion]
Replied On October 5, 2016 11:34 AM UTC

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


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.

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

;