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?


  2. Ivan Danchev
    Ivan Danchev avatar
    1953 posts

    Posted 09 Apr 2018 Link to this post


    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 class="demo-section k-content">
                .Async(a => a
                    .Save("Save", "Upload")
                    .Remove("Remove", "Upload")
                .Events(events => events
    <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"
        #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;

    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