Los controles de Telerik para ASP.NET MVC

Si bien es cierto que ASP.NET MVC te da mayor control sobre la vista que genera, puede resultar un retraso en nuestro proyecto el intentar generar controles algo más elaborados si no disponemos de unos conocimientos previos como diseñadores.

Para evitarnos esta búsqueda y aprendizaje, os propongo el uso de los controles de Telerik para ASP.NET MVC. Existen dos tipos de licencia: Una Open Source que está diseñada para el público en general, en la que podemos visualizar y modificar el código de los controles y, por otro lado, existe una licencia comercial para recibir más beneficios y soporte. En este post me centro en la versión Open Source.

Para crear estos controles, disponemos de una serie de Helpers:

  • Grid

    <%= Html.Telerik().Grid(Model)
            .Name("Grid")       
            .Pageable()
    %>
  • PanelBar

    <%= Html.Telerik().PanelBar()
           .Name("PanelBar")
           .Items(items =>
           {
               items.Add().Text("Item 1");
               items.Add().Text("Item 2");
           })
    %>
  • Calendar

    <%= Html.Telerik().Calendar()
           .Name("Calendar")
    %>
  • DatePicker

    <%= Html.Telerik().DatePicker()
            .Name("DatePicker")
    %>
  • Menu 

    <%= Html.Telerik().Menu()
            .Name("Menu")
            .Items(items =>
            {
                items.Add().Text("Item 1");
                items.Add().Text("Item 2");
            })
    %>
  • Numeric Textbox 

    <%= Html.Telerik().NumberTextBox()
                      .Name("NumberTextBox")
                      .Value(12.10)
    %>
  • TabStrip

    <%
         Html.Telerik().TabStrip()
             .Name("TabStrip")
             .Items(items =>
             {
                 items.Add().Text("Item 1")
                      .Content(()=>
                      {%>
                          <p>Content</p>
                      <%});
                 items.Add().Text("Item 2");
             })
             .Render();
     %>
  • TreeView

    <%= Html.Telerik().TreeView()
            .Name("TreeView")
            .Items(items =>
            {           items.Add().Text("Item 1");
                        items.Add().Text("Item 2");
             })
    %>

Todos los controles que requieran una carga de datos, tales como menús o el grid, podemos realizar el bindeo a través de Ajax, del objeto Model del cual hereda nuestra vista, a través de un web service, utilizando el ViewData, utilizando SiteMap o bien personalizar la información de una forma más manual.
Cada uno de ellos dispone de una serie de funcionalidades diferentes. En el caso del Grid podemos paginar, filtrar, agrupar, etcétera de una forma bastante sencilla y clara.

Para utilizarlos, solamente debemos registrarnos en la página y posteriormente bajar el ejecutable. Tiene una documentación lo bastante clara y organizada para no tener problemas a la hora de querer usar cualquiera de los controles. Por otro lado comentar que disponen de una comunidad muy activa que conviene visitar.
Espero que sirvan de utilidad y ayuden a ganar tiempo 😉

¡Saludos!

 

13 comentarios en “Los controles de Telerik para ASP.NET MVC”

  1. Muy buen artículo, ya hacia tiempo que no me interesaba por los controles telerik, se ve bastante bien que tengan opcion para ASP.Net MVC

  2. Un detalle, no soportan multi-idioma. Por ejemplo los filtros automáticos del grid (y algún texto) están hardcoded.

    Se puede hacer un hack basado en localizar los ficheros javascript pero símplemente tenedlo en cuenta!!!

  3. Gracias por vuestros comentarios 🙂

    @Pablo, estuve revisando la doc de Telerik, y veo que al menos en el Grid está disponible la localización: (Aunque no lo he llegado a comprobar)

    To localize the grid you must perform the following steps:

    You need to create folder named “App_GlobalResources”, where localization files will be copied:

    Check the App_GlobalResources folder within the installation location of Telerik Extensions for ASP.NET MVC where you can find localization files for English, German, French or Bulgarian.

    ¡Saludos!

  4. Hola Gisela, me encanto tu blog, a favoritos !!

    Un consulta, la grilla puede mostrar un combo?
    Otra cosa, la grilla se le puede cambiar el estilo, para que tenga un formato mas tipo simple, por ejemplo sin color ni imagenes de fondo??
    Gracias y saludo.

  5. Hola Gisela,

    como estas? una nueva consulta y muchas gracias desde ya por la orientacion… Lei los controles telerik y observe los controles grid siendo una lista de datos de tabla. Conoces si estos controles se puede customizar para mostrar una lista de productos con sus imagenes, texto, precios, etc tal como seria en una aplicacion estandar de comercio electronico cuando lista una categoria?.

    muchas gracias, excelente el blog!.
    sebastian

  6. Muchas gracias por vuestros comentarios 🙂

    @Cristian si, es posible mostrar un combo añadiendo uno de los campos como tipo template. Por ejemplo:

    columns.Template(o =>{
                             %>
                               <%=Html.DropDownList("Combo") %>            
                             <%                               
    });

    Por otro lado, existen una serie de css donde puedes modificar el estilo. Incluso en la página de Telerik tienen algunos disponibles desde lo más simple.

    ¡Lamento la espera! No me di cuenta de tu comentario en el correo 🙁

    @Sebastian es posible hacer lo que comentas 🙂 En realidad estos controles son bastante customizables y puedes modificar la mayor parte de su comportamiento y estilo.

    ¡Saludos!

  7. Hola, tengo un problema con los controles de telerik, el scrolling e IE7. Si tenemos los controles dentro de una capa con la propiedad css scrolling:overflow, los controles no se mueven según más manejando el scroll, pero sí las demás capas que no forman parte de los controles de telerik (cómo es lógico). Con IE8 no hay este problema ¿sabrías darnos alguna pista de como solucionarlo? Muchas gracias y un saludo. Raquel

  8. disculpen apenas ando en el mundo de telerik, y quisiera preguntarles si alguien tiene un manual en español donde explique los controles telerik. porfavor me urge gracias.

  9. Hola Andrea,

    No hay problema ninguno ^^. Creo que no hay actualmente manuales en español sobre los controles de Telerik 🙁 Pero si nos explicas lo que necesitas igual algun@ podemos ayudarte 🙂

    ¡Saludos!

  10. Buenos días a todos, a ver si me pudieseis ayudar…
    Tengo el siguiente codigo y necesito que una de las columnas, venga dada a traves de una consulta a un método, con el código como esta puesto se me muestran todos los titulos de peliculas seguidos y luego el grid con las columnas pertinentes, ¿como hago para meter los datos dentro de la columna? Alguna ayuda?


    pelisvistas

    < %: ViewData["Message"] %>
    < % Html.Telerik().Grid(Model) .Filterable() .Name("video") .Pageable(settings => settings.PageSize(20))
    .Sortable()
    .Columns(columns =>
    {
    columns.Bound(o => o.id_peli).Title(“ID”);
    columns.Bound(o => o.estado).Title(“Estado”);
    columns.Bound(o => o.descrip).Title(“descripcion”);
    columns.Command(o =>
    {%>
    < % foreach (var lib in this.Model) {%>
    < %= intrahelper.labelpeli("id_peli", (int)lib.id_peli) %>
    < %} %>

    < %}).Title("pelicula"); columns.Template(o =>
    {%>

    < %: Html.ActionLink("Más", "Details", new { @id = o.id_pfc })%>
    < %: Html.ActionLink("Modificar", "Pledit", new { @id = o.id_pfc })%>
    < % }); }) .Render(); %>

    Muchas Gracias!!

  11. Hola Ana,

    Creo que no es posible llamar a un método para generar una columna, pero si es posible llamar a una propiedad. En ese caso tendrías que utilizar esto último para poder devolver los datos necesarios para ese campo.

    Perdona por el retraso 🙁

    ¡Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *