KendoUI + WebApi + Jsonp - how to get KendoUI working with WebApi and Jsonp

2013-05-08

Most people know that the KendoUI controls are awesome and free. The thing that is missing from there demo site is how to create a Jsonp WebApi service that the controls can talk to. I tried to get it up and running and ran into an issue because my service was returning regular Json and the “Loading” icon just spun for ever.

Here’s how to get an e2e going with KendoUI TreeView and WebApi. This post very intentionally follows the code demo provided by Telerik here

Hopefully you find it useful.

Download Latest version from GitHub

Create VS Project
1. Create a new MVC project.

Add Nuget References
2. Add the following references

WebApiContrib.Formatting.Jsonp – This adds the JsonpMediaTypeFormatter class to the project.

KendoUIWeb – This adds the KendoUI controls to the project.

Register Formatter
3. Add the following line of code to the Application_Start() method of the Global.asax file

GlobalConfiguration.Configuration.Formatters.Insert(0, new JsonpMediaTypeFormatter());

Create Model

4. Add the following Employee class to the /Models folder

public class Employee
&#123;
    public int EmployeeId &#123; get; set; &#125;
    public string FullName &#123; get; set; &#125;
    public bool HasEmployees &#123; get; set; &#125;
    public int? ReportsTo &#123; get; set; &#125;
&#125;

Create Controller

5. Add the following Controller to the /Controllers folder

public class EmployeesController : ApiController
&#123;
    private readonly List<Employee> _employees = new List<Employee> 
    &#123;
        new Employee&#123; FullName = "Jon Gallant", EmployeeId = 1, HasEmployees = true, ReportsTo = null&#125;,
        new Employee&#123; FullName = "Scott Hanselman", EmployeeId = 2, HasEmployees = false, ReportsTo = 1&#125;,
        new Employee &#123;FullName = "Howard Dierking", EmployeeId = 3, HasEmployees = false, ReportsTo = 1&#125;,
        new Employee &#123;FullName = "Drew Miller", EmployeeId = 4, HasEmployees = false, ReportsTo = 1&#125;,
        new Employee &#123; FullName = "Jeff Atwood", EmployeeId = 5, HasEmployees = false, ReportsTo = 1&#125;
    &#125;;

    public IEnumerable<Employee> Get()
    &#123;
        return _employees.Where(e => !e.ReportsTo.HasValue);
    &#125;

    public IEnumerable<Employee> Get(int employeeId)
    &#123;
        return _employees.Where(e => e.ReportsTo == employeeId);
    &#125;
&#125;

Create View

6. Add the following View to the /Views/Home/Index.cshtml file.

<link href="~/Content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2013.1.319/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/2013.1.319/jquery.min.js"></script>
<script src="~/Scripts/kendo/2013.1.319/kendo.web.min.js"></script>

<div id="treeview" class="demo-section"></div>

<script>
    //var serviceRoot = "http://demos.kendoui.com/service";
    var serviceRoot = "api";

    homogeneous = new kendo.data.HierarchicalDataSource(&#123;
        transport: &#123;
            read: &#123;
                url: serviceRoot + "/Employees",
                dataType: "jsonp"
            &#125;
        &#125;,
        schema: &#123;
            model: &#123;
                id: "EmployeeId",
                hasChildren: "HasEmployees"
            &#125;
        &#125;
    &#125;);

    $("#treeview").kendoTreeView(&#123;
        dataSource: homogeneous,
        dataTextField: "FullName"
    &#125;);
</script>

Run it!

Run it and this is what you should see.

Jon

TechTutorials