How to display no data message when item length zero

2 posts, 0 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 27 Apr 2016 Link to this post


    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-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>' +
                        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">#: #</span>',
                        tagTemplate: '<span class="selected-value">' +
                        '<img src="#:data.imagePath#" alt="edit" width="24px" height= "24px" /></span>' +
                        '</span>' +


  2. Dimo
    Dimo avatar
    8486 posts

    Posted 29 Apr 2016 Link to this post


    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.

    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>
      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 {

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top