I have a Telerik RadDatePicker and I'm trying to apply a class to the control when the control has focus and remove it when the control loses focus. I am using this jQuery:
$('#dialogNewCrm input, #txtNotes, .riTextBox').focusin(function() {
$(this).addClass('highlight');
});
$('#dialogNewCrm input, #txtNotes, .riTextBox').focusout(function () {
$(this).removeClass('highlight');
});
The .riTextBox is the class assigned to the RadDatePicker control. I tried adding an alert to the functions and it hits the alert, so I know the event functions are firing correctly. I also used the Chrome debugger to inspect the controls. On all my textbox controls, the class is being added, but just not the .riTextBox control.
Does anyone have any suggestions? Everything seems to be okay, but its simply not applying the class to the control. This leads me to believe that maybe its firing my event, applying the class, then Telerik might have their own focusin event handler thats firing after my event and its clearing all CSS styles and applying their own. If this is the case, my question should probably be, is there a way to make my event fire last, after Telerik's?
Here is the generated HTML from Telerik's RadDatePicker:
<div id="ctl00_ContentPlaceHolder1_txtBirthDate_wrapper" class="RadPicker RadPicker_Default" style="display:inline-block;width:160px;">
<input style="visibility:hidden;display:block;float:right;margin:0 0 -1px -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_ContentPlaceHolder1_txtBirthDate" name="ctl00$ContentPlaceHolder1$txtBirthDate" type="text" class="rdfd_ radPreventDecorate" value="" title="Visually hidden input created for functionality purposes."><table cellspacing="0" class="rcTable rcSingle" summary="Table holding date picker control for selection of dates." style="width:100%;">
<caption style="display:none;">
RadDatePicker
</caption><thead style="display:none;">
<tr>
<th scope="col">RadDatePicker</th>
</tr>
</thead><tbody>
<tr>
<td class="rcInputCell" style="width:100%;"><span id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_wrapper" class="riSingle RadInput RadInput_Default" style="display: block; width: 100%;"><input id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput" name="ctl00$ContentPlaceHolder1$txtBirthDate$dateInput" class="riTextBox riEnabled" type="text"><input id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_ClientState" name="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_ClientState" type="hidden" autocomplete="off" value="{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}"></span></td><td><a title="Open the calendar popup." href="#" id="ctl00_ContentPlaceHolder1_txtBirthDate_popupButton" class="rcCalPopup">Open the calendar popup.</a><div id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_wrapper" style="display:none;">
<table id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar" summary="Calendar control which enables the selection of dates." cellspacing="0" class="RadCalendar RadCalendar_Default" border="0">
<caption>
<span style="display:none;">Calendar</span>
</caption><thead>
<tr>
<td class="rcTitlebar"><table cellspacing="0" summary="Title and navigation which can change and show the current year and month." border="0">
<caption>
<span style="display:none;">Title and navigation</span>
</caption><thead>
<tr style="display:none;">
<th scope="col">Title and navigation</th>
</tr>
</thead><tbody>
<tr>
<td><a id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_FNP" class="rcFastPrev" title="<<" href="#"><<</a></td><td><a id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_NP" class="rcPrev" title="<" href="#"><</a></td><td id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Title" class="rcTitle">May 2014</td><td><a id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_NN" class="rcNext" title=">" href="#">></a></td><td><a id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_FNN" class="rcFastNext" title=">>" href="#"><<</a></td>
</tr>
</tbody>
</table></td>
</tr>
</thead><tbody>
<tr>
<td class="rcMain"><table id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top" class="rcMainTable" cellspacing="0" summary="Table containing all dates for the currently selected month." border="0">
<caption>
<span style="display:none;">May 2014</span>
</caption><thead>
<tr class="rcWeek">
<th class="rcViewSel" scope="col"> </th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_1" title="Sunday" scope="col" abbr="Sun">S</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_2" title="Monday" scope="col" abbr="Mon">M</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_3" title="Tuesday" scope="col" abbr="Tue">T</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_4" title="Wednesday" scope="col" abbr="Wed">W</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_5" title="Thursday" scope="col" abbr="Thu">T</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_6" title="Friday" scope="col" abbr="Fri">F</th><th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_cs_7" title="Saturday" scope="col" abbr="Sat">S</th>
</tr>
</thead><tbody>
<tr class="rcRow">
<th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_1" scope="row">18</th><td class="rcOtherMonth" title="Sunday, April 27, 2014"><a href="#">27</a></td><td class="rcOtherMonth" title="Monday, April 28, 2014"><a href="#">28</a></td><td class="rcOtherMonth" title="Tuesday, April 29, 2014"><a href="#">29</a></td><td class="rcOtherMonth" title="Wednesday, April 30, 2014"><a href="#">30</a></td><td title="Thursday, May 01, 2014"><a href="#">1</a></td><td title="Friday, May 02, 2014"><a href="#">2</a></td><td class="rcWeekend" title="Saturday, May 03, 2014"><a href="#">3</a></td>
</tr><tr class="rcRow">
<th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_2" scope="row">19</th><td class="rcWeekend" title="Sunday, May 04, 2014"><a href="#">4</a></td><td title="Monday, May 05, 2014"><a href="#">5</a></td><td title="Tuesday, May 06, 2014"><a href="#">6</a></td><td title="Wednesday, May 07, 2014"><a href="#">7</a></td><td title="Thursday, May 08, 2014"><a href="#">8</a></td><td title="Friday, May 09, 2014"><a href="#">9</a></td><td class="rcWeekend" title="Saturday, May 10, 2014"><a href="#">10</a></td>
</tr><tr class="rcRow">
<th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_3" scope="row">20</th><td class="rcWeekend" title="Sunday, May 11, 2014"><a href="#">11</a></td><td title="Monday, May 12, 2014"><a href="#">12</a></td><td title="Tuesday, May 13, 2014"><a href="#">13</a></td><td title="Wednesday, May 14, 2014"><a href="#">14</a></td><td title="Thursday, May 15, 2014"><a href="#">15</a></td><td title="Friday, May 16, 2014"><a href="#">16</a></td><td class="rcWeekend" title="Saturday, May 17, 2014"><a href="#">17</a></td>
</tr><tr class="rcRow">
<th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_4" scope="row">21</th><td class="rcWeekend" title="Sunday, May 18, 2014"><a href="#">18</a></td><td title="Monday, May 19, 2014"><a href="#">19</a></td><td title="Tuesday, May 20, 2014"><a href="#">20</a></td><td title="Wednesday, May 21, 2014"><a href="#">21</a></td><td title="Thursday, May 22, 2014"><a href="#">22</a></td><td title="Friday, May 23, 2014"><a href="#">23</a></td><td class="rcWeekend" title="Saturday, May 24, 2014"><a href="#">24</a></td>
</tr><tr class="rcRow">
<th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_5" scope="row">22</th><td class="rcWeekend" title="Sunday, May 25, 2014"><a href="#">25</a></td><td title="Monday, May 26, 2014"><a href="#">26</a></td><td title="Tuesday, May 27, 2014"><a href="#">27</a></td><td title="Wednesday, May 28, 2014"><a href="#">28</a></td><td title="Thursday, May 29, 2014"><a href="#">29</a></td><td title="Friday, May 30, 2014"><a href="#">30</a></td><td class="rcWeekend" title="Saturday, May 31, 2014"><a href="#">31</a></td>
</tr><tr class="rcRow">
<th id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_Top_rs_6" scope="row">23</th><td class="rcOtherMonth" title="Sunday, June 01, 2014"><a href="#">1</a></td><td class="rcOtherMonth" title="Monday, June 02, 2014"><a href="#">2</a></td><td class="rcOtherMonth" title="Tuesday, June 03, 2014"><a href="#">3</a></td><td class="rcOtherMonth" title="Wednesday, June 04, 2014"><a href="#">4</a></td><td class="rcOtherMonth" title="Thursday, June 05, 2014"><a href="#">5</a></td><td class="rcOtherMonth" title="Friday, June 06, 2014"><a href="#">6</a></td><td class="rcOtherMonth" title="Saturday, June 07, 2014"><a href="#">7</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table><input type="hidden" name="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_SD" id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_SD" value="[]"><input type="hidden" name="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_AD" id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_AD" value="[[1900,1,1],[2099,12,30],[2014,5,22]]">
</div></td>
</tr>
</tbody>
</table><input id="ctl00_ContentPlaceHolder1_txtBirthDate_ClientState" name="ctl00_ContentPlaceHolder1_txtBirthDate_ClientState" type="hidden" value="{"minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00"}" autocomplete="off">
</div>