Upload control with initially Files in a grid with popup editing.

4 posts, 1 answers
  1. Eros
    Eros avatar
    2 posts
    Member since:
    Mar 2013

    Posted 17 Jan 2015 Link to this post

    Hi,
    I'm using a Grid popup editing with custom editor I'd like to use upload control with initially files loaded from a path that depends by the Id field (taskID) of the ViewModel (TaskViewModel).
    Here it is the code I'm using:

       @(Html.Kendo().Grid<Telerik_Tecnim.Models.TaskViewModel>()
                        .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(o => o.taskID);
                    columns.Bound(o => o.Cont);          
      ....
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Model(model =>
                    {
                        model.Id(o => o.taskID);
                        model.Field(o => o.taskID).Editable(false);
       ....
                      
                    })
                                    .Create(update => update.Action("Task_Create", "Task", new { id = "#=ticketID#" }))
                                    .Read(read => read.Action("Task_Read", "Task", new { ticketID = "#=ticketID#" }))
                                    .Update(update => update.Action("Task_Update", "Task"))
                                    .Destroy(update => update.Action("Task_Destroy", "Task"))               
                )
                .Pageable()
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Task")))
                .Sortable()
                .ToClientTemplate()The editor template, task.cshtml, is:@model Telerik_Tecnim.Models.TaskViewModel
    ...
    <div>
        @(Html.Kendo().Upload()
                  .Name("files")
                  .Async(a => a
                      .Save("SaveAndPersist", "Upload", new { id = "#=taskID#" })
                      .Remove("RemoveAndPersist", "Upload", new { id = "#=taskID#" })
                      .AutoUpload(true)           
                  )
                          .Files(files =>
                          {
                              foreach (var f in Model.UploadFiles)
                              {
                                  files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);
                              }
                          })
        )
    </div>

    TaskViewModel is:
    ...
    namespace Telerik_Tecnim.Models
    {
        public int taskID { get; set; }
     ....
        public class TaskViewModel
        {
            .....
            public IList<Telerik_Tecnim.Models.UploadFileViewModel> UploadFiles
            {            get
                {                return SessionUploadInitialFilesRepository.GetAllInitialFiles(this.taskID);
                }            set
                {            }        }
        }
    }

    Unfortunately Model.UploadFiles in editor template seems to be empty (any file is show in uplaod control) but if I check the data with Fiddler UploadFiles is not empty!
    How to use upload with initially files in editor template from a variable path depended by a field of the model?
    Thanks in advance
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 21 Jan 2015 Link to this post

    Hello,

    The UploadFiles property in the editor will be empty because the grid is configured for Ajax binding. In this case the data is loaded on the client via Ajax and is not available on the server when the template is being rendered. The simplest option that I can suggest for this case is to use the grid edit event to initialize the upload and set the initial files from the grid model. I attached the upload in popup code-library modified to demonstrate this scenario.

    Regards,
    Daniel
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Eros
    Eros avatar
    2 posts
    Member since:
    Mar 2013

    Posted 22 Jan 2015 in reply to Daniel Link to this post

    Thank you very much Daniel!
    Now I'll try to apply your suggestion but I don't understand why if I set a fixed taskID (i.e. 4363) instead of this.taskID in taskViewModel like so:
    ...
    namespace Telerik_Tecnim.Models
    {
        public int taskID { get; set; }
     ....
        public class TaskViewModel
        {
            .....
            public IList<Telerik_Tecnim.Models.UploadFileViewModel> UploadFiles
            {            get
                {                return SessionUploadInitialFilesRepository.GetAllInitialFiles(4363);
                }            set
                {            }        }
        }
    }

    all works well !!!
    Do you have any ideas?


  4. Answer
    Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 26 Jan 2015 Link to this post

    Hello again,

    Because the UploadFiles method will always return a result in this case no matter if the Model has any values set or not. The Grid will still pass a model instance when using Ajax binding. The difference is that the Model will have the default values set.

    Regards,
    Daniel
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top