Grid popup template with upload component not returning any values

4 posts, 0 answers
  1. Jonatan
    Jonatan avatar
    14 posts
    Member since:
    Feb 2014

    Posted 03 Dec 2015 Link to this post

    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?

     
     

  2. Jonatan
    Jonatan avatar
    14 posts
    Member since:
    Feb 2014

    Posted 03 Dec 2015 Link to this post

    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?

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jonatan
    Jonatan avatar
    14 posts
    Member since:
    Feb 2014

    Posted 03 Dec 2015 Link to this post

    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 />

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 03 Dec 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready