kendo-uikendo-multiselect

kendoMultiSelect autoClose inside a Template


I have a multiselect inside a Kendo template (type="text/kendo-x-tmpl") in a list. I can't find a way to set property autoClose to false without jQuery.

<script type="text/kendo-x-tmpl" id="tmplRow">
    <td style="width:100%" id="td">
        <select data-id="myId" data-show=""
                multiple="multiple"
                data-role="multiselect"
                data-text-field="Libelle"
                data-value-field="IdProduct"
                data-value-primitive="true"
                data-loading-text="Chargement..."
                data-bind="value: MyList, source: getSource,  events: { select: onSelectedEvent, change: onChangeEvent }" />
    </td>
</script>

Any idea would help me. Thanks.


Solution

  • You can specify the autoClose configuration option using this attribute data-auto-close="false":

    <script type="text/kendo-x-tmpl" id="tmplRow">
        <td style="width:100%" id="td">
            <select data-id="myId" data-show=""
                multiple="multiple"
                data-role="multiselect"
                data-text-field="Libelle"
                data-value-field="IdProduct"
                data-value-primitive="true"
                data-loading-text="Chargement..."
                data-bind="value: MyList, source: getSource,  events: { select: onSelectedEvent, change: onChangeEvent }"
                data-auto-close="false" />
        </td>
    </script>
    

    The documentation gives this guidance:

    Each configuration option can be set with the data attribute of the target element. Add the "data-" prefix to the name of the configuration option and specify the option value—for example, data-delay="100".

    The camelCase options are set through dash-separated attributes. For example, the ignoreCase option of the AutoComplete is set through data-ignore-case.

    Options which start with data do not require an additional "data" in the attribute name. For example, the dataTextField option is set through the data-text-field attribute and dataSource is set through the data-source attribute

    For more information, see Setting the data Options. See working demo here.