Configuring NuGet for Telerik's Private NuGet feed

If you are a licensed user of Telerik's products, you can configure NuGet on your system to authenticate to Telerik's private NuGet feed using the instructions provided here: http://docs.telerik.com/kendo-ui/aspnet-mvc/nuget-install

Unfortunately, since you cannot configure authentication credentials via the Visual Studio User Interface, you will have to do this through the command line.

Alternatively, you can also set up your own Private NuGet feed following the instructions provided here: http://www.telerik.com/blogs/power-your-projects-with-telerik---now-with-the-convenience-of-nuget

If you follow this option, you simply download the NuGet packages from your downloads available in your Telerik account and then upload them to your private NuGet feed in order to make them available to all of your developers.

That is all there is to making Telerik packages readily available via NuGet!

Kendo UI TabStrip with ASP.NET MVC Partial Views

If you look at the demos for the Kendo UI TabStrip, you will notice that they miss several key scenarios for addressing common issues in ASP.NET MVC Web Applications: http://demos.telerik.com/aspnet-mvc/tabstrip/index

One of the main scenarios the demos fail to address is the usage of Partial Views to render content in the TabStrip control!

Well, after going through some Kendo UI Forums, I was able to come up with this solution:

One of the things that I discovered was that I could not get the TabStrip to work with @{Html.RenderPartial("MVCView1");} and was forced to work with @Html.Partial("MVCView1"). I was not able to figure out the root cause of this discrepancy but if you have a solution to this problem, feel free to post it in the Comments section below!

Kendo UI PanelBar with ASP.NET MVC Partial Views

If you look at the demos for the Kendo UI PanelBar, you will notice that they miss several key scenarios for addressing common issues in ASP.NET MVC Web Applications:  http://demos.telerik.com/aspnet-mvc/panelbar/index

One of the main scenarios the demos fail to address is the usage of Partial Views to render content in the PanelBar control!

Well, after going through some Kendo UI Forums, I was able to come up with this solution:

One of the things that I discovered was that I could not get the PanelBar to work with @{Html.RenderPartial("MVCView1");} and was forced to work with @Html.Partial("MVCView1"). I was not able to figure out the root cause of this discrepancy but if you have a solution to this problem, feel free to post it in the Comments section below!

Server-side paging with ASP.NET Web API and Kendo UI Grids

If you need to implement a custom server-side paging solution with Kendo UI, it may not be readily obvious as to how to accomplish this!

Kendo UI has some code samples which partially addresses this scenario: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-ajax-binding/KendoGridCustomAjaxBinding

However, this example is tightly coupled to Entity Framework and does not work so well with ASP.NET Web API...

So how exactly can you adapt the Controller code sample to your own needs that work with ASP.NET Web API?

First of all, you need to make sure your Kendo Grid is setup as follows:
Notice that you have to set ServerOperation(true)

Next, you have to set up your Controller code as follows:

That is all there is to it!

Unit Testing Kendo UI

If you want to Unit Test Kendo UI, unfortunately, there is no documentation on how to accomplish this on the Telerik website.

But, thanks to Stack Overflow, you can find a handy example on Unit Testing functionality for Kendo UI: http://stackoverflow.com/questions/14667911/unit-testing-asp-net-mvc4-controller-with-kendo

However, I prefer to use MSTest as my Unit Testing framework and having a few things outlined in the Unit Test to make the Unit Test a bit clearer as follows:

Supported versions of jQuery with Telerik Kendo UI

If you are using the Kendo UI libraries, you may be wondering what versions of jQuery are supported  with these controls?

Well, the Telerik Kendo UI team has provided a handy article for you to look up the specific versions of jQuery that are supported: http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#jquery-version

Adding Bundling support for Kendo UI

If you want to add Bundling support for your ASP.NET MVC Web Application, you should take a look at this article: http://docs.telerik.com/kendo-ui/aspnet-mvc/asp-net-mvc-4#include-javascript-and-css-files

Understanding the Kendo UI Hierarchical Grid

I needed to implement a Hiearchical Grid with the Kendo UI Grids recently and when I looked at this demo (http://demos.telerik.com/aspnet-mvc/grid/hierarchy), I could not understand how to get the code sample to work for my particular scenario since the code sample seemed rather cryptic!

Well, as it turns out, the key element to understand in the Hierarchical Grid sample are these 2 pieces of the code:

.Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context

.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))

So where is this EmployeeID value ACTUALLY used??

Well, in this case, it is being used in the MVC Controller in this snippet of code:

The EmployeeID is the ACTUAL value that must be passed to the LINQ Query in order to filter the expression based on the parent record Id. If this value is ANYTHING else in the Razor View than what is being used in the LINQ Query expression, the Hierarchical Grid will not work!!

Hopefully that clarifies things a bit regarding this somewhat confusing code sample!

Debugging Kendo UI with Google Chrome

If you are developing with Telerik Kendo UI, you may want a few more tools to help you out in your development with Kendo UI.

Fortunately, the Kendo UI team has released an extension for Google Chrome to allow you to do just that!

You can download the Google Chrome Extension from here: https://chrome.google.com/webstore/detail/telerik-kendo-ui-chrome-i/npcmgpnfknjmndbbakdhchgibaajnlpe?hl=en

If you want to learn more about how to use the Kendo UI Chrome Extension, you should check out this article: http://developer.telerik.com/products/say-hello-to-the-kendo-ui-chrome-inspector/

External editing from a Kendo UI Grid

I recently had a requirement to edit records in a Kendo UI Grid from an externally available form.

There is some documentation which addresses how to accomplish this: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/grid-external-form-editing

But it does not specifically address the ASP.NET MVC Kendo UI controls...

Unfortunately, the Kendo UI Grid does not currently offer this functionality out-of-the-box even though other competitors such as DevExpress DO offer this functionality: http://demos.devexpress.com/MVCxGridViewDemos/Editing/ExternalEditForm

If you want to see the Telerik Kendo UI team also offer this functionality, then I would recommend that you vote for this Kendo UI Feedback item here: http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/15277692-external-editing-for-kendo-ui-grid

Provide feedback to the Kendo UI Team

If you want to provide feedback and suggestions to the Kendo UI team, then you can provide feedback through this UserVoice forum: http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

Adding a Search box to a Kendo UI Grid

I was recently working on implementing search functionality for the Kendo UI Grid based  on a set of JavaScript grid controls such as this: https://datatables.net/

If you look at the Search functionality implemented in these controls, you will notice that the search functionality is very nice in that it can readily search all of the columns and text in the controls just by typing some search text.

Unfortunately, the Kendo UI Grid control does not offer the same functionality out-of-the-box.  While filtering is available, it does not provide the exact same set of functionality as provided by the search text box in the Data Tables controls.

Competing companies such as DevExpress already provide this functionality out-of-the-box with their controls: http://demos.devexpress.com/MVCxGridViewDemos/Filtering/SearchPanel

However, with the Kendo UI Grid control, you have to go and roll your own solution to accomplish this by following one of the following posts:

https://telerikhelper.net/2014/10/21/how-to-external-search-box-for-kendo-ui-grid/

http://www.telerik.com/forums/grid-with-filterable-and-external-search-inptus

If you want to see a demo of this functionality, you can check it out here: http://dojo.telerik.com/idOVU

If you would like to see this feature included in an upcoming release of the Telerik Kendo UI Grid control, you can vote for this UserVoice item here: http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/8441518-grid-simple-search-panel

Kendo UI Theme Builder

If you need to style your Kendo UI controls to meet your specific needs, then you will probably want some assistance with the wide variety of CSS classes that are needed to style all of the controls in the Kendo UI suite.

Fortunately, you can use the Kendo UI Theme Builder to help you accomplish just that!  http://demos.telerik.com/kendo-ui/themebuilder/

Understanding the Telerik Kendo UI Grid ClientTemplate attribute

I was recently working on a project using Telerik Kendo UI controls when I came across this code example: http://demos.telerik.com/aspnet-mvc/grid/editing-custom

Unfortunately, the code sample left a lot gaps in understanding the code!  Particularly perplexing and confusing was the use of the ClientTemplate attribute!  What exactly did that mean and how was it to be used?

After several hours of wrestling with the code sample and reviewing the demo code installed on my machine, I was able to finally understand how the ClientTemplate worked!

1. First of all, the ClientTemplate attribute in this case refers to a binding expression.  In this instance, #=Category.CategoryName# refers to the Category field available on the ProductViewModel.cs class file.  The CategoryName field is the DataValueField on the Category field.  
2. Next up, the ClientTemplate that is chosen to be used with the Category field is designated through the UIHint attribute as follows: [UIHint("ClientCategory")].  This specifically refers to an Editor Template called ClientCategory.cshtml.
3. Then, you also have another field int? CategoryID.  This field maps to the CategoryID child field from the Category property on the ProductViewModel class.  This field is always necessary whenever you are doing databinding to a SelectList/DropDownList in ASP.NET MVC. 
4. Now in the ClientTemplate Razor View, you have this property: .BindTo((System.Collections.IEnumerable)ViewData["categories"]).  This refers to a list/collection of the Categories that are needed to display the elements in the SelectList or DropDownList.
5. Finally, to put everything together, you need to make sure you are returning or mapping back to the ProductViewModel class such that you populate BOTH the CategoryID as well as the Category property (which refers to CategoryViewModel) in order for the binding to work correctly.

There are a lot of parts to fit together in this design, but once you have all those pieces and parts working together, your Kendo UI Grid should work correctly!!

Online Kendo UI scratchpad

If you are just learning Kendo UI and want to experiment with how Kendo UI works without installing it on your local machine, fortunately Telerik has provided just such an environment for you to accomplish that!

Kendo UI Dojo
http://dojo.telerik.com/

In this browser-based environment, you can add whatever Kendo UI code you need to experiment with the various controls and run them directly through the browser!

Of course, the base code provided does not help much with getting started with any sophisticated Kendo UI control examples, so it is best to start with a slightly more complex starting point such as this one: http://dojo.telerik.com/EFABI

The above Kendo UI examples utilizes the Kendo UI Grid control and does some basic customization and styling of the Kendo UI grid that allows you to better understand how the Kendo UI grid needs to be modified for your own tweaks and customizations!

Telerik RadControls for ASP.NET AJAX vs. Telerik Kendo UI controls for ASP.NET MVC

If you have developed with both ASP.NET Web Forms and ASP.NET MVC technology, then you might be familiar with both the Telerik RadControls for ASP.NET AJAX as well as the Telerik Kendo UI controls for ASP.NET MVC.

Also, if you have worked with both of these technologies, you will also know that ASP.NET Web Forms has been a technology that has been around for the last 14+ years while the 1st release of ASP.NET MVC was released only approximately 7 years ago.  Kendo UI itself was only released in 2011!

Just to further clarify the disparity in years between these 2 products, you could use an analogy of children.  The Telerik RadControls would be a teenager in High School while the Kendo UI controls would still be a toddler in Kindergarten!!

Therefore, as you can probably already guess, the suite of controls for ASP.NET Web Forms will be far more advanced and sophisticated than the suite of controls available for ASP.NET MVC!

If you take a quick look at the Telerik RadControls Demo site, you will immediately notice the immense amount of functionality provided by the Telerik RadGrid itself: http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx

Now when you compare this functionality to the Kendo UI Grid, you will find the features and functionality available to the Kendo UI Grid comparably much, much, much smaller: http://demos.telerik.com/aspnet-mvc/grid/index

So what does that mean for developers using ASP.NET MVC and Kendo UI controls?  Ultimately, it means that you will still have to develop a TON of custom functionality on your own either through extending these existing controls or through using JavaScript frameworks such as AngularJS and jQuery.

Alternatively, if your organization is open to mixing and matching functionality in your application, you can consider adopting a One ASP.NET approach and be able to include ASP.NET MVC in your application alongside ASP.NET Web Forms.

If you are able to adopt this approach, this allows you to get the best of both worlds in being able to leverage the extremely rich functionality of the Telerik RadControls for ASP.NET AJAX in your ASP.NET Web Forms pages as well as the very lightweight Telerik Kendo UI controls in your ASP.NET MVC Views!!

Telerik Online Demos missing complete code for code samples

I frequently use the Telerik controls for my development and therefore I heavily rely on the Telerik Demo site to figure out how to accomplish a wide variety of development tasks when working with these controls.

For example, in the Kendo UI Grid Hierarchy example (http://demos.telerik.com/aspnet-mvc/grid/hierarchy), you will find code in the HierarchyController.cs file, but dependent code such as GetEmployees() or GetOrders() will not be found in the online code sample!!

So where do you go to look for that missing code?

Well, at first, I thought that I would look at the Demos that I installed locally on my machine only to be disappointed that the demo site installed locally on my machine also suffered from the same problem!

Therefore, I ended up digging into the actual Kendo UI MVC Examples folder installed locally on my file system to pull up the Visual Studio project and dig through all of the dependent code.

On my system, this was installed at the following location:

C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q2 2016\wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples

Of course, looking in the wrappers directory was not readily obvious since I expected it to be in a directory called samples or examples or something like that at the very top level of the installation!

In any case, once you know where to find all of the necessary example code to use, you can readily apply it to your own application!

Sharing Telerik Kendo UI assemblies with your development team

One of the problem with using many 3rd party products such as Kendo UI in the past was ensuring that EACH and EVERY developer had the same version of the product installed on their machines!!

If you can just imagine dealing with the administration nightmares with such a product that has multiple releases and hotfixes several times a year!!

Well, thankfully, the Telerik development team has provided a nice resolution to this problem of the past through our all-too-familiar process of NuGet!!

Yes, you heard correctly!  You can now distribute your Telerik references such as Kendo UI through pre-built NuGet packages!  Woo hoo!

All you have to do is set up your own NuGet Server on your own network by following an article such as this one: https://docs.nuget.org/create/hosting-your-own-nuget-feeds

Then, once that is complete, you can go into your Telerik account and download the appropriate NuGet packages that are available for your various products and drop them onto your NuGet server packages directory.

Then once that is complete, you will get a dialog similar to the following when you browse your NuGet server for packages:

You can get more details about setting up Telerik references on your NuGet server here: http://www.telerik.com/blogs/power-your-projects-with-telerik---now-with-the-convenience-of-nuget

Kendo UI Script references for ASP.NET MVC

I recently started working on a project using Kendo UI and I was encountering strange and unexpected behaviors when working with the Kendo UI Grid.

I was following the Kendo UI Demo application, but it provided very little insight as to how to set up a Kendo UI Razor MVC View from scratch: http://demos.telerik.com/aspnet-mvc/grid/index

As it turns out, the problems were originating from the order in which the Kendo UI scripts were being placed on the page!

This code sample for Kendo UI pointed out the problem: https://github.com/telerik/ui-for-aspnet-mvc-6-demos/blob/master/Kendo.Mvc.Examples/Views/Shared/_Layout.cshtml

As it turns out, the script file for kendo.all.min.js needed to be placed before kendo.aspnet.min.js!

That was all that was needed to fix my Kendo UI issue!!

FREE Sitefinity Developer Certification!

Telerik is currently offering the Sitefinity Developer Certification for FREE!!!

http://www.sitefinity.com/resources/training-and-certification/developer-certification

The Sitefinity Developer Certificate is FREE until August 1st, 2016, after which the exam will cost $200.

In addition, if you need to re-take the exam, you have to wait a minimum of 14 days before re-taking, so register as soon as possible!


If you have a PluralSight subscription, you can prepare for the exam using these 2 sets of videos:

http://app.pluralsight.com/courses/sitefinity-introduction

http://app.pluralsight.com/courses/sitefinity-development-introduction#intro-dev-sitefinity-m3-api

In addition, when you register for the Sitefinity exam on the Progress Education Community Portal, you also get 10 modules of training videos to review in preparation for your exam!  How cool is that??

https://wbt.progress.com/