Getting Started with the Telerik MVC Extensions - 2/12/2012

Back before ASP.Net MVC when all we had was WebForms it was unthinkable for practically any mid to senior level developer to not use off the shelf UI tooling such as the Telerik WebControls or Component One's suite of tools on virtually every project. However, when ASP.Net MVC rolled around it seems that the preference quietly shifted away from using off the shelf components in favor of using jQuery plug-ins which sometimes were very easy to integrate but sometimes required a great deal of effort building server code to generate the desired client to server integration.

On my last few projects, whenever possible we have opted to use the Telerik extensions rather than integrating jQuery plugins whenever possible. Based upon this experience, I must admit I am quite satisfied and impressed.

Great Documentation and Examples

While some jQuery plugins have great examples and documentation there are plenty that do not. With the Telerik Extensions the documentation is as good as I have seen for any product. The installer sets up a local website with demos and code snippets, you get a CHM reference and even the Visual Studio projects of the demos.

A Wide Selection of Ready to Use UI Themes

The standard Telerik toolkit comes with a nice selection of themes. In most cases you can all together avoid investing ANY effort at all in styling the controls and can just use one of the provided themes as is resulting in huge time savings.

Another huge bonus of the UI themes is that all of the controls are styled to match. If you were to go grab a jQuery calendar plugin, a grid plugin and a menu plugin, you would have to invest time making the UI consistent between these controls.

Awesome support(with paid license)

When we first started using the Telerik MVC Extensions we did have a few hiccups as would be expected. Since support was available we submitted a few of our issues and to my surprise I received intelligent responses that provided either a solution or a workaround for our problem within a matter of a few hours

Getting Started

Depending upon your project you may be able to just add the Telerik components using a NuGet package. However, if you wish to manually install the extensions, the steps are

  1. Download the Telerik MVC Controls from http://www.telerik.com/products/aspnet-mvc/download.aspx
  2. Run Installer(next, next, finish)
  3. Add reference to the Web Project for Telerik.Web.Mvc.dll located at (C:\Program Files (x86)\Telerik\Extensions for ASP.NET MVC Q2 2011\Binaries\Mvc3)
  4. Add reference to Telerik.Web.Mvc.UI in pages element of web.config
    
            
    
              
    
                
    
                
    
                
    
                
    
                
    
                
    
            
    
                
    
                
    
    
    
              
    
            
    
            
  5. Copy ENTIRE scripts folder to local project from C:\Program Files (x86)\Telerik\Extensions for ASP.NET MVC Q2 2011\Scripts. Keep files in the folder(ex, 2011.2.914). This prevents version conflicts
  6. Copy ENTIRE folder from C:\Program Files (x86)\Telerik\Extensions for ASP.NET MVC Q2 2011\Content\2011.2.914 to local MVC project Content Folder
  7. In MasterPage or <head> element of specific pages, add the StyleSheetRegister
    
             @Html.Raw("@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add(\"telerik.common.css\").Add(\"telerik.webblue.min.css\")))");
    
            
    This will render the CSS for the Telerik Controls
    
    @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group
    
    										.Add("telerik.common.css")
    
                                            .Add("telerik.webblue.min.css")
    
    										))
    
            
  8. In MasterPage or <head> element of specific pages, add the ScriptRegistrar...must be after any extensions that use it
    
             @(Html.Telerik().ScriptRegistrar().jQuery(false))
    
             

Running the Demos and Examples without SQL Express Installed

If you do not have SQL Express installed you will get an error about "Database .... cannot be upgraded because it is read-only or has read-only files.

  1. Copy Database from C:\Program Files (x86)\Telerik\Extensions for ASP.NET MVC Q2 2011\Examples\Telerik.Web.Mvc.Examples\App_Data to your local SQL Server Instance Data Folder
  2. Attach DB in SQL Management Studio, use a meaningful database name(ex TelerikQ2_2011)
  3. Update Web.Config for Telerik Examples at C:\Program Files (x86)\Telerik\Extensions for ASP.NET MVC Q2 2011\Examples\Telerik.Web.Mvc.Examples to point to your SQL instance database rather than the file based SQL Express connection string

Share this article


Other Blogs

Getting Started with the Telerik MVC Extensions - 2/12/2012
Codemash 2012 Recap & Pictures - 1/14/2012
Findlay Area .Net Users Group(FANUG) - Improving Software Quality with Continuous Integration, and An Introduction to FluentMigrator - 9/28/2011
MVC3 Unobtrusive Validation With MVC Contrib - 8/14/2011
Automating SSRS Report Deployment for CI - 7/10/2011