# Thursday, 28 March 2013

This morning I decided to try out JetBrain’s WebStorm.  I am a huge fan of ReSharper and RubyMine and have been hearing some good things about WebStorm so I thought I would give it a try.  It’s very early on in that process so I haven’t formed my opinion completely yet but I have a sour taste in my mouth after spending over an hour setting up automatic compilation of LESS in the tool.  I was unable to find any documentation on the JetBrain’s site or otherwise on how to do it, so in the hopes of saving at least one person the headache I thought it would be wise to blog it.

Step 1: Find a LESS Compiler

You need to have a less compiler that you can tell the File Watcher to run and compiles the LESS to CSS.  Fortunately I have been using LESS for awhile and have had need for the standalone compiler so I knew where to find one - https://github.com/duncansmart/less.js-windows.  You can either clone the repo or download and extract the zip.

Step 2: Setup the File Watcher in WebStorm image

  1. File –> Settings or Ctrl + Alt + S 
  2. Click on File Watchers
  3. If you have a LESS watcher listed double click it otherwise click the green “+” in the upper right and select “LESS”
  4. In the New Watcher window
    1. Check “Track only root files”
    2. In the “Program” field click the ellipsis(“…”) and select the LESS compiler you downloaded in Step 1.  If you used less.js-windows select “lessc.cmd”.
    3. In the “Arguments” filed enter $FileName$ $FileNameWithoutExtension$.css
    4. Uncheck “Create output file from stdout”
    5. Click “OK”…twice

Step 3: Watch it Work

  1. Add a new file…give it the “.less” extension.
  2. Add a style to the new file and you’ll see the corresponding .css file created under the .less file.

 

Hopefully this helps you out and if I missed something and this process could have been easier let me know.

posted on Thursday, 28 March 2013 07:16:09 (Central Standard Time, UTC-06:00)  #    Comments [1]
# 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 [5]