This is a migrated thread and some comments may be shown as answers.

DropDown on Edit in Grid

5 Answers 418 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Brendon asked on 11 Nov 2012, 02:27 AM

Trying to get a drop down to display during the edit of a foreign key column. The examples all provided appear overly complex and I am unable to get my code functioning. Furthermore, the ASPX and Razor examples do not match their HTML counterparts. The examples also use ViewData and another uses a "Template". I am unable to unwind all the different parts of the examples since they are not self-contained.

http://demos.kendoui.com/web/grid/foreignkeycolumn.html

My Code Simplified:

@(Html.Kendo().Grid<Business.EquipmentModel>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(e => e.EquipmentId);

columns.Bound(e => e.Make);

columns.Bound(e => e.Model);

columns.Bound(e => e.EquipmentTypeId);

columns.ForeignKey(e => e.EquipmentTypeId, (System.Collections.IEnumerable)Business.EquipmentTypeModel.All(), "EquipmentTypeId", "EquipmentTypeName");

columns.Bound(e => e.FacilityId);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(e => e.EquipmentId))

.Read(read => read.Action("Equipment_Read", "Facilities"))

.Create(update => update.Action("Equipment_Create", "Facilities"))

.Update(update => update.Action("Equipment_Update", "Facilities"))

.Destroy(update => update.Action("Equipment_Destroy", "Facilities"))

)

In non-edit mode, the EquipmentTypeName resolves correctly, but upon edit, the EquipmentTypeId is displayed (as an int). I need to bind a dropdown in edit mode to a model action.

5 Answers, 1 is accepted

Accepted

answered on 14 Nov 2012, 11:15 PM

So, that works for updating a record, but fails on creating a record. I'm using inline add. The dropdown appears and is selectable, but the value of EquipmentTypeId is not returned (0 is returned) with the model to the add function.

Razor

@model List<Business.EquipmentModel>

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(e => e.EquipmentId).Title("Id").Width(50);

columns.Bound(e => e.Description).Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("Details", "Equipment") + "/#=EquipmentId#'>#=Description#</a>");

columns.Bound(e => e.Make);

columns.Bound(e => e.Model);

columns.ForeignKey(e => e.EquipmentTypeId, (System.Collections.IEnumerable)Business.EquipmentTypeModel.All(), "EquipmentTypeId", "EquipmentTypeName");

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.ColumnMenu()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model =>

{

model.Id(e => e.EquipmentId);

model.Field(e => e.EquipmentId).Editable(false);

})

.Create(update => update.Action("Equipment_Create", "Equipment"))

.Update(update => update.Action("Equipment_Update", "Equipment"))

.Destroy(update => update.Action("Equipment_Destroy", "Equipment"))

)

Controller

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Equipment_Create([DataSourceRequest] DataSourceRequest request, EquipmentModel entity)

{

if (entity != null && ModelState.IsValid)

{

entity.Add();

}

return Json(new[] { entity }.ToDataSourceResult(request, ModelState));

}

Model/Business Object

public class EquipmentModel

{

public int EquipmentId { get; set; }

public string Description { get; set; }

public string Make { get; set; }

public string Model { get; set; }

public int EquipmentTypeId { get; set; }

}

Add Function

public int Add()

{

using (Entities ctx = new Entities())

{

Equipment equipment = new Equipment()

{

EquipmentId = this.EquipmentId,

Description = this.Description,

Make = this.Make,

Model = this.Model,

EquipmentTypeId = this.EquipmentTypeId

};

ctx.Equipment.AddObject(equipment);

ctx.SaveChanges();

return (this.EquipmentId = equipment.EquipmentId);

}