A (day) cell looses its assigned custom css classes when selected

5 posts, 0 answers
  1. Henning
    Henning avatar
    6 posts
    Member since:
    Feb 2008

    Posted 24 Apr 2008 Link to this post

    Hi,

    I am coding a calendar that has to color code the days depending on their state. A day can have five possible states.

    The way I am doing this is by overriding the DayRender method on serverside and adding the css style to the cell's CssClass collection like this:

    c.CssClass = registeredHours >= capasity 
                            ? 
    "Calendar_Day_CapacityReached" 
                            : 
    "Calendar_Day_CapacityNotReached"

     The result in HTML is this:

    <td class="radCalDefault_SSN Calendar_Day_NoCapacity" ...> 

    My problem is that when I select one day the calendar empties the class attribute of the cell with a client side script and puts the "radCalSelect_SSN" css class instead. The result is this:

    <td class="radCalSelect_SSN" ...> 

    And because my css class gets removed, the day loses its color coding when it is selected.
  2. John
    John avatar
    416 posts
    Member since:
    Oct 2006

    Posted 24 Apr 2008 Link to this post

    hi:)


    I would suggest you to use SpecialDays

    Here is an example:

            <div> 
                <telerik:RadCalendar ID="RadCalendar1" runat="server"
                    <SpecialDays> 
                        <telerik:RadCalendarDay Date="04/25/2008"
                            <ItemStyle BackColor="red" /> 
                        </telerik:RadCalendarDay> 
                    </SpecialDays> 
                </telerik:RadCalendar>  
            </div> 


    Regards...
    <John:Peel />
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henning
    Henning avatar
    6 posts
    Member since:
    Feb 2008

    Posted 24 Apr 2008 Link to this post

    Hi :)

    This doesn't help, because what this renders in HTML is

    <td class="radCalDefault_SSN" style="background-color: Red;" ..> 

    and when the day is selected both the class and style attributes are emptied and the radCalSelect_SSN class is set like this:

    <td class="radCalSelect_SSN" style="" ...> 

    This implementation also looses the color coding of the cell/day when the day is selected.
  5. John
    John avatar
    416 posts
    Member since:
    Oct 2006

    Posted 25 Apr 2008 Link to this post

    hi :)

    You can use OnDateSelecting client event. Here is an example:


    <%@ Page Language="C#" AutoEventWireup="true"  %> 
     
    <%@ Register Assembly="RadCalendar.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
        .MyCssClass 
        { 
            background-color: red; 
        } 
        </style> 
        <script type="text/javascript"
        function DateSelecting(sender, args) 
        { 
            if (args.RenderDay.Date[2] == 9) 
                return false; 
        } 
        </script> 
        <script runat="server"
        protected void RadCalendar1_DayRender(object sender, Telerik.WebControls.Base.Calendar.Events.DayRenderEventArgs e) 
        { 
            if (e.Day.Date.Day == 9) 
            { 
                e.Cell.CssClass = "MyCssClass"
                 
            } 
        }     
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <div> 
            <rad:RadCalendar  
                ID="RadCalendar1"  
                runat="server"  
                OnDayRender="RadCalendar1_DayRender"
                <ClientEvents OnDateSelecting="DateSelecting" /> 
            </rad:RadCalendar> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    Thank you...
    <John:Peel />

  6. Henning
    Henning avatar
    6 posts
    Member since:
    Feb 2008

    Posted 28 Apr 2008 Link to this post

    This works, but does not select the day so I don't know which day is selected in on the server side.

    By overriding PerformSelect I can stop the style being changed on client side, but when the calendars renders after the postback it removes my cssclass and inserts the radCalSelect class instead.

    <script type="text/javascript">   
        window.onload = function()     
        {   
            Telerik.Web.UI.Calendar.RenderDay.prototype.PerformSelect = function(select)  
            {  
                if (null == select)  
                    select = true;  
     
                if (this.IsSelected != select)  
                {     
                    var eventArgs =   
                        new Telerik.Web.UI.CalendarDateSelectingEventArgs(select, this);  
                          
                    this.RadCalendar.raise_dateSelecting(eventArgs);  
                      
                    if (eventArgs.get_cancel())  
                    {  
                        return false;  
                    }  
                      
                    this.IsSelected = select;  
                      
    //              var cellStyle = this.GetDefaultItemStyle();  
    //                
    //              if (cellStyle)  
    //              {                
    //                       this.DomElement.className = cellStyle[1];  
    //                       this.DomElement.style.cssText = cellStyle[0];  
    //              }  
                      
                    if (select)  
                    {         
                        this.RadCalendar.Selection.Add(this.get_date());  
                    }  
                    else 
                    {  
                        this.RadCalendar.Selection.Remove(this.get_date());  
                    }  
                      
                    this.RadCalendar.raise_dateSelected(new Telerik.Web.UI.CalendarDateSelectedEventArgs(this));  
                }     
            };  
        }     
              
    </script>   
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017