Calendar Multiselect with Control key press

6 posts, 0 answers
  1. Kash
    Kash avatar
    8 posts
    Member since:
    Sep 2011

    Posted 15 Nov 2011 Link to this post

    Hi all,

    If I set RadCalendar's property EnableMultiSelect to true it select multiple dates with only "mouse click". But I want  multiple date selection with "control key hold + mouse click" and single date selection with "mouse click". 

    I searched this but could not find this functionality, please guide me in this respect.


    Regards, 
    Kash
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Nov 2011 Link to this post

    Hello Kash,

    You could set the RangeSelectionMode = "OnKeyHold" for the RadCalendar control in order to enable the mentioned functionality. 

    Kind regards,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kash
    Kash avatar
    8 posts
    Member since:
    Sep 2011

    Posted 23 Nov 2011 Link to this post

    Maria 
    Thanks for your help, But I think you misunderstood my question.
    RangeSelectionMode = "OnKeyHold" is for date selection in a range, rather I want multiselect for example
    I press control key and then click on date 5 and then 7 and then 11 and so on... all the clicked dates should be selected.
    and when I dot'n press control key then it should be single date selection.

    I hope that I have clarified my problem.


    Regards,
    Kash
  5. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 23 Nov 2011 Link to this post

    Hello Kash,

    You could try something like this:

    ASPX:
    <telerik:RadCalendar ID="RadCalendar1" runat="server" EnableMultiSelect="true">
            <ClientEvents OnDateSelecting="OnDateSelecting" />
    </telerik:RadCalendar>

    JS:
    var ctrlKeyPressed = false;
      
    function pageLoad() {
        $telerik.$(document).keydown(function(e) { if (e.keyCode == 17) ctrlKeyPressed = true; });
        $telerik.$(document).keyup(function(e) { if (e.keyCode == 17) ctrlKeyPressed = false; });
    }
      
    function OnDateSelecting(sender, args) {
         // single date selection
    if (!ctrlKeyPressed && args.get_isSelecting()) {
                    sender.unselectDates(sender.get_selectedDates());
                }
            }

    I added a keydown and keyup event that tracks when the CTRL key is pressed or released. In the OnDateSelecting event, I check if the control key is not pressed and if they are trying to select a date (Single Date Selection), I then clear the dates assuming they only want to select one date. Otherwise the RadCaledar's MultiSelect property takes care of the multiple date selection.

    I hope that helps.
  6. Kash
    Kash avatar
    8 posts
    Member since:
    Sep 2011

    Posted 24 Nov 2011 Link to this post

    Thanks Kevin,

    That worked fine, but have one problem if I select special days those are not unseleced.

    Thanks in advance,
    Regards,
    Kash
  7. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 24 Nov 2011 Link to this post

    Hello Kash,

    Technically a special day is not a selected date so clicking on it would result in selecting the date. Special dates are only used to highlight dates or show them using special styles (they are a sort of marker on the calendar).

    So pretty much a SpecialDay would never show up in the SelectedDates array, unless it was selected.

    I hope that helps.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017