File Upload Template

2 posts, 0 answers
  1. New
    New avatar
    1 posts
    Member since:
    Mar 2018

    Posted 05 Apr 2018 Link to this post

    When I put a Combobox inside my upload template, it puts a script(Combobox script) within a script (template script).  The browser does not like this and stops rendering correctly.  How do I make this happen?

    Thanks

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1712 posts

    Posted 09 Apr 2018 Link to this post

    Hello,

    Here's an example showing how by using the Upload's upload event a ComboBox can be initialized from an input element in the Upload's template:
    <script id="fileTemplate" type="text/x-kendo-template">
        <input />  
        <span class='k-progress'></span>
        <div class='file-wrapper'>
            <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
            <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
            <button type='button' class='k-upload-action'></button>
        </div>
    </script>
     
    <div class="demo-section k-content">
     @(Html.Kendo().Upload()
                .Name("files")
                .TemplateId("fileTemplate")
                .Async(a => a
                    .Save("Save", "Upload")
                    .Remove("Remove", "Upload")
                )
                .Events(events => events
                    .Upload("onUpload")
                )
      )
    </div>
     
    <script type="text/javascript">
        function onUpload(e) {
            var dataSource = [
              { text: "Item1", value: 1 },
              { text: "Item2", value: 2 },
              { text: "Item3", value: 3 },
              { text: "Item4", value: 4 }
            ]
                             
            $(".k-file input[role!='combobox']").kendoComboBox({
                dataSource: dataSource,
                dataTextField: "text",
                dataValueField: "value"
            });
        }
    </script>
     
    <style>
        #example .file-name-heading {
            font-weight: bold;
            margin-top: 20px;
        }
     
         #example .file-size-heading {
            font-weight: normal;
            font-style: italic;
        }
     
        li.k-file .file-wrapper .k-upload-action {
            position: absolute;
            top: 0;
            right: 0;
        }
     
        li.k-file div.file-wrapper {
            position: relative;
            height: 75px;
        }
    </style>


    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top