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 Link to this post

    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.

  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 29 Apr Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top