Highlight all appointments with the same attributes as the hovered one

1 posts, 0 answers
  1. Peter
    Peter avatar
    13 posts
    Member since:
    May 2016

    Posted 27 Mar 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