1
votes

I am able to use Foreign Key column in a Kendo Grid. Using inline editing method, the "edit" action is working fine.

However, when adding a new record, every thing is fine on display. The foreign key column allows me to select value. But clicking the update button, the foreign key column value is null and subsequently unable to update database in my case.

Any advise how to resolve this.

1
Could you throw together a quick jsfiddle or jsin to replicate your issue? That will help us troubleshoot. Thanks! - Burke Holland

1 Answers

0
votes

I had same problem, Kendo UI isn't resolved problem yet (15/08/2014). I resolved adding a client event on grid:

@(Html.Kendo().Grid<SPDProject.Models.DTO.ProyectoDTO>()
.Name("GridProyectos")
.Columns(columns =>
{
    columns.Bound(r => r.Id).Visible(false);
    columns.Bound(r => r.Nombre).Width(150);
    columns.Bound(r => r.Alias).Width(150);
    columns.ForeignKey(r => r.IdCliente, (System.Collections.IEnumerable)ViewData["IdCliente_Data"], "Value", "Text");
    columns.ForeignKey(r => r.IdTipoProyecto, (System.Collections.IEnumerable)ViewData["IdTipoProyecto_Data"], "Value", "Text");
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
})
.DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Events(events => events.Error("error_handler"))
        .Create(create => create.Action("CreateProyecto", "Admin"))
        .Destroy(destroy => destroy.Action("DestroyProyecto", "Admin"))
        .Model(model => model.Id(r => r.Id))
        .Read(read => read.Action("ReadProyecto", "Admin"))
        .Update(update => update.Action("UpdateProyecto", "Admin")))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable(pageable => pageable.Refresh(true))
.Reorderable(reorderable => reorderable.Columns(true))
.Events(events => events.Save("onSave"))
.Resizable(resizable => resizable.Columns(true))
.Scrollable(scrollable => scrollable.Height(250))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
.Sortable(sortable => sortable.AllowUnsort(true).SortMode(GridSortMode.MultipleColumn))
.ToolBar(toolBar => toolBar.Create()))



<script type="text/javascript">
function onSave(e) {
    //set the value to the model
    e.model.set('IdCliente', $('#IdCliente').val());
    e.model.set('IdTipoProyecto', $('#IdTipoProyecto').val());
}

I hope this helps somebody.

Regards,

Mauro at DreamSys