Files and routeValues in Grid popup editor

9 posts, 0 answers
  1. Richard
    Richard avatar
    10 posts
    Member since:
    Aug 2013

    Posted 10 Oct 2013 Link to this post

    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!
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 14 Oct 2013 Link to this post

    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!
  3. Richard
    Richard avatar
    10 posts
    Member since:
    Aug 2013

    Posted 05 Nov 2013 Link to this post

    Thanks, I ended up just having a new page open to create / edit new entries.
  4. Matthew
    Matthew avatar
    5 posts
    Member since:
    Feb 2015

    Posted 16 Apr in reply to Richard Link to this post

    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??
  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    994 posts

    Posted 18 Apr Link to this post

    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.
  6. Matthew
    Matthew avatar
    5 posts
    Member since:
    Feb 2015

    Posted 18 Apr in reply to Veselin Tsvetanov Link to this post

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

  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    994 posts

    Posted 22 Apr Link to this post

    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.
  8. Matthew
    Matthew avatar
    5 posts
    Member since:
    Feb 2015

    Posted 22 Apr in reply to Veselin Tsvetanov Link to this post

    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?

  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    994 posts

    Posted 23 Apr Link to this post

    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.
Back to Top