for - cambie el color de fondo de RadTextbox(Telerik textbox) y RadDatePicker(Telerik DatePicker) usando jquery o Javascript

kendo ui free

Question

Estoy usando controles telerik en mi aplicación. Tengo que cambiar los colores de fondo de RadTextbox y RadDatePicker

cómo cambiar el color de fondo de RadTextbox (Telerik textbox) y RadDatePicker (Telerik DatePicker) usando jquery o Javascript?

Answer 1

Necesitaba cambiar dinámicamente la clase CSS de un RadDatePicker y encontré esta publicación.

http://www.telerik.com/community/forums/aspnet/calendar/how-to-change-css-class-in-javascript.aspx

function changeClass()
{
var pickerWrapper = $get("<%= RadDatePicker11.ClientID %>_wrapper");
pickerWrapper.className += " myClass";
} 

Creo que es mejor ya que está cambiando la clase del elemento de nivel superior de RadDatePicker en lugar de profundizar en el componente DatePicker para cambiar la clase del campo de texto.

Este es el código que terminé usando para mis propósitos.

Estoy usando WebBlue como mi estilo telerik.

function setDatePickerRequired(o, required)
{
if (required)
{
$get(o.get_id()+"_wrapper").className = "RadPicker RadPicker_WebBlue RequiredDate";
}
else
{
$get(o.get_id()+"_wrapper").className = "RadPicker RadPicker_WebBlue";
}
}

mi css

div.RadPicker_WebBlue.RequiredDate input.riTextBox
{
background-image: url(images/required-tick.gif);
background-position: right top;
background-repeat: no-repeat;
}

Rico

Answer 2

Puede especificar un "aspecto" para la mayoría de los controles de Telerik, que generalmente se derivan de una hoja de estilo predeterminada genérica, por lo que si simplemente desea volver a diseñar los controles, puede crear su propia máscara.

Si realmente quieres hacerlo sobre la marcha con JavaScript, entonces puedes hacerlo.

Tomando el ejemplo de RadCalendar / DatePicker, los nombres de las clases de CSS y a qué se refieren se pueden encontrar aquí: http://www.telerik.com/help/aspnet-ajax/calendar-css-skin-file-selectors.html .

Si desea cambiar un estilo en particular, deberá reemplazar la clase CSS por la suya o aplicar un estilo en línea que anule la hoja de estilo.

Para aplicar su propio estilo usando jQuery''s CSS , simplemente use algo como:

$(".your-telerik-css-class").css("background-color","red");

EDITAR: Este enlace lo ayudará con la estructura del control para ver a qué afectarán las clases: http://www.telerik.com/help/aspnet-ajax/calendar-understanding-skin-css-file.html

Answer 3

Estoy obteniendo una solución de la siguiente manera:

Código de página ASPX

 <asp:ButtonID="Button"runat="server" OnClientClick="click1();return false;"
Text="click"/>
<telerik:RadDatePickerID="RadDatePicker1"runat="server">
<DateInput>
</DateInput>
</telerik:RadDatePicker>
<telerik:RadTextBoxID="RadTextBox1"runat="server">
</telerik:RadTextBox>

Javascript

<script type="text/javascript">
function click1()
{
varpicker = $find("<%= RadDatePicker1.ClientID %>");
vartextbox = $find("<%= RadTextBox1.ClientID %>");
textbox.get_styles().EnabledStyle[0] += "background-color: red;";
textbox.updateCssClass();
picker.get_dateInput()._textBoxElement.style.backgroundColor = "yellow";
}
</script>

Por ese cambio el color BG del control telerik