1

I have created a custom template for my Kendo-ui multi-select element.

HTML:

<select kendo-multi-select k-options="vm.selectOptions" k-data-value-field="'id'" k-data-text-field="'name'" k-value-primitive="true" k-data-source="vm.people" k-ng-model="vm.selectedPeople" ></select>

Controller code to set Options:

this.selectOptions = {
    autoClose: false,
    tagMode: "single",
    tagTemplate: $("#_customKendoMultiSelectTemplate").html()
};

Then I "include" the template in my application_layout.html:

<script id="_customKendoMultiSelectTemplate" type="text/x-kendo-template">

    # if (dataItems.length == 1) { #
    # for (var idx = 0; idx < dataItems.length; idx++) { #
    #:dataItems[idx].name#
    # } #
    # } else { #
    #:dataItems.length# ITEMS SELECTED
    # } #

</script>   

This works 100%, what I want to do is move this template into its own file, which I have done but then angular doesn't know what "dataItems" is and renders the entire contents of the template. So how do I pass through the scope? I have tried a couple things with onload method and ng-init but haven't been successful.

<script id="_customKendoMultiSelectTemplate" type="text/x-kendo-template">
    <ng-include src="'/customKendoMultiSelectTemplate.html'" ></ng-include>
</script>   

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.