Kendo UI Grid with Foreign Key Column Displaying Blank After Creation

Question

Hi I have a grid with a kendo foreign key column and editing in popup mode. When I insert a new record and pulse sort or filter the foreign key columan shows blank until I press f5 on the browser

GRID

@(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view
             .Name("Usuarios")
             .AutoBind(true)             
             .Columns(columns =>
             {
                 columns.Bound(p => p.Id).Visible(false);
                 columns.Bound(p => p.Nombre).Width(300);
                 columns.Bound(p => p.Apellido1).Width(300);
                 columns.Bound(p => p.Apellido2).Width(300);
                 columns.Bound(p => p.Codusuario).Width(300);
                 columns.Bound(p => p.Fechacambiopassword).Width(300);
                 columns.Bound(p => p.Idperfil).Width(300);
                 columns.ForeignKey(p => p.Idperfil, (System.Collections.IEnumerable)ViewBag.Perfiles, "Id", "Descripcion").Width(300).EditorTemplateName("PerfilesDropDownList");
                 columns.Command(command => { command.Edit(); command.Custom("Eliminar").Click("grid_remove"); }).Width(200);
             })
             .ToolBar(commands => commands.Create())
            .Sortable(s => s.SortMode(GridSortMode.SingleColumn))
            .Filterable()
            .Pageable()
            .Scrollable(scroll => scroll.Height("auto"))          
            .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false).TemplateName("UsuariosEdicion").Window(w => w.Title("Editar Usuario").Width(700)))
            .DataSource(dataSource => dataSource
                       .Ajax()                
                        .Sort(sort => sort.Add("Apellido1").Ascending())
                       .Model(model => model.Id(p => p.Id))
                        .Create(create => create.Action("InsertarUsuario", "Account"))
                        .Read(read => read.Action("ObtenerUsuarios", "Account").Data("getAdditionalData"))
                       .Update(update => update.Action("ModificarUsuario", "Account"))
                       .Destroy(destroy => destroy.Action("EliminarPerfil", "Account"))
                       .Events(e => e.RequestStart("grid_mostrarspinner").RequestEnd("grid_ocultarspinner").Error("error"))
                       .PageSize(5)
                   )
                   .Events(e => e.Remove("grid_remove").Edit("editar"))

   )

Controller

public async Task<JsonResult> InsertarUsuario([DataSourceRequest] DataSourceRequest request, Usuarios usuario)
        {
            if (ModelState.IsValid)
            {
                Error error = await ServicioSeguridad.Current.InsertarUsuarioAsync(usuario);
            }
            return Json(new[] { usuario }.ToDataSourceResult(request, this.ModelState));
        }

Editor Template

@using Ibermatica.Info33Plus.Modelos;

@model Usuarios


<div style="width:700px;">
    <div class="editor-label col-md-4">
        @Html.LabelFor(u => u.Nombre)
    </div>
    <div class="editor-field col-md-6">
        @Html.TextBoxFor(u => u.Nombre, new { @class = "k-input k-textbox wide-full" })
    </div>
    <div class="editor-label col-md-4">
        @Html.LabelFor(u => u.Apellido1)
    </div>
    <div class="editor-field col-md-6">
        @Html.TextBoxFor(u => u.Apellido1, new { @class = "k-input k-textbox wide-full" })
    </div>
    <div class="editor-label col-md-4">
        @Html.LabelFor(u => u.Apellido2)
    </div>
    <div class="editor-field col-md-6">
        @Html.TextBoxFor(u => u.Apellido2, new { @class = "k-input k-textbox wide-full" })
    </div>

    <div class="editor-label col-md-4">
        @Html.LabelFor(u => u.Codusuario)
    </div>
    <div class="editor-field col-md-6">
        @Html.TextBoxFor(u => u.Codusuario, new { @class = "k-input k-textbox wide-full" })
    </div>
    <div class="editor-label col-md-4">
        @Html.LabelFor(u => u.Password)
    </div>
    <div class="editor-field col-md-6">
        @Html.PasswordFor(u => u.Password, new { @class = "k-input k-textbox wide-full" })
    </div>
    <div class="editor-label col-md-4">
        @Html.LabelFor(u => u.Perfiles.Descripcion)
    </div>
    <div class="editor-field col-md-6">
        @(Html.Kendo().DropDownList()
                    .HtmlAttributes(new { @class = "wide-full" })
    .Name("Perfiles")
    .DataValueField("Id")
    .DataTextField("Descripcion")
    .BindTo((System.Collections.IEnumerable)ViewBag.Perfiles)
    .OptionLabel("Selecciona un perfil...")

        )
    </div>
    <div class="editor-label col-md-4">
        @Html.LabelFor(u => u.Email)
    </div>
    <div class="editor-field col-md-4">
        @Html.TextBoxFor(u => u.Email, new { @class = "k-input k-textbox wide-full" })
        @Html.ValidationMessageFor(u => u.Email)
    </div>
</div>

Kemal Duran Kemal Duran · Accepted Answer · 2014-07-10T13:03:55

you should read your data when a process occured.

.DataSource(ds => ds
    .Events(events => events.Sync("sync_handler"))
)

function sync_handler(e) {
    this.read();
}

Kendo UI Grid with Foreign Key Column Displaying Blank After Creation

1 Answers