Grid popup template with upload component not returning any values

[Jonatan]

I have a Grid with a popup that has an upload module. after uploading a file to the server, I want the "Success" event to populate a hidden field for the model.

The code is as follows.

GRID________________________________________________

@(Html.Kendo().Grid<BlueWebApp.Models.Note>()
    .Name("NoteGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.NoteID).Width(50);
        columns.Bound(c => c.NoteText).Width(150).Title("Text");
        columns.Command(c => c.Edit());
    })
    .HtmlAttributes(new { style = "height: 600px; width: 100%" })
    .Editable(ed => { ed.Mode(GridEditMode.PopUp).TemplateName("NoteEditTemplate"); })
.ToolBar(e => e.Create())
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("GetNotes", "Note"))
    .Create(c => c.Action("CreateNote", "Note"))
    .Update(u => u.Action("UpdateNote", "Note"))
    .Model(m =>
    {
        m.Id(p => p.NoteID);
    })
    )
)

 

 

EDITORTEMPLATE_______________________________

@model BlueWebApp.Models.Note

<div style="height: 100px;">
    This is customized Person edit template

        @Html.HiddenFor(model => model.NoteID)
        <br />
        @Html.HiddenFor(model => model.NoteText, new { id = "test"})

</div>
<div>
    @(Html.Kendo().Upload()
         .Name("files")
         .Events(events => events.Success(
         @<text>
    function(e) {
        $('#test').val(e.response.fileName);

    }
        </text>))
         .Multiple(false)
         .Async(a => a.Save("Save", "Note")
                      .Remove("Remove", "Note")
                      .AutoUpload(true)
        )

)
</div>
<br />

When clicking the "Update" button on the popup the hidden field with id Test has been given a value. but that value is not passed to the model.

 What am I doing wrong?

 

 

[Jonatan]

There are more threads related to Uploading files and binding them to grid rows.

What seems to be lacking is a project example of how to handle this functionality.

Can someone provide a working project example?

[Jonatan]

I found out my issue.

 Apparantly the value of the databinded html field was not updated to the model before I manually triggered the 'Change' Event on the htmleditor. here is the code:

 

@model BlueWebApp.Models.Note

<div style="height: 100px;">

        @Html.HiddenFor(model => model.NoteID)
        <br />

        @Html.HiddenFor(model => model.NoteText)

</div>
<div>
    @(Html.Kendo().Upload()
         .Name("files")
         .Events(events => events.Success(
         @<text>
    function(e) {
        $('#NoteText').val(e.response.fileName);
        $('#NoteText').trigger('change')  <!-- Manually Trigger Change Event -->
    }
        </text>))
         .Multiple(false)
         .Async(a => a.Save("Save", "Note")
                      .Remove("Remove", "Note")
                      .AutoUpload(true)
        )

)
</div>
<br />

[Dimiter Madjarov]

Hello Jonatan,

Your implementation is correct. A small part missing is that the change event of the hidden input should be triggered. This notifies the model for the modified field.
E.g.

$('#test').val(e.response.fileName).trigger("change");

The complete approach is demonstrated in the following example project.

Regards,
Dimiter Madjarov
Telerik