I've been trying to add a dropdown list to a grid cell for a while now and I can get the dropdown to appear but whenever it changes it doesn't seem to actually save the value. When I choose a item the save event does end up firing but tabbing off of the field nothing has changed and the put doesn't get hit. the other fields with just regular text boxes seem to work just fine.
Grid Code:
@(Html.Kendo().Grid<FieldTimeEntry.Web.Repos.Testing.DtsCrewDetLabor>()
.Name("dtsLaborGrid")
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Columns(columns =>
{
columns.Command(command => command.Destroy()).Width(100);
columns.Bound(p => p.EmpName);
columns.Bound(p => p.EmpNo);
columns.Bound(p => p.EmpBillCode);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.Events(e =>
{
e.Save("onSave");
e.DataBound("onDataBound");
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.AutoSync(true)
.Model(m =>
{
m.Field(f => f.GfEmpNo).DefaultValue(Model.GfEmpNo);
m.Field(f => f.CrewCode).DefaultValue(Model.CrewCode);
m.Id(p => p.SeqNo);
m.Field(f => f.EmpNo);
})
.Create(create =>
{
create.Action("Create", "CrewsApi");
create.Type(HttpVerbs.Post);
})
.Read(read =>
{
read.Action("Get", "CrewsAPI", new { id = Model.CrewCode });
read.Type(HttpVerbs.Get);
})
.Update(update =>
{
update.Action("Put", "CrewsAPI");
update.Type(HttpVerbs.Put);
})
.Destroy(destroy =>
{
destroy.Action("Delete", "CrewsAPI");
destroy.Type(HttpVerbs.Delete);
})
))
Editor Template:
@(Html.Kendo().DropDownList()
.Name("EmployeeId")
.DataTextField("NameAlpha")
.DataValueField("EmployeeId")
.DataTextField("NameAlpha")
.DataValueField("EmployeeId")
.Filter("contains")
.OptionLabel("Select Employee")
.AutoWidth(true)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetEmployeesFiltered", "ReferenceData");
})
.ServerFiltering(true);
})
.Animation(a =>
{
a.Open(e =>
{
e.Fade(FadeDirection.In);
});
}))
JS Events:
var lastEditIndex;
function onSave(e) {
lastEditIndex.row = this.tbody.children().index(e.container.parent());
lastEditIndex.col = e.container.parent().children().index(e.container);
}
function onDataBound(e) {
var grid = this;
if (!$.isEmptyObject(lastEditIndex)) {
var cell = grid.tbody.children().eq(lastEditIndex.row).children().eq(lastEditIndex.col);
grid.current(cell);
grid.table.focus();
}
lastEditIndex = {};
}
1 Answer, 1 is accepted
I have investigated the provided configuration and noticed few things. Firstly the name of the editor is EmployeeId but there is no column in the grid which is bound to a EmployeeId field. The name of the field and the name of the editor should match as the data-bind attribute of the editor depends on its name. Furthermore I noticed the DataTextField and DataValueField are specified twice in the configuration of the editor.
I would recommend you to take a look at the following article which explains how to create a custom drop down editor step by step:
Furthermore, in the link below you will find a working sample which uses drop down editors:
Regards,
Georgi
Progress Telerik