Kendo UI Hello World for a custom module

Topics: Customizing Orchard, General
May 28, 2013 at 6:54 AM
I couldn't find anything on Kendo UI here, so I thought I'd share my Hello World for the benefit of others that come along, and for the input of others. Here's how I set it up:
  1. In my module in VS I added a Lib folder and put the Kendo.Mvc.dll in it, and added a reference. This simply gives intellisense in the razor views. {Is there a better location for this?}
  2. Added all the kendo js files to the Scripts folder, except jquery (already in Orchard)
  3. Added kendo.common.min.js, kendo.default.min.js, and the Default folder (containing gifs, pngs) to the Styles folder {I realise I could use IResourceManifestProvider, but this is simpler}
  4. The razor view:
@using Kendo.Mvc.UI
@using Orchard.UI.Resources

@{
    Script.Require("jQuery").AtHead();
    Script.Include("kendo.web.min.js").AtLocation(ResourceLocation.Head);
    Script.Include("kendo.aspnetmvc.min.js").AtLocation(ResourceLocation.Head);
    Style.Include("kendo.common.min.css").AtHead();
    Style.Include("kendo.default.min.css").AtHead();
   }

 @(Html.Kendo().ComboBox()
          .Name("fabric")
          .Filter("contains")
          .Placeholder("Click here...")
          .DataTextField("Text")
          .DataValueField("Value")
          .BindTo(new List<SelectListItem>() {
              new SelectListItem() {
                Text = "Hello", Value = "1"   
              },
              new SelectListItem() {
                Text = "Orchard", Value = "2"   
              },
              new SelectListItem() {
                Text = "CMS", Value = "3"   
              },
              new SelectListItem() {
                Text = "World!", Value = "4"   
              }
          })

          .Suggest(true)
    )
Any comments and additions are welcome!
May 28, 2013 at 1:11 PM
It's great! but it is free?
May 28, 2013 at 11:49 PM