Horizontal Highliting of columns

[Kartikey]

In my Project I'm using a RadSchedular where currently highlighting  of vertical columns is only poosible.
The requirement is of highlighting of horizontal column as well along with the vertical one when the the cursor is placed on particular cell.

Attached is the display of  the Image from part of the Schedular in browser. Suppose now if the cursor is placed on 52 CW only particular row is highlighted ,the requirement is of highlighting of columns as well paralleled.

Below is the code snippet for the RadSchedular 

<telerik:RadPane ID="RadPane2" runat="server" OnClientResized="PaneResized" Height="100%"
      Scrolling="None" MinWidth="200" OnClientCollapsing="CollapseToMinWidth" OnClientBeforeExpand="ExpandFromMinWidth">
      <telerik:RadScheduler ID="SPScheduler" runat="server" SelectedView="TimelineView"
          FirstDayOfWeek="Monday" LastDayOfWeek="Friday" OverflowBehavior="Scroll" OnClientAppointmentMoveEnd="OnAppoinmentMoveEnd"
          OnClientAppointmentResizeStart="OnAppoinmentResizeStart" OnClientAppointmentInserting="OnAppointmentInserting"
          DataEndField="End" DataKeyField="ID" OnClientFormCreated="OnFormCreated" DataStartField="Start"
          DataSubjectField="Phase" CustomAttributeNames="Iteration,Servers,DBType" StartEditingInAdvancedForm="True"
          StartInsertingInAdvancedForm="True" OnAppointmentDelete="SPScheduler_AppointmentDelete"
          OnAppointmentInsert="SPScheduler_AppointmentInsert" OnAppointmentUpdate="SPScheduler_AppointmentUpdate"
          OnAppointmentDataBound="SPScheduler_AppointmentDataBound" OnAppointmentCommand="SPScheduler_AppointmentCommand"
          OnNavigationCommand="SPScheduler_NavigationCommand" OnTimeSlotCreated="SPScheduler_TimeSlotCreated"
          OnFormCreated="SPScheduler_FormCreated" ShowResourceHeaders="False" OnPreRender="SPScheduler_PreRender"
          OnNavigationComplete="SPScheduler_NavigationComplete" Height="100%" MinimumInlineFormHeight="500"
          MinimumInlineFormWidth="200" Skin="Simple">
          <DayView UserSelectable="false" />
          <WeekView UserSelectable="false" />
          <MonthView UserSelectable="false" />
          <TimelineView NumberOfSlots="35" SlotDuration="7.00:00:00" GroupingDirection="Vertical"
              GroupBy="Order" ShowInsertArea="false" /,

  

[Boyan Dimitrov]

Hello,

As far as I understand you have implemented a logic that highlights a row of cells when user hovers a specific time slot cell and you want to implement vertical highlighting. If this is not the functionality you are trying to achieve please explain what exactly you want to happen when a user hovers a specific time slot cell.


Regards,
Boyan Dimitrov
Telerik

[Kartikey]

Yes Boyan I want both the highlighting together when cursor is above a particular cell

[Kartikey]

Yes Boyan I want both the highlighting together when cursor is above a particular cell

[Boyan Dimitrov]

Hello,

Please find attached a sample project that shows such functionality.

//JavaScript

function pageLoad() {

    $telerik.$(".rsAllDayTable td").hover(function () {
        //gets the time slot object from the dom element where the cursor is and get the time slot object index
        var rawIndex = ($find("RadScheduler1").get_activeModel().getTimeSlotFromDomElement(this).get_index());
        //some parsing functionality in order to determine the column index of the timeslot
        var index = rawIndex.indexOf(":");
        var currentColumntIndex = rawIndex.substring(index + 1);
        var adf = parseInt(currentColumntIndex) + 1;
        //color all cells in the column in red color for testing purposes
        $telerik.$(".rsAllDayTable tr td:nth-child(" + adf + ")").css("background-color", "red");
        //same logic when user leaves the cell- it color the cells with the default color
    }, function () {
        var rawIndex = ($find("RadScheduler1").get_activeModel().getTimeSlotFromDomElement(this).get_index());
        var index = rawIndex.indexOf(":");
        var currentColumntIndex = rawIndex.substring(index + 1);
        var adf = parseInt(currentColumntIndex) + 1;
        $telerik.$(".rsAllDayTable tr td:nth-child(" + adf + ")").css("background-color", "#EEEEEE");
    });

}

Regards,
Boyan Dimitrov
Telerik

[Kartikey]

Hello Boyan,

The mentioned script is not working , the script which is responsible for highlighting of vertical columns is 

$(".rsAllDayRow").on("mouseenter", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "LightBlue");
    $(gridRow).children().css("background-image", "none");
})
$(".rsAllDayRow").on("mouseleave", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "inherit");
    $(gridRow).children().css("background-image", "inherit");
})
$(".rgRow").on("mouseenter", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "LightBlue");
    $(gridRow).children().css("background-image", "none");
})
$(".rgRow").on("mouseleave", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "inherit");
    $(gridRow).children().css("background-image", "inherit");
})

Also, the highlighting of headers is not working in the demo provided, kindly let me know if there's a solution where relevant headers columns are also getting highlighted.

Thanks in Advance

[Kartikey]

Also If I'm clubbing both the scripts the moved out cells in horizontal columns are fading back to #EEEEEE, whereas the requirement is of Lightblue to be implemented in both sides and the selected cell should be higlighted

This is the snippet of script

$telerik.$(".rsAllDayTable  td").hover(function () {
    //gets the time slot object from the dom element where the cursor is and get the time slot object index
    var rawIndex = ($find('<%=SPScheduler.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
    //some parsing functionality in order to determine the column index of the timeslot
    var index = rawIndex.indexOf(":");
    var currentColumntIndex = rawIndex.substring(index + 1);
    var adf = parseInt(currentColumntIndex) + 1;
    //color all cells in the column in red color for testing purposes
    $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").css("background-color", "LightBlue");
    //same logic when user leaves the cell- it color the cells with the default color
}, function () {
    var rawIndex = ($find('<%=SPScheduler.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
    var index = rawIndex.indexOf(":");
    var currentColumntIndex = rawIndex.substring(index + 1);
    var adf = parseInt(currentColumntIndex) + 1;
    $telerik.$(".rsAllDayTable tr td:nth-child(" + adf + ")").css("background-color", "#EEEEEE");
 });


$(".rsAllDayRow").on("mouseenter", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "LightBlue");
})
$(".rsAllDayRow").on("mouseleave", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "#EEEEEE");
})
$(".rgRow").on("mouseenter", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "LightBlue");
})
$(".rgRow").on("mouseleave", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "#EEEEEE");
})

In the given screenshot I Placed my cursor on CW10 and moved to 5 , as visible in the image the Cells from 5 to 10 changed back to white, whereas the requirement is that of them to remain LightBlue only. 

Thanks in advance

[Boyan Dimitrov]

Hello,

Please try the following suggestion in order to color the vertical and horizontal table cells and the header cell as well:

//JavaScript

function pageLoad() {
     $telerik.$(".rsAllDayTable  td").hover(function () {
         //gets the time slot object from the dom element where the cursor is and get the time slot object index
         var rawIndex = ($find('<%=RadScheduler1.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
         //some parsing functionality in order to determine the column index of the timeslot
         var index = rawIndex.indexOf(":");
         var currentColumntIndex = rawIndex.substring(index + 1);
         var adf = parseInt(currentColumntIndex) + 1;
         //color all cells in the column in light blue color for testing purposes ( the customClass does have background color set to light blue)
         $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").addClass("customClass");
         //this colors the entire row in light blue color
         $telerik.$(this.parentElement).css("background-color", "LightBlue");
         //color the header cell in light blue color as well
         $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "LightBlue");

     }, function () {
         var rawIndex = ($find('<%=RadScheduler1.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
         var index = rawIndex.indexOf(":");
         var currentColumntIndex = rawIndex.substring(index + 1);
         var adf = parseInt(currentColumntIndex) + 1;
         $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").removeClass("customClass")
         $telerik.$(this.parentElement).css("background-color", "#EEEEEE");
         $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "#ECECEC");
     });
 }

//css

<style type="text/css">
       .customClass {
           background-color:lightblue;
       }
   </style>

Please find attached a sample page that implements this approach.



Regards,
Boyan Dimitrov
Telerik

[Kartikey]

Hello Boyan,

The given script is working fine but there's a small problem when user plans a event and hovers the mouse over that. 
What happens the highlighting jumps to the first column of the schedular to the left

[Boyan Dimitrov]

Hello,

I would like to clarify that your observations are correct. Please add the highlighted code in yellow in order to avoid this behavior:
//JavaScript

$telerik.$(".rsAllDayTable td").hover(function () {
         if (($telerik.$(this).find(".rsAptContent").length) != 0) {
             return false;
         }
........

Regards,
Boyan Dimitrov
Telerik

[Kartikey]

Sorry Boyan the given change is not working, the only thing which it's able to do is to stop cursor to jump to the first, but still the highlighting is getting invisible when the mouse is hovered over the planned cell.

I tried with the demo project also provided by you , but the same thing is reiterating over there.
Below is the snippet of the entire script for better clarity.

$(".rsAllDayRow").on("mouseenter", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "LightBlue");
    $(gridRow).children().css("background-image", "none");
})
$(".rsAllDayRow").on("mouseleave", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "inherit");
    $(gridRow).children().css("background-image", "inherit");
})

$(".rgRow").on("mouseenter", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "LightBlue");
    $(gridRow).children().css("background-image", "none");
})
$(".rgRow").on("mouseleave", function myfunction() {
    var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
    $(gridRow).children().css("background-color", "inherit");
    $(gridRow).children().css("background-image", "inherit");
})

$telerik.$(".rsAllDayTable  td").hover(function () {
    //gets the time slot object from the dom element where the cursor is and get the time slot object index
    var rawIndex = ($find('<%=SPScheduler.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
    //some parsing functionality in order to determine the column index of the timeslot
    var index = rawIndex.indexOf(":");
    var currentColumntIndex = rawIndex.substring(index + 1);
    var adf = parseInt(currentColumntIndex) + 1;
    if (($telerik.$(this).find(".rsAptContent").length) != 0) {
        return false;

     }
    //color all cells in the column in light blue color for testing purposes ( the customClass does have background color set to light blue)
    $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").addClass("SchedulerHoveredStyle");
    //color the header cell in light blue color as well
    $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "LightBlue");
 }, function () {
    var rawIndex = ($find('<%=SPScheduler.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
    var index = rawIndex.indexOf(":");
    var currentColumntIndex = rawIndex.substring(index + 1);
    var adf = parseInt(currentColumntIndex) + 1;
    $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").removeClass("SchedulerHoveredStyle")
    $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "rgb(228, 228, 228)");
});

[Kartikey]

The requirement is of highlighting to be continued in the same manner if either the mouse is hovered over an empty cell or a filled cell

[Boyan Dimitrov]

Hello,

I would like to clarify that this custom highlight functionality could not be achieved when user hovers on an appointment (filled cell). This is due to some appointment rendering and nesting of the DOM elements specifics of the Timeline view does. I am afraid that the only solution to this requirement is to highlight the rows and columns of the hovered time slot (cell), but not an appointment

Regards,
Boyan Dimitrov
Telerik

[Farjana]

Hi Boyan,

I have been working on the above mentioned issue. After analysis, I have found that whenever you call the hover function of "td", getTimeSlotFromDomElement returns correct index only if it is an empty slot. When there is an appointment inside a time slot,

$find("RadScheduler1").get_activeModel().getTimeSlotFromDomElement(this).get_index()

method always returns "0:0", thats why always the first column is getting highlighted.

To avoid this, there is another method, getTimeSlotForAppointment,
which can be called on each appointment hover as follows,

scheduler.get_appointments().forEach(function (app) {
                app.get_element().onmouseover = function () {
                    var rawIndex = scheduler.get_activeModel().getTimeSlotForAppointment(app).get_index();
                    var index = rawIndex.indexOf(":");
                    var currentColumntIndex = rawIndex.substring(index + 1);
                    var adf = parseInt(currentColumntIndex) + 1;
                    //remove previous highlighting if retained
                    $telerik.$(".rsAllDayTable  tr td:nth-child(" + parseInt(currentColumntIndex) + ")").css("background-color", "#EEEEEE");
                    $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + parseInt(currentColumntIndex) + ") div").css("background-color", "rgb(228, 228, 228)");

                    //color all cells in the column in light blue color for testing purposes ( the customClass does have background color set to light blue)
                    $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").addClass("SchedulerHoveredStyle");
                    //this colors the entire row in light blue color
                    $telerik.$(((this.parentElement).parentElement).parentElement).css("background-color", "LightBlue");
                    //color the header cell in light blue color as well
                    $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "LightBlue");

                    appHover = true;
                };
                app.get_element().onmouseout = function () {
                    appHover = false;
                    var rawIndex = scheduler.get_activeModel().getTimeSlotForAppointment(app).get_index();
                    var index = rawIndex.indexOf(":");
                    var currentColumntIndex = rawIndex.substring(index + 1);
                    var adf = parseInt(currentColumntIndex) + 1;
                    $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").removeClass("SchedulerHoveredStyle");
                    $telerik.$(((this.parentElement).parentElement).parentElement).css("background-color", "#EEEEEE");
                    $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "rgb(228, 228, 228)");
                };
            });

this helps to highlight the column even if you hover over appointment.  See attached screenshot