OnFocus and OnBlur event

10 posts, 0 answers
  1. Vitaly
    Vitaly  avatar
    68 posts
    Member since:
    Aug 2011

    Posted 26 Jun 2014 Link to this post

    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​
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Jun 2014 in reply to Vitaly Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vitaly
    Vitaly  avatar
    68 posts
    Member since:
    Aug 2011

    Posted 27 Jun 2014 in reply to Shinu Link to this post

    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.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Jun 2014 in reply to Vitaly Link to this post

    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.
  6. Vitaly
    Vitaly  avatar
    68 posts
    Member since:
    Aug 2011

    Posted 30 Jun 2014 Link to this post

    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.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Jun 2014 in reply to Vitaly Link to this post

    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.

  8. Vitaly
    Vitaly  avatar
    68 posts
    Member since:
    Aug 2011

    Posted 01 Jul 2014 Link to this post

    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.
       
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Jul 2014 in reply to Vitaly Link to this post

    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.
  10. Vitaly
    Vitaly  avatar
    68 posts
    Member since:
    Aug 2011

    Posted 02 Jul 2014 Link to this post

    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. 
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 Jul 2014 in reply to Vitaly Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017