This is a migrated thread and some comments may be shown as answers.

Calendar - Limit selection

13 Answers 177 Views
Calendar, DateTimePicker, TimePicker and Clock
This is a migrated thread and some comments may be shown as answers.
Nicklas
Top achievements
Rank 1
Veteran
Nicklas asked on 21 Dec 2020, 05:25 PM

Hi,

I have put the calendar into a popupeditor, the purpose is to choose a "from" and "to" date for filtering data. For that reason I'm trying to only allow 2 selected dates. It doesn't seem to be so straight forward, currently I tried to prevent more than 2 selected dates in the SelectionChanged and SelectionChanging event by using e.Cancel = true and some other stuff also. But it's like the events doesn't detect it before too many dates are selected?

The best scenario would be if there's a way to disable the "drag selection" so that it's only possiple to select a date by clicking a date.

 

In any case, how can this behavior be achieved? 

 

Thanks in advance!

13 Answers, 1 is accepted

Sort by
0
Nadya | Tech Support Engineer
Telerik team
answered on 22 Dec 2020, 11:27 AM

Hello, Nicklas,

According to the provided information, it seems that you want to limit the count of selected dates in RadCalendar. I can suggest setting the AllowMultipleSelect property to false. This property controls the selection of multiple dates. If it is set to false, only a single date is selected, and if any dates are all ready selected, they are cleared. Thus, you can use a variable to count how many dates are selected and cancel the SelectionChanging event if the count is more than two dates. 

 public RadForm1()
 {
     InitializeComponent();
     this.radCalendar1.AllowMultipleSelect = false;
     this.radCalendar1.SelectionChanging += this.RadCalendar1_SelectionChanging;
   
 }
 int countDates;
 private void RadCalendar1_SelectionChanging(object sender, SelectionEventArgs e)
 {
     var date = e.NewDates;
     if (countDates >=2)
     {
         e.Cancel = true;
     }
     countDates++;
 }

I hope this helps. Should you have other questions please let me know.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nicklas
Top achievements
Rank 1
Veteran
answered on 22 Dec 2020, 02:51 PM

Hi Nadya,

I see. I tried this out and it works fine. But I actually have the need to select a maximum of 3 dates (sorry I hit 2 instead of 3..)

I already tried the code, that was my initial approach. My code was this  if (countDates >=3) { e.Cancel = true; } but that will not cancel on 3 or more.

But when using the exact same code just with 2 as the limit, like this  if (countDates >=2) { e.Cancel = true; } it works

Why does it not work with 3? Am I missing something?

0
Nicklas
Top achievements
Rank 1
Veteran
answered on 22 Dec 2020, 02:52 PM
Note that it will work when selection the dates one by one. But not when using the "drag selection"
0
Nicklas
Top achievements
Rank 1
Veteran
answered on 22 Dec 2020, 08:30 PM

Hi again,

 

Actually, this "drag selection" is driving me nuts, now I'm using your exact example, and when I "drag select" it can still select more than 2 dates. Is there a way to turn of this "drag selection"?

0
Nadya | Tech Support Engineer
Telerik team
answered on 23 Dec 2020, 11:19 AM

Hello, Nicklas,

According to the provided information, I suppose that you are able to select dates by dragging as shown below:

If you are able to see selection when dragging over the control it seems that you have AllowViewSelector enabled and AllowMultipleSelect=trueAllowViewSelector property indicated whether the view selection should be enabled to allow selecting all the dates presented in the CalendarView. Could you please carefully check if this property is set to false on your end. AllowMultipleSelect property controls whether the multiple selection is enabled. If you set both these two properties to false you will be able to select only one date per click. 

According to the count of dates, it is strange that you can not cancel the operation when countDates >= 3. It is working fine on my end. I am sending you my test project. Can you give it a try and see how it differs from your set up?

I hope this helps. If you need further assistance do not hesitate to write back.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nicklas
Top achievements
Rank 1
Veteran
answered on 23 Dec 2020, 03:53 PM

Hi again,

I think we are misunderstanding each other. When I say drag select, I mean holding down the mouse and dragging over the dates. This will select the dates you're dragging over when AllowMultipleSelect is set to True. Is there any way to disable this?

When AllowMultipleSelect is set to True, in your example. Your SelectionChanging event is not preventing more than 3 dates to be selected despite the code that is put in the event should prevent it. I have attached a gif to prove that

0
Nadya | Tech Support Engineer
Telerik team
answered on 24 Dec 2020, 02:32 PM

Hello, Nicklas, 

Thank you for the recorded video.

In order to disable the multiple selections while dragging with the left mouse button pressed you should set AllowMultipleSelect=false. Thus, you will be able to pick the desired count of dates by only clicking on the desired date in the calendar. If the desired count of dates is reached you will not be able to select more dates. You can check the attached gif file. 

In case you need further assistance, it would be greatly appreciated if you can provide more information about what is the desired behavior that you would like to achieve with RadCalendar. Thus, we would be able to suggest a suitable solution.

I hope this helps. Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nicklas
Top achievements
Rank 1
Veteran
answered on 25 Dec 2020, 12:35 PM

Hi again Nadya,

Even with the code inside the selectionChanging event that should prevent more than 3 selected dates, I'm still able to select more than 3 dates, which was the whole point of the video I made... Did you look at the code in the video?

Regarding the multiple selections while dragging with the left mouse button pressed. Just to clarify so that there cannot be any doubts at all.. What I am asking is: Is it possible to to turn of the "drag selection" and still have the AllowMultipleSelect set to true?

What I am trying to do is to use a calendar to select a "start" and "end" date, in order to select data from a given range. Without selecting more than 3 dates (on the third selection it should clear the 2 dates that are already selecte) but the problem with this is again that the code in the selectionChanging event will NOT prevent more than 3 selected dates. (as I proved in the video I also sent.)

 

0
Nadya | Tech Support Engineer
Telerik team
answered on 25 Dec 2020, 01:39 PM

Hello, Nicklas,

Yes, I have already seen the video that you provided. According to the information provided in your last post, now I understand that you want to disable the drag selection and still have the AllowMultipleSelect property set to true. It seems you need to have multiple selections and disable it is not an option for you. Please excuse me that I did not get you right in my previous post. 

I have found this a reasonable request and logged a feature request in our Feedback portal by creating a public thread on your behalf. You can track its progress, vote for the item, subscribe for status changes, and add your comments on the following link - feedback item.

I have also updated your Telerik Points.

Currently, to prevent the drag selection and still have multiple selections enabled you can use the following code snippet:

 public RadForm1()
 {
     InitializeComponent();

     this.radCalendar1.AllowMultipleSelect = true;
     this.radCalendar1.SelectionChanging += this.RadCalendar1_SelectionChanging;
     this.radCalendar1.MouseDown += this.RadCalendar1_MouseDown;
     this.radCalendar1.MouseUp += this.RadCalendar1_MouseUp;
 }

 CalendarCellElement cellSelectionStart;
 bool isMouseDown;
 private void RadCalendar1_MouseUp(object sender, MouseEventArgs e)
 {
     this.cellSelectionStart = null;
     this.isMouseDown = false;
 }

 private void RadCalendar1_MouseDown(object sender, MouseEventArgs e)
 {
     CalendarCellElement cell = this.radCalendar1.ElementTree.GetElementAtPoint<CalendarCellElement>(e.Location);
     if (cell != null)
     {
         this.cellSelectionStart = cell;
         this.isMouseDown = true;
     }
 }
 private void RadCalendar1_SelectionChanging(object sender, SelectionEventArgs e)
 {
     if (this.isMouseDown && e.NewDates.Count > 0)
     {

         var dates = e.NewDates.Where(d => d.Date != this.cellSelectionStart.Date);
         if (dates.Count() > 0)
         {
             e.Cancel = true;
         }
     }
     
 }


I hope this helps. if you have other questions please let me know. 

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nicklas
Top achievements
Rank 1
Veteran
answered on 25 Dec 2020, 02:03 PM

Hi Nadya,

No worries. The solution you provided works. Thanks.

 

I still wonder why the below code does not work. The AllowMultipleSelect is set to true, but when I "drag select" I'm still able to select more than 3 dates. Shouldn't the code in this event prevent this as you suggested yourself?

In the video I made I'm using your example where you will see that when using below code, I'm still able to select more than 3 dates. Why is that?

 

int countDates;

private void RadCalendar1_SelectionChanging(object sender, SelectionEventArgs e)

{

var date = e.NewDates;

if (countDates >=3)

{

e.Cancel = true;

}

countDates++;

}

0
Nadya | Tech Support Engineer
Telerik team
answered on 28 Dec 2020, 09:25 AM

Hello, Nicklas,

I am really glad that the suggested solution works fine for you.

The example I provided earlier works as well when AllowMultipleSelect = false and you select each date by simply click with the mouse on each date. When AllowMultipleSelect = true the dragging selection is enabled. The dragging selection has a custom implementation that internally works with selection start and end dates and automatically marks the dates from a specified date range as selected. 

Since you would like to have multiple selections enabled feel free to use the suggested here solution. 

Let me know if you have any other questions.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nicklas
Top achievements
Rank 1
Veteran
answered on 28 Dec 2020, 09:56 AM

Hi Nadya,

 

I don't understand how it makes sense to limit the selection when AllowMultipleSelect = false? Like this it the selection will already be limited to 1 because AllowMultipleSelect = false?

 

If we take your example, and change the AllowMultipleSelect = false to AllowMultipleSelect = true, then should it still limit the selection to 3? Because that is not the case

0
Nadya | Tech Support Engineer
Telerik team
answered on 29 Dec 2020, 03:36 PM

Hello, Nicklas,

I will try to explain how my initial suggestion works. The AllowMultipleSelect property controls the selection of multiple dates at a time. If enabled, it allows selecting multiple days either by dragging selection or by clicking on different dates with the Ctrl key pressed. If disabled, it allows selecting only one date per click and you can count how many times you click on a date by using a separate count variable. It means that only a single date should be selected at a time and will disable the dragging selection that you do not want. This is why I suggested setting it to false

If we change the AllowMultipleSelect=true, then the dragging selection would be enabled and the selection would not be limited to three if you drag dates.

I hope this information helps.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Calendar, DateTimePicker, TimePicker and Clock
Asked by
Nicklas
Top achievements
Rank 1
Veteran
Answers by
Nadya | Tech Support Engineer
Telerik team
Nicklas
Top achievements
Rank 1
Veteran
Share this question
or