This is a migrated thread and some comments may be shown as answers.

Appointment AppTemplate set css attributes issue

2 Answers 23 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Milton
Top achievements
Rank 1
Milton asked on 16 Nov 2018, 11:32 AM

     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 Answers, 1 is accepted

Sort by
0
Accepted
Peter Milchev
Telerik team
answered on 21 Nov 2018, 09:49 AM
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.
0
Milton
Top achievements
Rank 1
answered on 07 Dec 2018, 09:20 AM

Hello,

 

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

Tags
Scheduler
Asked by
Milton
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Milton
Top achievements
Rank 1
Share this question
or