This is a migrated thread and some comments may be shown as answers.

Files and routeValues in Grid popup editor

8 Answers 160 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 11 Oct 2013, 03:36 AM
I'm using a strongly-typed partial view for the Grid popup editor and have a couple questions since the upload widget is rendered when the grid's page loads (and therefore there is no real backing model):
  1. How do I specify the initially rendered files using the Files method?
  2. How do I specify a routeValue for the Save and Remove methods based on the model?
If the control was being rendered using the correct model, I'd want the Upload call to look something like:
@(Html.Kendo().Upload()
       .Name("Attachments").Multiple(true).ShowFileList(true)
       .Async(async => async
           .Save("Attach", "Controller", new { entryId = Model.Id })
           .Remove("RemoveAttachment", "Controller", new { entryId = Model.Id }))
       .Files(files => {
           if (Model.Attachments != null)
           {
              foreach (var f in Model.Attachments)
              {
                   files.Add().Name(f);
              }
           }
       }))
Thanks!

8 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 14 Oct 2013, 09:21 AM
Hi Richard,


Using the Model is not possible in the current scenario, since as you stated, at the time the template code is appended to the page, there is no model. This is why there is no workaround for displaying the initial files in the current scenario.

Regarding the question about sending the additional model data to the Save/Remove actions, it could be achieved, but in a slightly different way, which is described in the following documentation page. In the edit event of the Grid, you could store the current model data in some JavaScript variable and then use it in the upload event of the Upload widget in order to attach the additional data.
E.g.
var currentModel
 
function onUpload(e) {
    e.data = {
        entryId: currentModel.Id
    }
}
 
function edit(e) {
    currentModel = e.model;
}


Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard
Top achievements
Rank 1
answered on 06 Nov 2013, 02:35 AM
Thanks, I ended up just having a new page open to create / edit new entries.
0
Matthew
Top achievements
Rank 1
answered on 16 Apr 2019, 04:14 PM
Is there no way to set the upload's initial files in the grid edit popup when the grid edit event is fired?  This seems like it should be a basic function of the upload??
0
Veselin Tsvetanov
Telerik team
answered on 18 Apr 2019, 09:43 AM
Hi Matthew,

If you are initializing the Upload widget, placed on the Grid edit pop-up in the Grid edit event handler, you will be able to pass the initial files, just like on the Upload initial files demo. You could get the files data from the model available in the edit event handler.

Regards,
Veselin Tsvetanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Matthew
Top achievements
Rank 1
answered on 18 Apr 2019, 08:18 PM

I am using the ASP.NET MVC approach with ajax binding, much like Richard's example from the beginning of this post, and I'm not sure how to implement the initial files as in the demo.  I am able to mange a label with this javascript code (below) of the edit event of the grid.  Is there a way I can populate the initial files from the javascript similar to the below?  I need to be able to manage the initial files when there are initial files and when there are not initial files.

function onEditLeaveRequest(e) {
    var editForm = e.container;
    var model = e.model;
    var x = document.getElementById("drnotefile");
    var y = document.getElementById("drnotefileupload");
    if ((model.DisplayFileName !== null) && (model.DisplayFileName.trim().length > 0)) {
        x.innerHTML = "Current uploaded file: <a href='../Uploads/" + model.StoredFileName + "' target='_blank'>" + model.DisplayFileName + "</a>";
        y.style.display = "none";
    }
    else {
        y.style.display = "block";
    }
}

0
Veselin Tsvetanov
Telerik team
answered on 22 Apr 2019, 12:26 PM
Hello Matthew,

Yes, that would be possible. Yu just have to initialize the Upload widget within the edit event of the Grid. Therefore, in the Grid edit template declaration, you should place an HTML <input type="file"/> element:
<input type="file" id="drnotefileupload" name="drnotefileupload"/>

Then in the event handler, depending on whether there are file names for the edited item or not, you should populate the Upload or not:
function onEditLeaveRequest(e) {
  var editForm = e.container;
  var model = e.model;
   
  var x = editForm.find("#drnotefile");
  var y = editForm.find("#drnotefileupload");
   
  if ((model.DisplayFileName) && (model.DisplayFileName.trim().length > 0)) {
    x.html("Current uploaded file: <a href='../Uploads/" + model.StoredFileName + "' target='_blank'>" + model.DisplayFileName + "</a>");
    //y.css('display', "none");
     
     $("#drnotefileupload").kendoUpload({
       multiple: true,
       async: {
         saveUrl: "save",
         removeUrl: "remove",
         autoUpload: true
       },
       files: [{
        name: model.DisplayFileName,
         extension: '.png',
         size: 81889
       }]
     });
  }
  else {
    y.css('display', "block");
     
    $("#drnotefileupload").kendoUpload({
       multiple: true,
       async: {
         saveUrl: "save",
         removeUrl: "remove",
         autoUpload: true
       }
     });
  }
}

Here you will find a Dojo sample, which demonstrates the above approach.

Regards,
Veselin Tsvetanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Matthew
Top achievements
Rank 1
answered on 22 Apr 2019, 08:02 PM

Veselin,

Thanks, I was able to get it to work with your code.  On another note, similarly I need to set the disableDates of the Date Picker in the grid popup editor...do I need to enter a new request?

0
Veselin Tsvetanov
Telerik team
answered on 23 Apr 2019, 01:10 PM
Hi Matthew,

To configure the disabled dates in a DatePicker initialized in the Grid pop-up editor, you could follow similar approach. You could place a simple <input> element on the edit form and initialize the DatePicker widget in the edit event handler with the disableDates configuration set

To answer the other question, yes, as the new query concerns another widget, it would be better to open a new support thread. Therefore, if you have any further questions on that, I would recommend you to open a new ticket / forum post.

Regards,
Veselin Tsvetanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Upload
Asked by
Richard
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Richard
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or