OnFocus and OnBlur event

[Vitaly]

Hi guys,
inside my RadPanelBar I have a RadCombobox and RadTextBox and I need to change background color when control onFocus and when focus leave control onBlur.I tried e few case scenario and did not work:

Please help me.

Thanks so much​

[Shinu]

Hi Vitaly,

Please have a look into the sample code snippet to achieve your scenario.

ASPX:

<telerik:RadPanelBar ID="radpanelbarTestDemo" runat="server">
    <Items>
        <telerik:RadPanelItem Text="Item1">
            <ContentTemplate>
                <telerik:RadComboBox ID="rcboItemsList" runat="server" OnClientBlur="changeComboColorOnBlur">
                </telerik:RadComboBox>
                <telerik:RadTextBox ID="rtxtTestValue" runat="server" ClientEvents-OnBlur="changeTextBoxColorOnBlur">
                </telerik:RadTextBox>
            </ContentTemplate>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

JavaScript:

function changeTextBoxColorOnBlur(sender, args) {
    sender.addCssClass("txtblur-style");
}
function changeComboColorOnBlur(sender, args) {
    var inputElement = sender.get_inputDomElement();
    inputElement.style.backgroundColor = "Blue";
}

CSS:

.RadComboBox_Default .rcbFocused .rcbReadOnly .rcbInput, .riSingle .riTextBox[type="text"]:focus
{
    background-color: Red !important;
}
.txtblur-style
{
    background-color : Blue !important;
}

Thanks,
Shinu.

[Vitaly]

Hi Shinu,
for some reason when I use tab to leave control and go to the next textbox background color is disappeared in radtextbox.

Please help.
Thanks,
Vitaly.

[Shinu]

Hi Vitaly,

Please try the below code snippet to achieve your scenario.

ASPX:

<telerik:RadTextBox ID="rtxtTestValue" runat="server" ClientEvents-OnMouseOver="changeTextBoxColorOnBlur" ClientEvents-OnMouseOut="changeTextBoxColorOnBlur" ClientEvents-OnFocus="changeTextBoxColorOnFocus" ClientEvents-OnBlur="changeTextBoxColorOnBlur">
</telerik:RadTextBox>

JavaScript:

function changeTextBoxColorOnBlur(sender, args) {
    sender.addCssClass("txtblur-style");
}
function changeTextBoxColorOnFocus(sender, args) {
    sender.addCssClass("txtfocus-style");
}

CSS:

.txtfocus-style
{
    background-color: Red !important;
}
.txtblur-style
{
    background-color: Blue !important;
}

Thanks,
Shinu.

[Vitaly]

Hi,
thanks Shinu for you help..it works but now I have another problem.OnBlur event I apply background color and then focus moves to the next control which is RadioButton contains property AutoPostBack = true.
After postback whatever color was in RadTextBox disappeared.

Please help me.
Thanks so much.

[Shinu]

Hi Vitaly,

As a workaround try to get the RadTextBox value on the pageLoad event and if it has value then apply the blur style for the control. Please take a look into the below JavaScript code snippet.

JavaScript:

function pageLoad() {
    var textDemo = $find("<%=rtxtTestValue.ClientID%>");
    if (textDemo.get_value() != "") {
        textDemo.addCssClass("txtblur-style");
    }
}

Let me know if you have any concern.
Thanks,
Shinu.

[Vitaly]

Good morning Shinu,
thanks for your respond that is not what I meant..For RadTextbox OnBlur clientevent is working fine, I was able to set background color of the control  after that I used tab to go to the next control(RadioButton) and click on it and postback occur background color of RadTextbox disappeared.I want that background color stays in RadTextBox as long as user on the page no matter what.

Thanks again for your help.
   

[Shinu]

Hi  Vitaly,

One suggestion is that try to ajaxify the RadioButton. It will not allow the entire page postback and the RadTextBox styles will persist.  Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadPanelBar ID="radpanelbarTestDemo" runat="server">
    <Items>
        <telerik:RadPanelItem Text="Item1">
            <ContentTemplate>
                <telerik:RadTextBox ID="rtxtTestValue" runat="server" ClientEventsOnMouseOver="changeTextBoxColorOnBlur" ClientEvents-OnMouseOut="changeTextBoxColorOnBlur" ClientEvents-OnFocus="changeTextBoxColorOnFocus" ClientEvents-OnBlur="changeTextBoxColorOnBlur">
                </telerik:RadTextBox>
                <asp:RadioButton AutoPostBack="true" Text="demo" runat="server" ID="rdoCheckState" />
            </ContentTemplate>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rdoCheckState">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rdoCheckState" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Thanks,
Shinu.

[Vitaly]

Hi Shinu,
one again thanks for your quick responding.
Now I have problem with RadDate picker onblur event.
I do have two RadDatepicker in my html inside RadPanelBar:

<table width="98%" >
<tr>
<td style="width:20%;">
<label class="style">
10. DATE ASSIGNMENT COMMENCES:
</label>
</td>
<td style="width:12%;" >
<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="105px" Height="15" Font-Size="X-Small" MinDate="01/01/1900" MaxDate="12/31/2100" Skin="Vista" Enabled="false" >
<DateInput TabIndex="7" DateFormat="MM/dd/yyyy" runat="server" DisabledStyle-Font-Bold="true" DisabledStyle-BackColor="#EFEFEF" MaxLength="10" FocusedStyle-BackColor="#D4DEEC" ClientEvents-OnBlur="changeTextBoxColorOnBlur" ClientEvents-OnKeyPress="changeTextBoxColorOnBlur" ></DateInput>
<DatePopupButton ImageUrl="../Image/icon-calendar.gif" HoverImageUrl="../Image/icon-calendar.gif" />
<ClientEvents OnDateSelected="DateSelected" />
</telerik:RadDatePicker>
<asp:Image ID="DteCommErrImage" runat="server" Width="14px" Height="14px" ImageUrl="~/Image/error-icon.jpg" Visible="false" ImageAlign="Middle" />
</td>



<td style="width:20%;">
<label class="style">
11. DATE ASSIGNMENT TERMINATES:
</label>
</td>
<td style="width:12%;">
<telerik:RadDatePicker ID="RadDatePicker2" runat="server" Width="105px" Height="15" Font-Size="X-Small" MinDate="01/01/1900" MaxDate="12/31/2100" Skin="Vista" Enabled="false">
<DateInput TabIndex="8" DateFormat="MM/dd/yyyy" runat="server" DisabledStyle-Font-Bold="true" DisabledStyle-BackColor="#EFEFEF" MaxLength="10" FocusedStyle-BackColor="#D4DEEC" ClientEvents-OnBlur="changeTextBoxColorOnBlur" ClientEvents-OnKeyPress="changeTextBoxColorOnBlur" ></DateInput>
<DatePopupButton ImageUrl="../Image/icon-calendar.gif" HoverImageUrl="../Image/icon-calendar.gif" />
<ClientEvents OnDateSelected="DateSelected" />
</telerik:RadDatePicker>
<asp:Image ID="DteTermErrImage" runat="server" Width="14px" Height="14px" ImageUrl="~/Image/error-icon.jpg" Visible="false" ImageAlign="Middle" />
</td>



</tr>
</table>

For some reason RadDatePicker1 work fine onBlur event but RadDatePicker2 does not set background color when I leave control.

Please help.
As usually thanks so much for your help. 

[Shinu]

Hi Vitaly,

Unfortunately I couldn't replicate the issue at my end. Please try the below ASPX code which works fine at my end. Please provide the steps to replicate the issue for further help.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker2" runat="server" Width="105px" Height="15" Font-Size="X-Small" MinDate="01/01/1900" MaxDate="12/31/2100" Skin="Vista">
    <DateInput ID="DateInput2" DateFormat="MM/dd/yyyy" runat="server" MaxLength="10" FocusedStyle-BackColor="#D4DEEC" ClientEvents-OnBlur="changeTextBoxColorOnBlur" ClientEvents-OnKeyPress="changeTextBoxColorOnBlur" ClientEvents-OnMouseOut="changeTextBoxColorOnBlur" ClientEvents-OnMouseOver="changeTextBoxColorOnBlur">
    </DateInput>
</telerik:RadDatePicker>

Thanks,
Shinu.