Select Week instead of Day without using UseRowHeadersAsSelectors

11 posts, 0 answers
  1. Lee
    Lee avatar
    13 posts
    Member since:
    Jul 2010

    Posted 12 Aug 2010 Link to this post

    I'm trying to have a user be able to hover over the week and it select the week instead of selecting the day.   I'm trying to do this without the UseRowHeadersAsSelectors.  Then take the selected week range for the SelectedWeek. 

    I saw this post but it's over 3 years old and it is WinForms so is there a work around for asp.net ajax?

    http://www.telerik.com/community/forums/winforms/calendar-and-datetimepicker/row-selection-only.aspx

    Thanks in advance
  2. Lee
    Lee avatar
    13 posts
    Member since:
    Jul 2010
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 17 Aug 2010 Link to this post

    Hi Lee,

    You could try the same approach as used in order to deselect currently selected dates in the SelectWholeWeek() method from the CodeLibrary which you provided a linko to:

    var calendar = $find("<%= RadCalendar1.ClientID %>");
    calendar.unselectDates(calendar.get_selectedDates());

    I hope this helps.

    Greetings,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Lee
    Lee avatar
    13 posts
    Member since:
    Jul 2010

    Posted 17 Aug 2010 Link to this post

    where would i happen to add that code snippet in the javascript?
  6. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 18 Aug 2010 Link to this post

    Hello Lee,

    That depends on your requirements. If the code works correctly in your project, from what I see, when you click another cell all the currently selected ones will get deselected and the new week will be selected. In what other case do you want the previously selected week to be deselected?

    Sincerely yours,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Lee
    Lee avatar
    13 posts
    Member since:
    Jul 2010

    Posted 18 Aug 2010 Link to this post

    their seems to be two issues.....

    one. when you select a week of august that is located in the september calendar and then select a week lets say in the august calendar it keeps the selected single date on the september calender.

    two. when you select a week and you want to click on the same week to unselect it only unselects the single date instead of the entire week.  

    here is my code.  I tried to incorporate a unselectweek function but doesn't seem to work....
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function AddEvent(e) {
                    var calendar = $get("<%=RadCalendar1.ClientID %>");
                    if (typeof (calendar.addEventListener) != "undefined") //gecko browsers
                    {
                        calendar.addEventListener("mouseover", HighlightWholeWeek, false);
                        calendar.addEventListener("mouseout", UnHighlight, false);
                    }
                    else if (calendar.attachEvent) //IE
                    {
                        calendar.attachEvent("onmouseover", HighlightWholeWeek);
                        calendar.attachEvent("onmouseout", UnHighlight);
                    }
                    //               
                    //                    if (typeof (calendar.addEventListener) != "undefined") //gecko browsers
                    //                    {
                    //                        calendar.addEventListener("click", SelectWholeWeek, false);
                    //                    }
                    //                    else if (calendar.attachEvent) //IE
                    //                    {
                    //                        calendar.attachEvent("onclick", SelectWholeWeek);
                    //                    }
     
                    if (typeof (calendar.addEventListener) != "undefined") //gecko browsers
                    {
                        if (va = "false") {
                            calendar.addEventListener("click", SelectWholeWeek, false);
                            var va = "true";
                        }
                        else if (va = "true") {
                            calendar.addEventListener("click", UnSelectWholeWeek, false);
                            var va = "false";
                        }
                    }
                    else if (calendar.attachEvent) //IE
                    {
                        if (va = "false") {
                            calendar.attachEvent("onclick", SelectWholeWeek);
                            var va = "true";
                        }
                        else if (va = "true") {
                            calendar.attachEvent("onclick", UnSelectWholeWeek);
                            var va = "false";
                        }
                    }
                }
     
                function SelectWholeWeek(args) {
                    var target = FindTarget(args); //find the clicked cell   
                    if (target.DayId && target.className)//if the clicked cell is a date cell it has a DayId
                    {
     
                        if ((target.className == "radCalSelect_Default") || (target.className == "rcSelected")) {
                            var calendar = $find("<%= RadCalendar1.ClientID %>");
                            calendar.unselectDates(calendar.get_selectedDates());
     
                            var row = target.parentNode;
                            while (row.tagName != "TR") {
                                row = row.parentNode;
                            }
                            var rowCells = row.getElementsByTagName("td"); //get all the cells of the row
                            for (var i = 0; i < rowCells.length; i++)
                                if (rowCells[i].DayId) //if the cell is a selectable Date cell it has DayId 
                                {
                                    var date = GetDateFromID(rowCells[i].DayId);
                                    calendar.selectDate(date);
                                }
                                else {
                                    var rowCells = row.getElementsByTagName("td"); //get all the cells of the row
                                    var calendar = $find("<%= RadCalendar1.ClientID %>");
                                    calendar.unselectDates(calendar.get_selectedDates());
                                }
                    }
                }
            }
     
            function UnSelectWholeWeek(args) {
                var target = FindTarget(args); //find the clicked cell   
                if (target.DayId && target.className)//if the clicked cell is a date cell it has a DayId
                {
                    if ((target.className == "radCalSelect_Default") || (target.className == "rcSelected")) {
                        var calendar = $find("<%= RadCalendar1.ClientID %>");
                        calendar.unselectDates(calendar.get_selectedDates());
     
                        var row = target.parentNode;
                        while (row.tagName != "TR") {
                            row = row.parentNode;
                        }
                        var rowCells = row.getElementsByTagName("td"); //get all the cells of the row
                        for (var i = 0; i < rowCells.length; i++)
                            if (rowCells[i].DayId) //if the cell is a selectable Date cell it has DayId 
                            {
                                var calendar = $find("<%= RadCalendar1.ClientID %>");
                                calendar.unselectDates(calendar.get_selectedDates());
                            }
                }
            }
        }
     
        function HighlightWholeWeek(args) {
            //find the clicked cell
            var target = FindTarget(args);
            if (target != null && (target.className == "radCalHover_Default" || target.className == "rcHover") && target.DayId) //if the highlighted cell is a date cell it has a DayId
            {
                var row = target.parentNode;
     
                //get all the rows to unhighlight first
                var rows = row.parentNode.getElementsByTagName("tr");
                UnhighlightRows(rows);
                //highlight our row cells
                var rowCells = row.getElementsByTagName("td");
                for (var i = 0; i < rowCells.length; i++) {
                    //don't highlight other month or selected days
     
                    var oldSkins = target.className.indexOf("rc") != 0 ? true : false; //flag that indicates whether the version is earlier than Q1 2009.
                    if (target.className == "") {
                        oldSkins = false;
                    }
                    if (oldSkins && rowCells[i].className != "otherMonth_Default" && rowCells[i].className != "radCalSelect_Default") {
                        rowCells[i].className = "radCalHover_Default";
                    }
                    else if ((!oldSkins) && rowCells[i].className != "rcOtherMonth" && rowCells[i].className != "rcSelected") {
                        rowCells[i].className = "rcHover";
                    }
                }
            }
        }
     
        //unhighlight the lastly highlighted week on mouse out of the calendar
        function UnHighlight() {
            var calendar = document.getElementById("RadCalendar1_Top");
            //get the rows of the calendar table
            var rows = calendar.getElementsByTagName("tr");
            UnhighlightRows(rows);
        }
     
        function UnhighlightRows(rows) {
            for (var i = 0; i < rows.length; i++) {
                //get the cells of the current row
                var rowCells = rows[i].getElementsByTagName("td");
                for (var j = 0; j < rowCells.length; j++) {
                    //unhighlight the row cells
                    if (rowCells[j].className == "radCalHover_Default") {
                        rowCells[j].className = "radCalDefault_Default";
                    }
                    else if (rowCells[j].className == "rcHover") {
                        rowCells[j].className = "";
                    }
                }
            }
        }
     
        function FindTarget(e) {
            var target;
            if (e && e.target) //other browsers
            {
                target = e.target;
            }
            else if (window.event && window.event.srcElement) //IE
            {
                target = window.event.srcElement;
            }
     
            if (!target) {
                return null;
            }
     
            while (target != null && target.tagName != null) {
                if (target.tagName.toLowerCase() == 'td') {
                    break;
                }
                target = target.parentNode;
            }
     
            if (target == null || target.tagName == null || target.tagName.toLowerCase() != 'td') {
                return null;
            }
            return target;
        }
     
        function GetDateFromID(ID) {
     
            var name = ID.split("_");
            var date = [parseInt(name[1]), parseInt(name[2]), parseInt(name[3])];
            return date;
        }        
            </script>
        </telerik:RadCodeBlock>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" MultiViewColumns="3"
                        ShowOtherMonthsDays="true" ShowColumnHeaders="true" UseRowHeadersAsSelectors="false"
                        ShowRowHeaders="false" UseColumnHeadersAsSelectors="false" MultiViewRows="1"
                        EnableMultiSelect="true" CalendarTableStyle-Font-Size="10px" CalendarTableStyle-Width="130px"
                        EnableViewSelector="true">
                        <ClientEvents OnLoad="AddEvent" />
                    </telerik:RadCalendar>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>

  8. Lee
    Lee avatar
    13 posts
    Member since:
    Jul 2010

    Posted 18 Aug 2010 Link to this post

    i found out the solutions to the first issue when copying over the code to a sample project i realized that in my main project the radcalendar was assigned to a RadAjaxManager.  When I remove that it seems to work better. 

    still the click on selected week i want to unselect the week instead of the single date....
  9. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 23 Aug 2010 Link to this post

    Hello Lee,

    This approach can actually be replaced with a more straight forward one, using the methods and properties exposed in later versions of RadControls than the one used in the Code Library which you linked to.

    I am attaching a project with the new approach which I tested under different browsers and covers the desired functionality which you described in all of them.

    Greetings,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Brad
    Brad avatar
    39 posts
    Member since:
    Aug 2010

    Posted 15 Oct 2010 Link to this post

    I had to modify GetDateFromID(ID) as follows to account for complex ASP.NET control names:

    function GetDateFromID(ID) {
        var name = ID.split("_");
        var date = [parseInt(name[name.length - 3]), parseInt(name[name.length - 2]),
            parseInt(name[name.length - 1])];
        return date;
    }
  11. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 09 Jul 2014 in reply to Tsvetina Link to this post

    Hi Tsvetina,

    I have tested your simple and it works, but if i insert the code in a contentplaceholder of a masterpage it does not work and i do not why.

    Any idea?
    Thank you,
    Sonia.
  12. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 09 Jul 2014 in reply to Sonia Link to this post

    I answer myself.
    If you want it works also on a contentplaceholder change function GetDateFromID such as Brad says:

    function GetDateFromID(ID) {
    var name = ID.split("_");
    var date = [parseInt(name[name.length - 3]), parseInt(name[name.length - 2]), parseInt(name[name.length - 1])];
    return date;
    }


Back to Top
UI for ASP.NET Ajax is Ready for VS 2017