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

File Upload Template

1 Answer 150 Views
Upload
This is a migrated thread and some comments may be shown as answers.
New
Top achievements
Rank 1
New asked on 05 Apr 2018, 03:30 PM

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

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 09 Apr 2018, 10:31 AM
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.
Tags
Upload
Asked by
New
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or