Highlight all appointments with the same attributes as the hovered one

Thread is closed for posting
1 posts, 0 answers
  1. EA29E686-AF27-4642-ABE0-763F955DCF04
    EA29E686-AF27-4642-ABE0-763F955DCF04 avatar
    13 posts
    Member since:
    May 2016

    Posted 27 Mar 2018 Link to this post

    Requirements

    Telerik Product and Version

    		 UI for ASP.NET AJAX 2018 R1

    Supported Browsers and Platforms

    		 all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    		 RadScheduler, .NET 4.0/4.5 C#

    Project Description

    This example demonstrates how to add a box-shadow of all appointments that have the same attribute as the currently hovered appointment. 



    <telerik:RadCodeBlock runat="server">
        <script>
            var $ = $ || $telerik.$;
            function f() {
                var scheduler = $find("<%= RadScheduler1.ClientID %>");
     
                $(".rsApt", scheduler.get_element()).on({
                    mouseover: function (ev) {
                        var hoveredAppointment = scheduler.getAppointmentFromDomElement(ev.currentTarget);
                        var hoveredAppointmentAttribute = hoveredAppointment.get_attributes().getAttribute('custom-attribute');
     
                        var allAppointments = scheduler.get_appointments()
                        for (var i = 0; i < allAppointments.get_count() ; i++) {
                            var appointment = allAppointments.getAppointment(i);
                            var appointmentElement = appointment.get_element();
                            if (appointment.get_attributes().getAttribute("custom-attribute") == hoveredAppointmentAttribute) {
                                appointmentElement.classList.add("rsAptHovered");
                            }
                        }
                    },
                    mouseout: function (ev) {
                        $(".rsAptHovered").removeClass("rsAptHovered")
                    }
                })
            }
            Sys.Application.add_load(f);
        </script>
    </telerik:RadCodeBlock>

    private int count = 0;
    protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)
    {
        e.Appointment.Attributes.Add("custom-attribute", "attr" + count % 3);
        count++;
    }



Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.