Changing timeslot background color programmatically breaks hover background color

4 posts, 0 answers
  1. Prava kafle
    Prava kafle avatar
    217 posts
    Member since:
    Apr 2010

    Posted 04 Jan 2013 Link to this post

    Hi,
    I am setting background color of RadScheduler's time slot based on some data source attribute.

    protected void Schedule_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
        {
                  ................
                   If(condition == 1)
                           e.TimeSlot.Control.BackColor = Color.White;
                   else
                            e.TimeSlot.Control.BackColor = Color.Grey;
                    ....
    }

    On doing so, it is breaking hover background color (especially height). now, when I hover over a timeslot, it partially highlights  it as seen in the image attached. How can I give a background color to time slot and also  highlight  100% width and hieght of timeslot  on hover?

    Thanks,
    Prava
  2. Plamen
    Admin
    Plamen avatar
    3080 posts

    Posted 07 Jan 2013 Link to this post

    Hello Prava,

     
    You can achieve this functionality by using the following code:

    protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
       {
           RadScheduler scheduler = (RadScheduler)sender;
       
           if (scheduler.SelectedView == SchedulerViewType.TimelineView)
           {
     
               e.TimeSlot.CssClass = "White";
           }
     
       }
    <style type="text/css">
            .White{
            background-color:white !important;
             
            }
            .White:hover{
            background-color: #C5C5C5 !important;
            }
     
        </style>

    Hope this will be helpful.

    Greetings,
    Plamen
    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. Prava kafle
    Prava kafle avatar
    217 posts
    Member since:
    Apr 2010

    Posted 07 Jan 2013 Link to this post

    Hi Plamen,

    I cannot assign css classes to radItems dynamically, If  I do so I will have to add  15 - 20  css classes and their hovered states.  
    By modifying your code little bit(removing background image) I was able to completely  highlight selected row and hovered row .



     .White{

            background-color:white !important;

             

            }

            .White:hover{

            background-color: #C5C5C5 !important;
            background-image:none !important;

            }




    If possible, I would like to keep the background image  that comes with skin and make it cover 100% row height. 
    Above code removes it.

    Thanks,
    Prava








    Thanks,
    Prava
  4. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    654 posts

    Posted 11 Jan 2013 Link to this post

    Hello, Prava.

    Setting the background colour from code behind will not yield the desired effect, since inline styles are more important than external styles. Thus, you had that nasty effect.

    Using styles with !important flag will yield similar result.

    This is why a simple selector is needed e.g.:

    .RadScheduler_Default .White {
        background-color: white;
    }

    Of course, if you are not using the default skin, you will need to change the name to match accordingly.

    Regards,
    Ivan Zhekov
    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.
Back to Top