On using editor template my grid is posting previous values to the controller

[amit]

I am using an editor template for a popup editor and I have Image uploader inside that I want to place the new image name in a field. But instead, after updating I see the previous image name getting posted.

In the template this is the field.
=========================================================================================
<input type="file" name="file" id="dataPhoto" />
<script>
    $("#dataPhoto").kendoUpload({

        async: {
            saveUrl: '@Url.Action("ImageSave","Data")',
            autoUpload: true
        },
        multiple: false,
        success: function (data) {
            alert(data.response.fileName);
            $('#DatumImageName').val(data.response.fileName);
        }
    });
</script>
<div class="editor-field">
    @Html.TextBoxFor(model => model.DatumImageName)
</div>
========================================================================================
@model Lifetech.Service.ApiModels.DatumApiModel
@(Html.Kendo().Grid<Lifetech.Service.ApiModels.DatumApiModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(d => d.Title).Title("Title");
        columns.Bound(d => d.DatumImageName).ClientTemplate(
            "<img src='" + Url.Content("~/Images/Data/") +
            "#:data.DatumImageName#' alt='#: data.Title #' />"
            );

        columns.Bound(d => d.Description).Title("Description");
        columns.Bound(d => d.IsActive).Title("Is Active");
        columns.Bound(d => d.DisplayOrder).Title("Display Order");

        columns.Command(command => { command.Edit(); command.Destroy(); }).Title("Commands").Width(172);
    })        
    .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("DataTemplate"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
               .Ajax()
                .PageSize(20)
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(d => d.DataID))
                .Create(update => update.Action("Create", "Data", new { Id = ViewBag.ProductId }))
                .Read(read => read.Action("Read", "Data"))
                .Update(update => update.Action("Update", "Data"))
                .Destroy(update => update.Action("Destroy", "Data"))
    )
)
====================================================================================

If I edit the value in the textbox for the image name manually then it works, but I need it to be set through javascript as I have an image uploader.


Thanks,
Amit

[Petur Subev]

Hello Amit,

Updating the value of a input  inside the Grid Popop Window with JavaScript wont update the underlying model. You have to update the model with its set method. In your case you can get reference to the Grid model that being edit like so:

success : function (e) {
    $('#gridName').data('kendoGrid').editable.options.model.set('DatumImageName', e.reponse.fileName);
}

I hope this is what you are searching for.

Kind Regards,
Petur Subev
Telerik