Friday, August 28, 2009

Creando skins personalizados para controles Telerik

 

Anteriormente en nuestras aplicaciones utilizabamos GridViews enchulados con nuestras propias hojas de estilos, pero ahora que integramos el RadGrid de Telerik en nuestra aplicación, nos dimos cuenta que no respetaba los estilos, y que la presentación o el estilo de los mismos se basaba en skins predeterminados. Intenté quitar la propiedad Skin de RadGrid pero siempre tomaba un skin por default =(

En la página de Telerik viene una explicación de cómo puedes modificar los skins, y tambien la descripción de las clases de los estilos que afectan a cada uno de los elementos gráficos del control, las clases tienen el sufijo con el nombre del Skin, por ejemplo “_Vista”, y estos pueden ser reemplazados con tus propias hojas de estilo. Pero uno de las complicaciones es que la mayoria de los controles de telerik se componen de varios controles, por lo que no siempre se obtiene el resultado esperado =(

Para solucionar este problema lo que hicimos fue poner la propiedad Skin vacía, es decir Skin=””. Con esto, nuestro RadGrid no toma ningún skin predeterminado y el render, toma los estilos de las CSS que tengas en tu proyecto =)

Finalmente, aquí les dejo una liga donde ustedes pueden hacer su propio Skin, descargarlo y luego integrarlo a su solución. Esta herramienta te crea todas las clases necesarias y puedes ir viendo en tiempo real la vista previa del estilo.

http://stylebuilder.telerik.com/

Y en esta otra liga viene un pequeño tutorial de como hacerlo =)

http://tv.telerik.com/aspnet/visualstylebuilder/creating-custom-radgrid-skin-with-vsb

Bë GööD!!!

Wednesday, June 03, 2009

RadDatePicker on ModalPopUp Extender

Hace algunos meses adquirimos la licencia de los RadControls para ASP.NET Ajax de Telerik. La verdad estan muy monos y no es por nada pero nos han “chuleado” mucho nuestras aplicaciones. Sin embargo, hemos tenido algunos detalles con la implementación de los controles, sobre todo al querer integrar la funcionalidad que habiamos manejado anteriormente con el AJAX Control Toolkit. En esta ocasión necesitabamos integrar un control super chido que es el RadDatePicker de Telerik, es un selector de fechas el cual almacena en la propiedad SelectedDate (que es nullable) la fecha seleccionada y tiene integrada toda la validación de fechas.


El issue que tuvimos con este control fue que necesitabamos colocarlo en la famosa ventanita emergente o ModalPopupExtender de AJAX Control Toolkit (my favorite ñ.ñ) peroooooo… no funcionó porque al dar clik en la imagen para expandir el calendario éste se mostraba detras del DIV, traté de poner en un div el RadDatePicker y cambiarle el z-index y tampoco =(

Afortunadamente en uno de los foros de Telerik me encontré la solución y realmente mi intento de solución no estaba tan mal, el problema si se debía al Z-Index pero del control. Y para esto debemos de incluir en nuestra página el siguiente script (ya sea en el header o si usan master pages incluirlo dentro del ContentPlaceHolder) y liiiistooo el control se muestra correctamente:



Bë GoöoD!!

Iris ;)