Kendo MVC DropDownListFor does not bind selected value to model

Question

@(Html.Kendo().DropDownListFor(model => model.ServiceID)
  .OptionLabelTemplate("#=optionLabel#")
  .ValueTemplate("#=Code#(#=Rate#) - #=Description#")
  .Template("#=Code#(#=Rate#) - #=Description#")
  .DataTextField("Code")
  .DataValueField("ServiceID")
  .DataSource(d =>
  {
    d.Read(read =>
    {
      read.Action("GetServiceRepository", "Service").Type(HttpVerbs.Post);
    });

  })
  .Events(e => e.Change("onWorkOrderJobServiceChange"))
  .HtmlAttributes(new { required = "required" })
  .OptionLabel(new { optionLabel = Resources.Wording.SelectOne, ServiceID = 0, Rate = 0, Code = "", Description = "" })
)

I have an dropdownlist as above, and would like to bind the selected value to model's ServiceID field (which is of type int)

However, no matter which item I select, the ServiceID field is always null! It is not even of nullable type int?!

Why is the happening and how can I achieve what I am trying to?

Answer 1

Kendo DropDownList has ValuePrimitive. By default, it is false, and selected item returns Text and Value pair.

@(Html.Kendo().DropDownListFor(model => model.ServiceID)
  .ValuePrimitive(true)
  ....