Appointment AppTemplate set css attributes issue

3 posts, 1 answers
  1. Milton
    Milton avatar
    6 posts
    Member since:
    Feb 2017

    Posted 16 Nov 2018 Link to this post

         Hi,

    So far the radscheduler has proved to be a very useful asset. However I am stuck with one issue. As part of my apptemplate on the instantiation of the control I want to set the 'Appointment' with the 'data-toggle', 'data-placement' and 'title' attributes in order to use a Bootstrap 3 tooltip rather than the generic one. At runtime it ignores what I've set and sets the title as the content of the appointment. 

    Is there a way to do this? Or is something happening in the background which removes it. Example below. None of the 'app.Attributes' get appended.

    public void InstantiateIn(Control container)
                {
                    SchedulerAppointmentContainer aptCont = (SchedulerAppointmentContainer)container;
                    Appointment app = aptCont.Appointment;
                    app.Attributes.Add("data-toggle", "tooltip");
                    app.Attributes.Add("data-placement", "right");
                    app.Attributes.Add("title", "Radscheduler is the best!");
     
                    LinkButton lbs = new LinkButton();
                    lbs.ID = "btnConductAppointment";
                    lbs.Text = "This is a linkbutton";
     
                    container.Controls.Add(lbs);
                }
  2. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    566 posts

    Posted 21 Nov 2018 Link to this post

    Hello Milton,

    The title attribute is not saved in the Attributes collection of the appointments. Nevertheless, you can control this by setting the ToolTip property of the Appointment: 

    protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)
    {
        e.Appointment.ToolTip = "Radscheduler is the best!";
    }

    Regarding the other attributes, you can access them on the client side with the client-side API: https://docs.telerik.com/devtools/aspnet-ajax/controls/scheduler/client-side-programming/properties-and-methods/schedulerappointment-object. Then you can set the attributes in the Sys.Application.Load event: 

    <%-- https://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/executing-javascript-code-from-server#when-using-aspnet-ajax --%>
    <telerik:RadCodeBlock runat="server">
        <script>
            function pageLoadHandler() {
                var scheduler = $find("<%= RadScheduler1.ClientID %>");
                scheduler.get_appointments().forEach(function (apt) {
                    var attributes = apt.get_attributes();
                    attributes.forEach(function (key, value) {
                        apt.get_element().setAttribute(key, value);
                    });
                })
                // Sys.Application.remove_load(pageLoadHandler); 
            }
            Sys.Application.add_load(pageLoadHandler);
        </script>
     
    </telerik:RadCodeBlock>

    We have also created a KB article for this scenario: Apply custom HTML attributes to the Scheduler appointment.

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Milton
    Milton avatar
    6 posts
    Member since:
    Feb 2017

    Posted 07 Dec 2018 in reply to Peter Milchev Link to this post

    Hello,

     

    Thank you for the reply. This was useful information and helped me achieve what I needed to.

Back to Top