I love telerik – I hate working out the correct inclusion order of javascript references. Here are some common issues I encountered with Telerik MVC (Kendo) UI .

Controls not showing up

(e.g. Html.Kendo().DropDownList() appears as a text box instead of a dropdown). To figure out the underlying issue, CTRL-SHFT-J on your browser to see the javascript errors. Chances are it will be something along the lines of ‘ kendogrid is not a function ‘ or ‘ kendo something is not a function’

To fix this, check the script library includes. They need to be in the following order:

<script src="@Url.Content("~/Scripts/kendo/2015.1.429/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2015.1.429/kendo.all.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js")"></script>

JQuery Conflicts

If you are using jquery bundles, they need to appear AFTER the kendo jquery references. E.g.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

<script src="@Url.Content("~/Scripts/kendo/2015.1.429/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2015.1.429/kendo.all.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js")"></script>

@Scripts.Render("~/bundles/jquery")

<body>

<div class="box-body">

<div class="col-lg-12">

<div class="form-group" id="experience-grid">

@(Html.Kendo().Grid(Model).Name("grid").Columns(columns =>....

</body>

</html>

Summary

These are some commonly encountered issues with Telerik’s Kendo UI for MVC. Powerful stuff, but can kill your afternoon if you are not aware of what goes where.

Anuj holds professional certifications in Google Cloud, AWS as well as certifications in Docker and App Performance Tools such as New Relic. He specializes in Cloud Security, Data Encryption and Container Technologies.

Initial Consultation

Anuj Varma – who has written posts on Anuj Varma, Hands-On Technology Architect, Clean Air Activist.

 Twitter Linkedin