Los controles Open Source 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

Grid-Telerik

<%= 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, un 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. En mi caso, he utilizado algunos de ellos (sobre todo el Grid y el TabStrip) y he podido realizar todas las funcionalidades que el cliente ha necesitado y han sido personalizados completamente. Con esto quiero decir que pueden ser una gran base para crear controles totalmente diferentes, estéticamente hablando, basados en ellos 🙂 (Al igual que funcionalmente, gracias al hecho de que el código fuente está a nuestro alcance ;))
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!