How do I Change and Persist RadCalendar CSS class on cells from client code

5 posts, 0 answers
  1. Bob Pinna
    Bob Pinna avatar
    11 posts
    Member since:
    Apr 2005

    Posted 12 Jan 2009 Link to this post

    I have a RadCalendar in MultiView mode, with AutoPostback set to true.  Multiple selections are enabled.

    I want to cancel postback in response to a date click and change the
    CSS class of the DOM Element (the td cell).  I'm using the client
    side code shown below.  It's hooked to the OnDateClick event.

    The event handler cancels postback as expected.  The first alert displays
    class=radCalDefault_Default.  The second alerts class=Red.  When the event handler
    completes however, the IE Developer Toolbar shows that the cells CSS class
    has returned to radCalDefault_Default.

    Can you advise as to how to change CSS classes on the client so that they persist?

    function OvernightCalendar_OnDateClick(calendarInstance, args)
    {
      var renderDay = args.get_renderDay();

      alert('Class Name: ' + renderDay.DomElement.className);
      renderDay.DomElement.className = 'Red';
      alert('Class Name (After): ' + renderDay.DomElement.className);
      args.set_cancel(true);
      return false;
    }

    Also: Is there a way to get Intellisense on the Telerik javascript objects?

    Best,
    Bob
  2. Bob Pinna
    Bob Pinna avatar
    11 posts
    Member since:
    Apr 2005

    Posted 12 Jan 2009 Link to this post

    FYI: I tried modifying the style element, from within ..._OnDateClick()...

    renderDay.DomElement.style.backgroundColor = 'Red';

    The cell briefly turns Red, then it goes back to the default style.  What causes the class and style information to be overwritten and how can I disable this?

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bob Pinna
    Bob Pinna avatar
    11 posts
    Member since:
    Apr 2005

    Posted 12 Jan 2009 Link to this post

    For anybody looking to solve the same problem...

    I was able to accomplish my goal by styling the anchor tag that is the one and only child element of the day cell (which is a td).

    Haven't tried applying a class, but assume that will work.  It looks like RadTools overwrites the td class and style information, but leaves the innerHtml untouched.

    Here's my date click handler to style the cell in response to a click and to cancel postback.  Not shown is a web service I'm using to communicate the date selection to the server.

    function OvernightCalendar_OnDateClick(calendarInstance, args)
    {
      var renderDay = args.get_renderDay();
      var e = renderDay.DomElement;
     
      //access the inner <A> element
      for (i=0; i < e.childNodes.length; i++)
      {
        if (e.childNodes[i].nodeName == "A")
        {
          //alert('Changing anchor background');
          e.childNodes[i].style.backgroundColor = 'Red';
        }
      }

      args.set_cancel(true);
      return false;
    }
  5. Axel
    Axel avatar
    41 posts
    Member since:
    Jul 2009

    Posted 21 Nov 2010 Link to this post

    Hi

    I am using the Radcalendar for absence management i.e. marking days with types of styles to indicate employee absence.
    Everything has been working fine with my calendar set to autopostback=true. Now I am attempting to do everything client side (faster) and used the solutions described above for selectind days and setting different styles. The problem is when I change view "OnCalendarViewChanged" then all my style changes are lost.

    I need to be able to select days i.e. change day styles onClick, change views and persist all days because in the end I count all the days I have changed styles on and store to my DB.

    Any idea or trick to do this?
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Nov 2010 Link to this post

    Hello AxelGunn,

    In order to apply custom styling to RadCalendar cells when using client-side month navigation, you can use the client-side DayRender event:

    http://demos.telerik.com/aspnet-ajax/calendar/examples/programming/customdaycellrendering/defaultcs.aspx

    Regards,
    Dimo
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017