File Upload Template

[New]

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

[Ivan Danchev]

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