This is a migrated thread and some comments may be shown as answers.

Disable fonctionnality in RadDatePicker

3 Answers 157 Views
Input
This is a migrated thread and some comments may be shown as answers.
arnaud
Top achievements
Rank 1
arnaud asked on 30 Sep 2008, 12:56 AM
Hi,

Is it possible to disable the DateInput style modification inside a RadDatePicker ?
I would like to disable some fonctionnality like HoverStyle and FocusStyle.

In my case, I have a RadDatePicker with a customvalidator and a ValidatorCalloutExtender attached to it :

<telerik:RadDatePicker ID="RadDatePicker1" runat="server"
                </telerik:RadDatePicker> 
                <asp:CustomValidator ID="CustomValidator1" runat="server" Text=" " ControlToValidate="RadDatePicker1" 
                    ClientValidationFunction="RadDatePicker1_Validate" ValidateEmptyText="true" /> 
                <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" runat="server" Enabled="True" 
                    TargetControlID="CustomValidator1" HighlightCssClass="validatorCalloutHighlight"
                </cc1:ValidatorCalloutExtender> 

When the RadDatePicker is empty, I change its textbox background color :

<script language="javascript" type="text/javascript"
    function RadDatePicker1_Validate(sender, args)  
{  
    var picker = $find("<%= RadDatePicker1.ClientID %>").get_dateInput();  
    var textbox = $find("<%= RadDatePicker1.ClientID %>").get_textBox();  
    if (picker.get_value().length == 0)  
    {  
        textbox.className = "validatorCalloutHighlight"
        args.IsValid = false;  
    }  
    else  
    {  
        args.IsValid = true;  
    }  
}  
     
    </script> 
 
Everything is fine until I hover or focus the textbox. In those cases, the default skin of the RadDatePicker is back.

That's why I would like to disable the hover and focus fonctionnality. Is there a way to do it ?

Thank you
Ab


3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 30 Sep 2008, 07:06 AM
Hello Arnaud,

I am afraid that you cannot disable the hover/focus functionality, however, you can modify the styles according to your requirements and scenario. Here is how:

RadInput Client-side Basics

Please scroll down the page and you will see an example under section "Changing the appearance style of RadInput controls on the client".


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
arnaud
Top achievements
Rank 1
answered on 30 Sep 2008, 02:30 PM
Thank you for your answer.

For people who want to use a RadDatePicker while keeping the behavior (and style) of a ValidatorCalloutExtender on it, here is my code :
<%@ Page Language="VB" MasterPageFile="~/lesitedumariage.master" AutoEventWireup="false" 
    CodeFile="Default2.aspx.vb" Inherits="Default2" Title="Page sans titre" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
<asp:Content ID="Content4" ContentPlaceHolderID="CPHmainContent" runat="Server"
 
    <script language="javascript" type="text/javascript"
function RadDatePicker1_Validate(sender, args)  
{  
    var picker = $find("<%= RadDatePicker1.ClientID %>").get_dateInput();  
    if (picker.get_value().length == 0)  
    {  
        picker.get_styles().EnabledStyle[0] += "background-color: lemonchiffon;"; 
        picker.get_styles().HoveredStyle[0] += "background-color: lemonchiffon;"; 
        picker.get_styles().FocusedStyle[0] += "background-color: lemonchiffon;"; 
        picker.get_styles().InvalidStyle[0] += "background-color: lemonchiffon; border-color: #7f9db9; color:#000;"; 
        picker.updateCssClass(); 
        args.IsValid = false;  
    }  
    else  
    {  
        picker.get_styles().EnabledStyle[0] += "background-color: white;"; 
        picker.get_styles().HoveredStyle[0] += "background-color: white;"; 
        picker.get_styles().FocusedStyle[0] += "background-color: white;"; 
        picker.updateCssClass(); 
        args.IsValid = true;  
    }  
}  
function Load(sender) 
 sender.get_styles().InvalidStyle[0] += "background-color: lemonchiffon; border-color: #7f9db9; color:#000;"; 
 sender.updateCssClass(); 
}    
     
    </script> 
 
    <table> 
        <tr> 
            <td> 
                Name : 
            </td> 
            <td> 
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="A name is required" 
                    ControlToValidate="TextBox1" SetFocusOnError="true" Display="None"></asp:RequiredFieldValidator> 
                <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" Enabled="True" 
                    HighlightCssClass="validatorCalloutHighlight" TargetControlID="RequiredFieldValidator1"
                </cc1:ValidatorCalloutExtender> 
            </td> 
        </tr> 
        <tr> 
            <td> 
                Date : 
            </td> 
            <td> 
                <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Office2007"
                    <DateInput LabelCssClass="radLabelCss_Office2007" Skin="Office2007" runat="server"
                    <ClientEvents OnLoad="Load" /> 
                    </DateInput> 
                    <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" 
                        Skin="Office2007" runat="server"
                    </Calendar> 
                </telerik:RadDatePicker> 
                <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Valid date required" 
                    Display="None" ControlToValidate="RadDatePicker1" ValidateEmptyText="true" ClientValidationFunction="RadDatePicker1_Validate" /> 
                <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" Enabled="True" 
                    TargetControlID="CustomValidator1"
                </cc1:ValidatorCalloutExtender> 
            </td> 
        </tr> 
        <tr><td colspan="2"
            <asp:Button ID="Button1" runat="server" Text="Button" /></td></tr> 
    </table> 
</asp:Content> 

The RadDatePicker1_Validate function is here to make the RadDatePicker inputbox style behaves like a normal textbox (like textbox1 in my code) once button1 is fired (i.e : when the customvalidator is fired)

The Load function is here to make the RadDatePicker inputbox style behaves like a normal textbox if a invalid date is entered before you click on button1.

The css :
.validatorCalloutHighlight
{
    background-color: lemonchiffon;
   padding:2px 2px 2px 2px;
    border:1px solid #7f9db9;
}

Regards,
AB


0
Dimo
Telerik team
answered on 01 Oct 2008, 08:14 AM
Hi Arnaud,

Thank you very much for sharing your implementation with the community!

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Input
Asked by
arnaud
Top achievements
Rank 1
Answers by
Dimo
Telerik team
arnaud
Top achievements
Rank 1
Share this question
or