Files and routeValues in Grid popup editor

[Kevin]

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!

[Dimiter Madjarov]

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

[Kevin]

Thanks, I ended up just having a new page open to create / edit new entries.

[Matthew]

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

[Veselin Tsvetanov]

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

[Matthew]

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";
    }
}

[Veselin Tsvetanov]

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

[Matthew]

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?

[Veselin Tsvetanov]

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