Show/hide label/<p> depending on upload state

3 posts, 0 answers
  1. Richard
    Richard avatar
    11 posts
    Member since:
    Jul 2010

    Posted 02 Jul 2015 Link to this post

    Hello all

    I have the following partial view that I use to display various uploads on a websites.

     

    <div class="formEditorFor">
                  @{ Html.RenderPartial("_Upload", Model.Upload.Where(p => p.RelatedQuestion.Contains("Question1")), new ViewDataDictionary { { "RelatedQuestion", "Question1" }, { "SupplierId", Model.EmploymentFreedomDiscrimination.SupplierId } }); }
              </div>

    @model IEnumerable<Valpak.Websites.Sancroft.Ethical.Models.UploadInitialFile>
     
    <div style="width:100%">
        <div>
            @(Html.Kendo().Upload()
                  .Name(ViewData["RelatedQuestion"].ToString())
                  .Async(a => a
                      .Save("SaveAndPersist", "Upload",
                          new { relatedQuestion = ViewData["RelatedQuestion"], supplierId = ViewData["SupplierId"], subSupplierId = ViewData["SubSupplierId"] })
                      .Remove("RemoveAndPersist", "Upload",
                          new { relatedQuestion = ViewData["RelatedQuestion"], supplierId = ViewData["SupplierId"], subSupplierId = ViewData["SubSupplierId"] })
                      .AutoUpload(true)
                          )
                  .Files(files =>
                  {
                      foreach (var f in Model)
                      {
                          files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);
                      }
                  })      
            )
        </div>
        @if (!Model.Any())
        {
            string name = ViewData["RelatedQuestion"] + "Required";
            <p id=@name>Required</p>
        }
    </div>
     

    As you can see, for each upload on the page, I wish to display a "Required" bit of text dependent upon whether a particular upload has a file etc. I do not wish to enforce any strong validation which I could do on the post of the form, I just want to bring to the users attention that they need to upload something here.

    How would I go about showing and hiding this depending on whether the upload has any thing present?

    Alternatively, are their any css selectors I can use to facilitate this task e.g. k-dropzone k-empty >>> an empty upload;  k-dropzone k-hasdata >>> upload has received a file.

    Again alternatively, is there a way to change the button text from "Select Files" when nothing is present, to "File already selected" when something has been uploaded?

    Please note, I have multiple instances of the upload on the page which is where I have encountered a few problems!!!

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 03 Jul 2015 Link to this post

    Hello Richard,

    You could use the select event of the widget to modify the text of the upload button. Here is a small example that demonstrates this in action. The approach in the MVC Upload would be the same.

    Regarding the other question, indeed the Upload widget has a specific CSS k-upload-empty class on it's wrapper, when there are no selected files.

    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. Kendo UI is VS 2017 Ready
  4. Richard
    Richard avatar
    11 posts
    Member since:
    Jul 2010

    Posted 06 Jul 2015 in reply to Dimiter Madjarov Link to this post

    Good morning Dimiter

    Thank you very much for this - I have gone with the k-upload-empty method as I was experiencing all sorts of strange things (also it's a lot easier to implement!)

    Thank you for pointing this out to me.

     Rich

     

Back to Top