Appointment Category Colors in Legend

13 posts, 1 answers
  1. Shane Ham
    Shane Ham avatar
    14 posts
    Member since:
    Jan 2008

    Posted 03 Jun 2009 Link to this post

    How can I show the built in Appointment Category styles in a legend? I see where this is done on the Alex, Bob example but it appears that the color box is rendered with a span that has a custom style applied.
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 03 Jun 2009 Link to this post

    Hello Shane,

    The background images for the appointment styles can be found in your local installation of the Telerik.Web.UI suit -> Skins\Common\Scheduler and the css rules are defined in Scheduler.css in the Skins folder.


    Regards,
    Peter
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Shane Ham
    Shane Ham avatar
    14 posts
    Member since:
    Jan 2008

    Posted 03 Jun 2009 Link to this post

    Thanks Peter but I don't think that I need to show an image. It appeared in the example that the span just had a background color set. I am guessing that the embedded images are mapped to named colors so to speak?
  4. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 03 Jun 2009 Link to this post

    Hi Shane,

    The background images for the appointment styles use gradients so the color will vary from top to bottom. You can download any color picker and get the color code by clicking somewhere in the middle of the image. Here is a light and easy to use tool that you help you with this task:
    http://www.freedownloadsarchive.com/Multimedia_and_Design/Image_Editing/download-GetColor____Color_Picker_27452.html


    Best wishes,
    Peter
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Shane Ham
    Shane Ham avatar
    14 posts
    Member since:
    Jan 2008

    Posted 03 Jun 2009 Link to this post

    Thanks for the prompt responses Peter. Perhaps I am going about this wrong way. Let me explain what I am trying to do.

    I am trying to do something similiar to the First Look example where the bottom panel bar has 10 checkboxes. Lets call them factors.
    Each factor is mapped to a corresponding rsCategory + color in the database. I just want to show the color next to the checkbox. I thought that the styles were embedded. Doing something like this does not seem to give me the desired result. 

    <span class="rsCategoryBlue">&nbsp;&nbsp;&nbsp;&nbsp;</span>

    Now I am certainly able to display the color as you suggested, I'm just not sure that that is the best way. If you guys change the pngs in the future I would have to make changes as well. It would be better just to use the embedded styles I think.



  6. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 04 Jun 2009 Link to this post

    Hi Shane,

    I see what you mean and it makes perfect sense. Here is how to fetch a background image from the WebResource:

    * * *  
     <div style="background:transparent url('<%= ClientScript.GetWebResourceUrl(typeof(RadScheduler), "Telerik.Web.UI.Skins.Common.Scheduler.rsAppointmentRedBg.png") %>') no-repeat -10px -10px" >text</div> 
    * * *  
        

    This code will get you the background image for the rsCategoryRed style. You can get the other 9 images in the same way, just change the name of the image accordingly.


    Greetings,
    Peter
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Hadi
    Hadi avatar
    4 posts
    Member since:
    Apr 2011

    Posted 20 Sep 2011 Link to this post

    Hi Peter,

    I'm actually trying to do something similar to this. 
    I would like to make changes on the Telerik demo http://demos.telerik.com/aspnet-ajax/webmail/calendar.aspx in order to display appointment color just next to the calendar name.


    I wrote this:

          class CheckBoxTemplate : ITemplate
        {
            private RadScheduler _radScheduler;
            private RadAjaxManager _radAjaxManager;
            private RadAjaxLoadingPanel _radAjaxLoadingPanel;
            private ClientScriptManager _clientScript;
     
            public RadScheduler RadScheduler
            {
                get
                {
                    return _radScheduler;
                }
                set
                {
                    _radScheduler = value;
                }
            }
     
            public RadAjaxManager RadAjaxManager
            {
                get
                {
                    return _radAjaxManager;
                }
                set
                {
                    _radAjaxManager = value;
                }
            }
     
            public RadAjaxLoadingPanel RadAjaxLoadingPanel
            {
                get
                {
                    return _radAjaxLoadingPanel;
                }
                set
                {
                    _radAjaxLoadingPanel = value;
                }
            }
     
            public ClientScriptManager ClientScript
            {
                get
                {
                    return _clientScript;
                }
                set
                {
                    _clientScript = value;
                }
            }
     
            public void InstantiateIn(Control container)
            {
                IEnumerable<ResourceStyleMapping> Ressources = RadScheduler.ResourceStyles.OfType<ResourceStyleMapping>();
                HtmlGenericControl OuterDiv = new HtmlGenericControl("div");
                OuterDiv.Attributes["class"] = "rpCheckBoxPanel";
                foreach (ResourceStyleMapping Resource in Ressources)
                {
                    HtmlGenericControl InnerDiv = new HtmlGenericControl("div");
                    HtmlGenericControl ColorDiv = new HtmlGenericControl("div");
                    ColorDiv.Attributes["style"] = "background:transparent url('" + ClientScript.GetWebResourceUrl(typeof(RadScheduler), "Telerik.Web.UI.Skins.Common.Scheduler.rsAppointment" + Resource.ApplyCssClass.Replace("rsCategory", "") + "Bg.png") + "') no-repeat -10px -10px";
                    ColorDiv.InnerHtml = "    ";
                    InnerDiv.Controls.Add(ColorDiv);
                    CheckBox CheckBox = new CheckBox();
                    CheckBox.ID = "chkType" + int.Parse(Resource.Key.ToString());
                    CheckBox.Text = Resource.Text;
                    CheckBox.Checked = true;
                    CheckBox.AutoPostBack = true;
                    CheckBox.CheckedChanged += new EventHandler(CheckBoxes_CheckedChanged);
                    InnerDiv.Controls.Add(CheckBox);
                    OuterDiv.Controls.Add(InnerDiv);
                    AjaxSetting Setting = new AjaxSetting(CheckBox.ID);
                    Setting.UpdatedControls.Add(new AjaxUpdatedControl(RadScheduler.ID, RadAjaxLoadingPanel.ID));
                    RadAjaxManager.AjaxSettings.Add(Setting);
                }
                container.Controls.Add(OuterDiv);
            }
     
            protected void CheckBoxes_CheckedChanged(object sender, EventArgs e)
            {
                RadScheduler.Rebind();
            }
        }

    However, i'm afraid the following is not displaying what it supposed to:

    ColorDiv.Attributes["style"] = "background:transparent url('" + ClientScript.GetWebResourceUrl(typeof(RadScheduler), "Telerik.Web.UI.Skins.Common.Scheduler.rsAppointment" + Resource.ApplyCssClass.Replace("rsCategory", "") + "Bg.png") + "') no-repeat -10px -10px";

    Do you have any idea on how to fix this?

    Many thanks,
  8. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 21 Sep 2011 Link to this post

    Hi Hadi,

    My last suggestion in this thread was intended for a very old version of the Telerik.Web.UI controls. Now, you can simply set the BackColor property of the appointment in AppointmentDataBound. The rsAppointment[Color]Bg.png images have been obsoleted and are no longer served by the web resources of the Telerik.Web.UI assembly.


    All the best, Peter
    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
  9. Hadi
    Hadi avatar
    4 posts
    Member since:
    Apr 2011

    Posted 22 Sep 2011 Link to this post

    Hi Peter,

    Thanks you for your answer. Actually my goal is not to set the appointment color but to get the appointment color set by Telerik cssclass and use it as a bgcolor for the related item in the appointment type list.

    Any advise is very appreciated.

    Regards,
  10. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 22 Sep 2011 Link to this post

    Hi Hadi,

    Is there any specific reason why you need to set the CssClass property of the appointment instead of the BackColor property? With the latter, you don't need to extract the background image, since only color will be used.

    Greetings,
    Peter
    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
  11. Hadi
    Hadi avatar
    4 posts
    Member since:
    Apr 2011

    Posted 22 Sep 2011 Link to this post

    Well its simply that i like the colors of the rsCategory[Color] CSS models in Telerik Scheduler.

    Now if you are trying to say that these CSS models can became obsolete in future versions, i might then use a specific color by appointment type instead using BackColor property.

    Please advise.

    Regards,

  12. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 22 Sep 2011 Link to this post

    Hello Hadi,

    The CssClass property will no become obsolete, but it is much easier to style appointments with the BackColor property. You can still preserve the rounded corners and gradient of the appointment by setting AppointmentStyleMode="Default".

    Best wishes,
    Peter
    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
  13. Hadi
    Hadi avatar
    4 posts
    Member since:
    Apr 2011

    Posted 22 Sep 2011 Link to this post

    okay thanks.

    regards,
Back to Top