Grid with drop down not working

[thomas]

I created a grid with a dropdown.  The drop down has an Id and a Name.  The name is what the user should see and the Id is what the system will use.

 

When using inline editing, the drop down appears ok, but when selecting the item, the data doesn't go back to the service and when in display mode nothing is shown.

 

It wont let me attach an example:

 

here is the code

  public class ReferenceData
    {
        /// <summary>
        /// Gets or sets the identifier of the model.
        /// </summary>
        /// <value>
        /// The identifier of the model.
        /// </value>
        public int Id { get; set; }

        /// <summary>
        /// Gets or sets the name.
        /// </summary>
        /// <value>
        /// The name.
        /// </value>
        public string Name { get; set; }
    }

public class GridRowViewModel
    {
        /// <summary>
        /// Gets or sets the identifier of the model.
        /// </summary>
        /// <value>
        /// The identifier of the model.
        /// </value>
        public int Id { get; set; }

        /// <summary>
        /// Gets or sets when the career gap started.
        /// </summary>
        /// <value>
        /// the start of the career gap
        /// </value>
        public DateTime From { get; set; }

        /// <summary>
        /// Gets or sets a value indicating whether [qualifying service].
        /// </summary>
        /// <value>
        ///   <c>true</c> if [qualifying service]; otherwise, <c>false</c>.
        /// </value>
        public bool Flag { get; set; }

        /// <summary>
        /// Gets or sets the reason.
        /// </summary>
        /// <value>
        /// The reason.
        /// </value>
        public ReferenceData ReferenceData { get; set; }

        /// <summary>
        /// Gets or sets the reason identifier.
        /// </summary>
        /// <value>
        /// The reason identifier.
        /// </value>
        public int ReferenceDataId { get; set; }

        /// <summary>
        /// Gets or sets when the career gap ended
        /// </summary>
        /// <value>
        /// The end of the career gap
        /// </value>
        public DateTime To { get; set; }
    }

public class IndexViewModel
    {
        public IList<ReferenceData> ReferenceDataList { get; set; }
    }



















----------------------------

HOMECONTROLLER.CS
public class HomeController : Controller
    {
        public IActionResult Index()
        {
            IndexViewModel viewModel = new IndexViewModel();
            viewModel.ReferenceDataList = new List<ReferenceData>();
            viewModel.ReferenceDataList.Add(new ReferenceData() {Id = 1, Name = "Item 1" });
            viewModel.ReferenceDataList.Add(new ReferenceData() { Id = 1, Name = "Item 1" });
            return View(viewModel);
        }

        [HttpPost]
        public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, GridRowViewModel careerGap)
        {
            var results = new List<GridRowViewModel>();

            if (careerGap != null && this.ModelState.IsValid)
            {
                    results.Add(careerGap);
                
            }

            return this.Json(results.ToDataSourceResult(request, this.ModelState));
        }

      
    }
---------------------------------------
INDEX.CSHTML

@(Html.Kendo().Grid<GridRowViewModel>().Name("testGrid").Columns(columns =>
      {
          columns.Bound(model => model.From);
          columns.Bound(model => model.To);
          columns.Bound(model => model.Flag);
          columns.ForeignKey(model => model.ReferenceDataId, Model.ReferenceDataList, "Id", "Name").EditorTemplateName("_GridDropDown");//.ClientTemplate("#=Reason.Name#");
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

      })
      .ToolBar(toolbar => toolbar.Create())
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(20)
                                    .ServerOperation(false)
                                    .Model(model => model.Id(p => p.Id))
                                    .Create(update => update.Action("Editing_Create", "Home"))
      ))

------------------------------------
_GRIDDROPDOWN.CSHTML
@using Kendo.Mvc.UI
@model object

@(Html.Kendo().DropDownList()
      .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
      .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
      .HtmlAttributes(new { style = "width: 100%" })
      )

 

Cheers,

Thomas

[Georgi]

Hello Thomas,

Thanks for the provided code.

I have investigated it and noticed that the DataValueField and DataTextField are not specified. It is necessary to specify the fields of the data item that provide the value and of the widget and the displayed text when the drop down is bound to an object.

e.g.

@(Html.Kendo().DropDownList()
      .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
      .DataValueField("Id")
      .DataTextField("Name")
      .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
      .HtmlAttributes(new { style = "width: 100%" })
      )

Furthermore, the described behavior might occur in case the name of the widget does not match the name of the property that it edits.

e.g.

.Name(ViewData.TemplateInfo.GetFullHtmlFieldName("")) // the name should be `ReferenceDataId`

Have in mind tha when a Foreign Key column is used a drop down editor is created out of the box and it is not necessary to create one manually.


Regards,
Georgi
Progress Telerik