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
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"
/
,13 Answers, 1 is accepted
0
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
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0

Kartikey
Top achievements
Rank 1
answered on 09 Jan 2014, 06:57 AM
Yes Boyan I want both the highlighting together when cursor is above a particular cell
0

Kartikey
Top achievements
Rank 1
answered on 09 Jan 2014, 06:58 AM
Yes Boyan I want both the highlighting together when cursor is above a particular cell
0
Hello,
Please find attached a sample project that shows such functionality.
//JavaScript
Regards,
Boyan Dimitrov
Telerik
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0

Kartikey
Top achievements
Rank 1
answered on 21 Jan 2014, 08:29 AM
Hello Boyan,
The mentioned script is not working , the script which is responsible for highlighting of vertical columns is
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
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
0

Kartikey
Top achievements
Rank 1
answered on 23 Jan 2014, 10:09 AM
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
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
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
0
Accepted
Hello,
Please try the following suggestion in order to color the vertical and horizontal table cells and the header cell as well:
//JavaScript
//css
Please find attached a sample page that implements this approach.
Regards,
Boyan Dimitrov
Telerik
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0

Kartikey
Top achievements
Rank 1
answered on 24 Jan 2014, 11:56 AM
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
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
0
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
Regards,
Boyan Dimitrov
Telerik
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0

Kartikey
Top achievements
Rank 1
answered on 30 Jan 2014, 06:48 AM
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.
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)"
);
});
0

Kartikey
Top achievements
Rank 1
answered on 30 Jan 2014, 10:09 AM
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
0
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
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0

Farjana
Top achievements
Rank 1
answered on 19 Mar 2014, 10:31 AM
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,
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,
this helps to highlight the column even if you hover over appointment. See attached screenshot
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()
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