how to pass the ID of the kendo Ui dropdown select

Question

I am trying to create an application where i am using KENDO UI Dropdown. The Problem is i want to update the values from my view into the database . On selection of the any value in the dropdown the ID associated with it should be passed onto the controller for the required database updation. But here the ID for any selection of the dropdown list passes "null" as the value onto the controller .

My view

@using Kendo.Mvc.UI
@model ExamplekendoDropdown.Models.FacilityGroup

@{
    ViewBag.Title = "FacilityGroup";
}

<h2>FacilityGroup</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>FacilityGroup</legend>

        <div id="RegionName"  class="editor-label">
            @Html.LabelFor(model => model.RegionId)
        </div>
        <div class="editor-field">
           @* @Html.EditorFor(model => model.RegionName)*@
           @(Html.Kendo().DropDownList()
          .Name("Region")
          .DataTextField("RegionName")
          .DataValueField("RegionId")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetRegion", "Fill");
              });

          })
    )
            @Html.ValidationMessageFor(model => model.RegionId)
        </div>
     <div id="Rest">
@*<form method="post" action='@Url.Action("Submit")' style="width:45%">
    <div>
        @(Html.Kendo().Upload()
            .Name("files")
        )
        <p>
            <input type="submit" value="Submit" class="k-button" />
        </p>
    </div>
</form>*@

        <div class="editor-label">
            @Html.LabelFor(model => model.FaclityGroupName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FaclityGroupName)
            @Html.ValidationMessageFor(model => model.FaclityGroupName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.status)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.status)
            @Html.ValidationMessageFor(model => model.status)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CreationDate)
        </div>
        <div class="editor-field">
          @*  @Html.EditorFor(model => model.CreationDate)*@
          @(Html.Kendo().DatePicker()
              .Name("datepicker")
              .Value("17/08/2011")
              .HtmlAttributes(new { style = "width:150px" })
        )
            @Html.ValidationMessageFor(model => model.CreationDate)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
        </div>

    </fieldset>
}
        <div>
        @Html.ActionLink("See the List", "List")
        </div>
<div>
    @Html.ActionLink("Back to List", "About")
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $("#RegionName").click(function () {
            $("#Rest").show();
        });
    });
</script>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Controller :-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ExamplekendoDropdown.Models;

namespace ExamplekendoDropdown.Controllers
{
    public class FacilityGroupController : Controller
    {
        //
        // GET: /FacilityGroup/

        public ActionResult FacilityGroup()
        {
            return View();
        }
        [HttpPost]
        public ActionResult FacilityGroup(FacilityGroup objadd)
        {
            AMIEntities1 obj1 = new AMIEntities1();
            Facility objtbl = new Facility();

                objtbl.RegionId = Convert.ToInt16(objadd.RegionId);
                objtbl.FaclityGroupName = objadd.FaclityGroupName.ToString();
                objtbl.Status = objadd.status;
                objtbl.CreationDate = objadd.CreationDate;

                obj1.AddToFacilities(objtbl);
                obj1.SaveChanges();
                obj1.AcceptAllChanges();


            return View();
        }
    }
}

Kindly help !!

Answer 1

I would first rename the dropdown Name to "RegionId", as proposed in the answer by Nick Pearce.

Then, you may need to add something like this to the dropdown:

.Events(events =>
{
    events.Save("dropdown_Save");
})

Then this JavaScript function:

<script type="text/Javascript">
    function dropdown_Save(e) {
        var regionId = $("#RegionId").data().kendoDropDownList.value();
        e.model.set("RegionId", regionId);
    }
</script>

Doing this worked for me with creating a new row in a Kendo grid. There is apparently a known Kendo bug with dropdowns when not changing their value, if they are for nullable values, as I understand it. See just above the "You are done" at this site: http://www.sitereq.com/post/kendo-mvc-dropdown-lists-inside-inline-kendo-mvc-grids

Answer 2

There are two ways to get the value:

Way1 : Add .Value( model => model.FieldName) in the kendo dropdown, the value will bind automatically.

Way2 : Go to the Controller:

public ActionResult Create(FromCollection collection)
{
    var id = collection["ComboName"]; // Here you can get the selected value

    return View();
}

Answer 3

I would suggest that you use DropDownListFor() and then also make sure that the .Name matches the name of the property. In your case:

 @(Html.Kendo().DropDownListFor(model => model.RegionId)
      .Name("RegionId")
      .DataTextField("RegionName")
      .DataValueField("RegionId")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetRegion", "Fill");
          });
      })
  )

Answer 4

Good evening,

There may be a problem with the type of variable you are populating (from here on, referred to as the backing variable) using your drop down list.

I have encountered your problem before, and the issue was that my backing variable was a nullable int (e.g. int?). When you have a property of data-type "int?" as your backing variable, the value will always come in null to the HttpPost controller action method - less you do one thing: assign the property a value before passing it to the view. For example, my IDs usually start with 1 and increase, so I typically assign nullable backing variables to 0 before sending it to the view. This way, when the page is submitted, the model contains the selected value of the drop down list, and not null, or 0 for that matter.

It seems as though Kendo drop downs will submit a null value if the property is null when it comes to the view.

I just noticed you are not using "DropDownListFor" as the above poster recommends.. so I don't think this will be much help to you, unfortunately.

Answer 5

I had the same issue and I couldn't move to DropDownListFor because I'm using a ViewModel. To grab the selected value you're going to have to dip into the ModelState. So your code would look something like this:

[HttpPost]
    public ActionResult FacilityGroup(FacilityGroup objadd, string Region)
    {
        AMIEntities1 obj1 = new AMIEntities1();
        Facility objtbl = new Facility();

            objtbl.RegionId = int.Parse(Region);
            objtbl.FaclityGroupName = objadd.FaclityGroupName.ToString();
            objtbl.Status = objadd.status;
            objtbl.CreationDate = objadd.CreationDate;

            obj1.AddToFacilities(objtbl);
            obj1.SaveChanges();
            obj1.AcceptAllChanges();


        return View();

Since during HttpPost the view sends the complete form back to the controller, and since Html.Kendo().DropDownList renders as an input, the string "YourControlName" value will be the selected value from the drop down list.

I realize this question is over 8 months old, but I'm hoping this will help someone like me who couldn't find an answer to this anywhere.