Kendo UI Snippets - 9/30/2013

Kendo UI is a very useful library, but some of the techniques are far from obvious. Here is a list of samples I found helpful.

Date Picker

@(Html.Kendo().DatePicker()
  .Name("{field-name}")
  .Min(new DateTime(1900, 1, 1))
  .Max(new DateTime(2099, 12, 31))
  .Value(Model.{field-name})
  .Format("MM/dd/yyyy")
) 

Drop Down List

@(Html.Kendo().DropDownList()
   .Name("{field-name}")
   .HtmlAttributes(new { style = "{...}" })
   .OptionLabel("Select...")
   .DataTextField("{text-to-display-field}")
   .DataValueField("{text-to-use-as-a-value-field}")
   .DataSource(source =>
   {
    source.Read(read =>
    {
       read.Action("{action}", "{controller}");
     });
   })
)

Combo Box

 @(Html.Kendo().ComboBox()
   .Name("{field-name}")
   .BindTo(new List() {
      "Select...",
      ...
     })
     .Value(Model.{field-name})
     .HtmlAttributes(new { @class = "{...}" })
 )

Numeric Text Box

@Html.Kendo().NumericTextBox()
   .Name("{field-name}")
   .Format("##,#")
   .Decimals(0)
   .Value(Model.{field-name})
   .Spinners(false)
   .HtmlAttributes(new {@class="{...}"})

How to change the error message

 $("#{field-name}").kendoValidator({
   messages: {
     date: "Dates must be: mm/dd/yyyy"
  }
});

Blog ID: 2013 09-30_Blog_2145