# Monday, 25 June 2012

Note: If you are following along at home you may have noticed that the number of the series posts has changed.  I have taken some *poetic license* and decided that the previous post introducing Kendo UI for ASP.NET MVC was actually part part 3 of the original series on Kendo UI in ASP.NET MVC as well as part 1 of a new series on Kendo UI for ASP.NET MVC.  Clear as mud, right?

To stay in line, and catch up, with the pre-Kendo UI for ASP.NET MVC series this post is going to show you how to implement the Kendo UI AutoComplete control using the HtmlHelper extension.  In case you didn’t catch the original post on implementing the AutoComplete using Kendo UI (core/non-mvc) in ASP.NET MVC, the Kendo UI AutoComplete control is a text box that has an associated list of items that when text is entered into it a suggestion list is displayed allowing the user to select an item.

To get started follow steps 1 - 6 in the previous post to prep a new solution.

Next I created a server side model: Manufacturer.cs

namespace Part2_AutoComplete.Web.Models
{
    public class Manufacturer
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

As you can see the view the model is a very simple class that contains only an Id and a Name field.

After that I created my view: Index.cshtml

@using Kendo.Mvc.UI
@model IEnumerable<Part2_AutoComplete.Web.Models.Manufacturer>
@{
    ViewBag.Title = "Kendo UI for ASP.NET MVC: Part 2 - AutoComplete";
}
 
<h2>@ViewBag.Title</h2>
 
@(Html.Kendo().AutoComplete()
    .Name("manufacturerAutoComplete")
    .DataTextField("Name")
    .BindTo(Model)
    .Suggest(true)
    .Filter(FilterType.StartsWith)
    .Placeholder("Manufacturer...")
    .DataSource(source => {
            source.Read(read =>
               {
                        read.Action("GetManufacturers", "Home");
               }).ServerFiltering(true);
    })
)

Lastly we can code our controller: HomeController.cs

namespace Part2_AutoComplete.Web.Controllers {
 
    public class HomeController : Controller {
 
        public ActionResult Index() {
            return View(new List<Manufacturer> {new Manufacturer {Id = 1, Name = "Aston Martin"}});
        }
 
        [HttpGet]
        public JsonResult GetManufacturers() {
            string searchValue = Request.Params["filter[filters][0][value]"];
            IList<Manufacturer> manufacturers = BuildManufacturersList().Where(x => x.Name.StartsWith(searchValue, StringComparison.InvariantCultureIgnoreCase)).ToList();
            return Json(manufacturers, JsonRequestBehavior.AllowGet);
        }
 
        private IEnumerable<Manufacturer> BuildManufacturersList() {
            IList<Manufacturer> manufacturers = new List<Manufacturer>();
            manufacturers.Add(new Manufacturer {Id = 1, Name = "Aston Martin"});
            manufacturers.Add(new Manufacturer {Id = 2, Name = "Audi"});
            manufacturers.Add(new Manufacturer {Id = 3, Name = "Buggati"});
            manufacturers.Add(new Manufacturer {Id = 4, Name = "BMW"});
            manufacturers.Add(new Manufacturer {Id = 5, Name = "Chevrolet"});
            manufacturers.Add(new Manufacturer {Id = 6, Name = "Ferrari"});
            manufacturers.Add(new Manufacturer {Id = 7, Name = "Ford"});
            manufacturers.Add(new Manufacturer {Id = 8, Name = "Lamborghini"});
            manufacturers.Add(new Manufacturer {Id = 9, Name = "Mazda"});
            manufacturers.Add(new Manufacturer {Id = 10, Name = "McLaren"});
            manufacturers.Add(new Manufacturer {Id = 11, Name = "Mercedes Benz"});
            manufacturers.Add(new Manufacturer {Id = 12, Name = "Porsche"});
            return manufacturers;
        }
    }
}

That’s it.  Now that we are caught up with the transition to Kendo UI for ASP.NET MVC in the next post we can move on to something fresh and new…and Kendo UI certainly has a lot to offer in that area!

The code is available on GitHub.

posted on Monday, 25 June 2012 07:37:36 (Central Daylight Time, UTC-05:00)  #    Comments [2]
# Tuesday, 19 June 2012

Back in April I started a series of posts related to using Kendo UI in ASP.NET MVC.  Last month the Kendo team released the first beta of Kendo UI for ASP.NET MVC.  So, long story short the blog posts on Kendo UI will continue but from this point forward they will move from implementing Kendo UI proper in ASP.NET MVC to using Kendo UI for ASP.NET MVC.

Kendo UI for ASP.NET MVC includes the complete Kendo UI suite (Web, Mobile, DataViz) plus a set .NET wrappers to be used with ASP.NET MVC that leverage exciting features of MVC such as data annotations, editor/display templates and validation.  Those of you still using the WebForms view engine are safe,  the wrappers work in both the Razor view engine and the WebForms view engine.

To get started download the Kendo UI for ASP.NET MVC bits and install them.  The bits include, what I would call, the Kendo UI core features plus all the ASP.NET MVC specific features so there is no need install both Kendo UI and Kendo UI for ASP.NET MVC.  If you already have Kendo UI core installed, don’t worry, the installer will adjust accordingly.

Once installed pull up the install location, for me it is “C:\Program Files (x86)\Telerik\Kendo UI for ASP.NET MVC Q2 2012 BETA”, and play around with the example projects by running “\Examples\StartExamples.exe”.

Now…let’s get it up and running in an ASP.NET MVC project.

NOTE: The Kendo UI for ASP.NET MVC documentation states that both MVC 3 and MVC 4 are supported even though the actual Kendo.MVC.dll resides in the “Mvc3” directory.

  1. Create a new ASP.NET MVC 3 or 4 project
  2. Add a reference to: [Kendo UI Directory]\Binaries\Mvc3\Kendo.Mvc.dll
  3. Copy the contents of [Kendo UI Directory]\Scripts to the Scripts folder of your MVC project
  4. Copy the contents of [Kendo UI Directory]\Content to the Content folder of your MVC project
  5. Reference the Kendo UI scripts and and CSS files in your layout page.
    *Note: If your using ASP.NET MVC 4 I suggest creating a bundler package

    <link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
  6. Add a reference to the Kendu.Mvc.UI namespace to the <namespaces> section of the web.config to allow your views to know about the Kendo HTML Helper extensions.
    <add namespace="Kendo.Mvc.UI"/>
  7. Let’s test it out.  Open up Index.cshtml and create a Kendo UI control using the new HTML Helpers.
    @(Html.Kendo().DatePicker().Name("MyTestDatePicker"))

 

image

As with the previous parts of the series the code is available on GitHub.

posted on Tuesday, 19 June 2012 11:15:53 (Central Daylight Time, UTC-05:00)  #    Comments [6]
# Monday, 21 May 2012

Continuing from my previous post Getting Started with Kendo UI in ASP.NET MVC, let’s dive in to Kendo UI’s AutoComplete control.  The Kendo UI AutoComplete control is a text box that has an associated list of items that when text is entered into it a suggestion list is displayed allowing the user to select an item.

To get started I created a blank MVC project and wired up Kendo UI per the instructions in my Getting Started post.

Next I created a server side model: Manufacturer.cs

   1: namespace Part2_AutoComplete.Web.Models {
   2:  
   3:     public class Manufacturer {
   4:         public int Id { get; set; }
   5:         public string Name { get; set; }
   6:     }
   7: }

As you can see the view the model is a very simple class that contains only an Id and a Name field.

After that I created my view: Index.cshtml

   1: @model Part2_AutoComplete.Web.Models.Manufacturer
   2: @{
   3:     ViewBag.Title = "Getting Started With KendoUI - Part 2: Auto Complete";
   4: }
   5:  
   6: <script type="text/javascript">
   7:     $(document).ready(function () {
   8:         $("#Name").kendoAutoComplete({
   9:             minLength: 1,
  10:             dataTextField: "Name",
  11:             suggest: true,
  12:             filter: "startswith",
  13:             dataSource: { serverFiltering: true,  transport: {read: {url: "/Home/GetManufacturers/",dataType: "json", type: "POST"}}}
  14:         });
  15:     });
  16: </script>
  17:  
  18: <h2>@ViewBag.Title</h2>
  19:  
  20: @using(Html.BeginForm()) {
  21:     <div id="root">
  22:         <div id="manufacturers">
  23:             @Html.HiddenFor(x => x.Id)
  24:             <label for="input" class="info">Choose a car manufacturer:</label>
  25:             @Html.TextBoxFor(m => m.Name)
  26:             <div class="hint">Start typing the name of a car manufacturer <br/>(Aston Martin, Bugatti, Ferrari, Lamborghini, Porsche) </div>
  27:         </div>
  28:     </div>
  29:     <input type="submit" value="Send Back To Server"/>
  30:     <h3>@ViewBag.Message</h3>
  31: }

Assuming you are an ASP.NET MVC developer that uses Razor, the majority of the view code above should look familiar.  The lines to focus on are 8 – 14, which are the actual implementation of the Kendo UI AutoComplete.  Let’s break down the configuration options that I am passing to kendoAutoComplete:

  • minLength:  number of characters to be entered before filtering the data
  • dataTextField: field in the data source that represents the content of the list items
  • suggest: controls if the rest of the text for the item that matches is automatically displayed in the text box
  • filter: type of filtering to apply the data (“startswith”, “contains”, etc.)
  • dataSource: data that the control is bound to, can either be a JavaScript object or a Kendo UI DataSource
    • As you can see I am using a Kendo UI DataSource that makes an AJAX call to the GetManufactures method on the Home controller.

That is the complete client side implementation of the Kendo UI AutoComplete.  More details on what configuration is available for the AutoComplete can be found here.

Lastly we can code our controller: HomeController.cs

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web.Mvc;
   5: using Part2_AutoComplete.Web.Models;
   6:  
   7: namespace Part2_AutoComplete.Web.Controllers {
   8:  
   9:     public class HomeController : Controller {
  10:  
  11:         [HttpGet]
  12:         public ActionResult Index() {
  13:             return View(new Manufacturer{Id = 1, Name = "Aston Martin"});
  14:         }
  15:  
  16:         [HttpPost]
  17:         public ActionResult Index(Manufacturer manufacturer) {
  18:             ViewBag.Message = string.Format("You selected \"{0}\" and sent it to the server!", manufacturer.Name);
  19:             return View();
  20:         }
  21:  
  22:         [HttpPost]
  23:         public JsonResult GetManufacturers() {
  24:             string searchValue = Request.Params["filter[filters][0][value]"];
  25:             IList<Manufacturer> manufacturers = BuildManufacturersList()
  26:                 .Where(x => x.Name.StartsWith(searchValue, StringComparison.InvariantCultureIgnoreCase)).ToList();
  27:             return Json(manufacturers);
  28:         }
  29:  
  30:         private IList<Manufacturer> BuildManufacturersList() {
  31:             IList<Manufacturer> manufacturers = new List<Manufacturer>();
  32:             manufacturers.Add(new Manufacturer {Id = 1, Name = "Aston Martin"});
  33:             manufacturers.Add(new Manufacturer {Id = 2, Name = "Audi"});
  34:             manufacturers.Add(new Manufacturer {Id = 3, Name = "Buggati"});
  35:             manufacturers.Add(new Manufacturer {Id = 4, Name = "BMW"});
  36:             manufacturers.Add(new Manufacturer {Id = 5, Name = "Chevrolet"});
  37:             manufacturers.Add(new Manufacturer {Id = 6, Name = "Ferrari"});
  38:             manufacturers.Add(new Manufacturer {Id = 7, Name = "Ford"});
  39:             manufacturers.Add(new Manufacturer {Id = 8, Name = "Lamborghini"});
  40:             manufacturers.Add(new Manufacturer {Id = 9, Name = "Mazda"});
  41:             manufacturers.Add(new Manufacturer {Id = 10, Name = "McLaren"});
  42:             manufacturers.Add(new Manufacturer {Id = 11, Name = "Mercedes Benz"});
  43:             manufacturers.Add(new Manufacturer {Id = 12, Name = "Porsche"});
  44:             return manufacturers;
  45:         } 
  46:     }
  47: }

The controller code is very straightforward.  Notice the GetManufacturers method that starts on line 30, it handles the AJAX request from the client and returns the JSON that is used to build the Kendo UI DataSource that drives that Kendo UI AutoComplete.

The code is available on GitHub.

If you haven’t checked out the recently released GitHub for Windows client, I highly suggest you check it out!

posted on Monday, 21 May 2012 15:18:54 (Central Daylight Time, UTC-05:00)  #    Comments [10]
# Monday, 14 May 2012

Once again I am plugging That Conference!  Why?  Because it is going to kick ass and you will not want to miss it!

In a previous post I highlighted some of the nationally recognized top-notch speakers that will be Counselors at the event.  What I didn’t mention is that I have been given the honor of presenting not one but two sessions at That Conference.  Below are the two sessions I will be doing.

Going Native with KendoUI Mobile
The number of people using their smartphones or tablets to access the web has grown to the point where having a presence on mobile devices has become a must for anyone with a website. But to be truly successful your mobile presence has to differentiate itself from the mobile web entirely and straddle that line between web and native application. In the past this meant having specific styles and often views for each specific mobile platform you wanted to target, but this is no longer necessary thanks to Kendo UI Mobile.

In this talk Keith will demonstrate how using HTML5 and Kendo UI Mobile you can write one application with a single set of styles and views that looks truly native on iOS, Android, and Blackberry. Keith will walk through creating a mobile application from start to finish including how to use PhoneGap to package and deploy your website to the major mobile application stores.

 

HTML5 – It’s Not Just for Hipsters
HTML5 is the current “Big Thing” in web technologies. HTML5 has already been crowned the “Write Once Run Everywhere” toolset, even running on the desktop. But we .NET guys seem to once again, be left behind. The lack of tooling in Visual Studio along with the fact that most .NET web developers do not consider themselves HTML developers is really causing .NET developers to already be behind the 8 ball when it comes to HTML5 development.

In this talk Keith will cover the features of HTML5 that all .NET developers should know about and be taking advantage of. He will also cover, how contrary to popular belief the tooling is there and you can start coding HTML5 in Visual Studio now. Keith will also demonstrate that HTML5 development does not require a completely new toolset, you can leverage your current skills including all your favorite .NET server technologies when doing HTML5 development.

I highly suggest you take a look at the awesome array of sessions that will be presented at That Conference in each of the 4 tracks:

On top of the Give Camp leading in to the event there are a number of other awesome events being planned.  Unfortunately these events are still in the planning phase so I can’t go in to detail but I can stress Do Not Miss That Conference!

posted on Monday, 14 May 2012 07:41:41 (Central Daylight Time, UTC-05:00)  #    Comments [0]
# Tuesday, 08 May 2012

That Conference announced the initial session line up earlier this week and in a word AWESOME! 

The official speaker line up will be announced shortly and includes the following;

For a line up like that you would expect to have to travel to one of the coast’s and spend a fortune but that is not the case.  That Conference was formed under the premise of bringing a top quality conference (speakers, content, etc.) to the upper Midwest that everyone can afford to attend.  If you are in the Midwest this is an excellent opportunity that you should not miss!  Registration opens May 16th at 8:13am CST.  You will want to get in early as this is going to be one hot ticket.

posted on Tuesday, 08 May 2012 07:47:42 (Central Daylight Time, UTC-05:00)  #    Comments [3]