Appointment AppTemplate set css attributes issue

[Milton]

     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);
            }

[Peter Milchev]

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

[Milton]

Hello,

 

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