Binding a KendoUI ComboBox to a remote datasource

In .NET land, you can use WCF or Web API for making a web service. I went with WCF because it was “what I ‘knew’ but I will be experimenting with Web API just to become more knowledgeable. The biggest pain in the butt with WCF is figuring out the right items to put into the web.config file! It didn’t help matters that I wanted a REST-like setup which isn’t how WCF is set up to do out of the box. After a lot of trial and error, I got it working. Here’s how.

The Web Service Setup:

  • Add a WCF Service Application to your Visual Studio solution. My Visual Studio solution contains 3 projects: main .NET app, one project for unit testing, and the 3rd was the service application.
    • Add all necessary references to this new project. In my case, I had to add my .NET app’s DLL as a reference since I was making use of classes referenced there.
    • I also had to re-add System.Data.Entity to this new project but YMMV. Read the error output when you compile the new project and act accordingly.
    • If you added a WCF Service Library instead of a WCF Service application, you *might* need to change the project’s properties to make sure the target framework is set to (in my case) .NET 4.0 instead of the default .NET Client Profile.
  • If you want to be able to invoke your URLs via the browser (HTTP), you’ll have to make some changes to your interface & implementing class.
    • Add [WebGet] or [WebInvoke] decorations to your service implementation. I went with [WebInvoke] for flexibility.
    • Implement your interface and add the [WebInvoke] property as well but specify some additional attributes. Here’s what mine looked like: [WebInvoke(UrlTemplate = “Users/{id}”, Method=”Get”,ResponseFormat=WebMessageFormat.Json,BodyStyle = WebMessageBody.Bare)]
      • UriTemplate – allows you to specify the URL to invoke your method! So, I could do something like http://serviceUrl/Users/1. Make sure that the value inside the curly braces matches the parameter name exactly.
      • Method – I went with GET since I was primarily just retrieving data FROM the service. You can specify other types there e.g. “POST”, etc.
      • ResponseFormat – I went with JSON for flexibility. The only other option is XML.
      • BodyStyle – I went with bare becayse I wanted the returned data to be returned as-is.
    • Please note if you are expecting to pass parameters to your methods which will be invoked via HTTP, you will need to make those parameters of the string type. If you don’t, you’ll get an exception message. If you get this message,it’s actually a good sign that you’re on the right path! It was for me, anyway. 🙂
    • Open up your WCF Service Application’s web.config file and make the following changes
      • Create an <endpointBehaviors> tag like this: <endpointBehaviors><behavior name=”blah”><webHttp/></endpointBehaviors>and stick that into the <system.serviceModel> tag.
      • Inside the <system.serviceModel> tag, create a <services> tag like this: <services></services>
      • Inside the <services> tag, create a <service> tag like this: <service name=”NameSpace.ImplementingClassName” behaviorConfiguration=”MyServiceBehavior”></service> where ImplementingClassName means exactly that: the name of the class that implements your interface.
      • Inside the <service> tag, create an <endpoint> tag like this:<endpoint address=”” binding=”webHttpBinding” behaviorConfiguration=”blah” contract=”NameSpace.InterfaceName” /> where InterfaceName means exactly that: the name of the interface.
      • Make sure the <endpoint> behaviorConfiguration value matches the behavior name value put into the <endpointBehaviors> tag.
      • Inside the <serviceBehaviors> tag, add a “name” attribute to the <behavior> tag and make sure the value matches the behaviorConfiguration value specified in the <service> tag.
      • If you’re connecting to some DB, don’t forget to add your connection string inside the <configuration> tag.
      • At this point, you probably want to launch the service to give it a whirl. You should open up the service in a browser and be able to invoke your methods following the UriTemplate you specified.
    • I really hope my word salad makes sense. I will attempt to put up the web.config file so you can see what it looks like. Of course, you’re free to tell me how much I suck as writing tutorials as well. This is really more of a loosey goosey guide for my benefit mostly. 🙂

If you’ve come this far, you have a working service which you should test out by doing something like this: http://localhost:YYY/MyService.svc/Users/1 and since you specified the output of that method to be JSON, you should get a valid json response. You can verify the validity by pasting the output into JSONlint.com. Note that IE will try to download a file since it can’t display it. Use Firefox or Chrome to see the output directly in the browser.

The KendoUI ComboBox Setup:

Once I confirmed my web service was returning the correct data,I felt confident moving to this part of the problem. I’ve been used to working with the MVC wrappers for KendoUI widgets so there was a bit of a learning curve switching to the HTML/JS version. After much trial and error, I figured out the exact incantation which allowed me to use my remote datasource.

So, if you have a KendoUI combobox that needs a remote datasource and your remote datasource returns JSON, then your datasSource declaration should like similar to this:

dataSource: {
    type:"jsonp",
    transport:{
        read:{
            url: "http://serviceUrl/Service.svc/Users/All"
        }
    },
    error:function(e){
        console.log(e)
    }
}

Hope this helps someone.

Advertisements