rangeChanged event

[Keith Pilkington]

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]

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 

 

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1081563255-655109588.zip 

  

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]

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]

Hi Keith, 

  

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

  

Regards, 

Anand