How to display no data message when item length zero

[developer]

Hi..

Im using kendo mutliselect and dropdown list using angular js. i want to display items not available if items are not there.

i tried with select event its working only if drop down is not in repeat and with id,how can i do if drop down or multi select is with in ng-repeat. and if i use select event i need to do more code,is there any alternative to solve this issue?

here is my code for multi select:

  <select kendo-multi-select k-ng-model="manageResource.asset.operators"
                                            k-data-text-field="'name'"
                                            k-data-value-field="'operatorId'"
                                            k-data-source="manageResource.authorisedOperator"
                                            k-options="manageResource.customOptions" k-rebind="manageResource.customOptions"></select>

 

manageResource.customOptions = {
                    placeholder: "Select Operator",
                    valuePrimitive: true,
                    autoBind: false,
                    headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                    '<span>Photo</span>&nbsp;&nbsp;' +
                    '<span>Employee Name</span>' +
                    '</div>',
                    itemTemplate: '<span class="k-state-default">' +
                    '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                    '</span>&nbsp;&nbsp;' +
                    '<span class="k-state-default">#: data.name #</span>',
                    tagTemplate: '<span class="selected-value">' +
                    '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                    '</span>' +
                    '<span>#:data.name#</span>'
                }

Thank.

[Dimo]

Hello,

If I understand correctly, you want to display a "no items" message in the MultiSelect dropdown. I am not sure how the select event would be related to the desired result. A better option is to use the dataBound event and append a custom element in the parent of the items' <ul> element.

http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#events-dataBound

http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#fields-dataSource

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-view

http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#fields-ul

Here is a simple example to start with. Please note that the discussed behavior is not officially supported, so implement it at your own discretion. Undesired side effects or limitations are theoretically possible.

<select id="multiselect" multiple="multiple"></select>
<script>
$("#multiselect").kendoMultiSelect({
  dataSource: [],//[{text: "1", value: "1"}, {text: "2", value: "2"}],
  dataTextField: "text",
  dataValueField: "value",
  dataBound: function(e) {
      if (!e.sender.dataSource.view()[0]) {
        e.sender.ul.parent().append("<div class='no-records'>foo</div>");
      } else {
        e.sender.ul.parent().find(".no-records").remove();
      }
  }
});
</script>

Regards,
Dimo
Telerik