Show tags without delete option

4 posts, 1 answers
  1. AP
    AP avatar
    242 posts
    Member since:
    Apr 2010

    Posted 11 Oct 2019 Link to this post

    I have a multi-select widget showing check-boxes, on a page, controlling a grid filter. The requirement is to allow multiple selections before the filter is applied.  I've done this by applying the filter on the close event, and setting autoclose to false.

    This works, but I would like to display all the selected items, but not any to be deleted, except by opening the control up, and unchecking the boxes.

    How can I show multiple tags, but remove the delete icon from them? I've tried a tag template, but the icon still shows.



  2. AP
    AP avatar
    242 posts
    Member since:
    Apr 2010

    Posted 14 Oct 2019 in reply to AP Link to this post

    Alternatively, I'd like to be able to fire an event when a tag is removed via the delete button , but not when an item is deselected, as I only want to trigger a re-query of the grid when the list has been closed.

    Also, it is possible to deselect an item, but leave the checkbox ticked - an issue when autoclose is set to false. Is there a way to prevent this?

  3. Answer
    Aleksandar avatar
    81 posts

    Posted 15 Oct 2019 Link to this post

    Hi Andrew,

    to hide the close icon from the tags of selected items you can use the following css rule:

      .k-multiselect-wrap.k-floatwrap li.k-button .k-icon.k-i-close
        display: none !important;

    This dojo demonstrates the above in a scenario similar to yours. Keep in mind that if you have other Kendo Widgets you might need to add selectors for the particular widgets, for which you would like to hide the close icons.

    The MultiSelect widget API provides several events, to which you can bind event handlers. When the widget pop-up closes the close event is fired. The deselect event is triggered when an item is deselected or tag is removed. There is no distinction on how the item is removed, so in your scenario the query should be triggered in the close event handler function.

    To ensure that an item is deselected and the corresponding checkbox unselected a custom function is implemented that updates the checkboxes on each change of the widget's value:

    var checkInputs = function(elements) {
                      elements.each(function() {
                            var element = $(this);     
                        var input = element.children("input");
                        input.prop("checked", element.hasClass("k-state-selected"));

    I hope this helps. Let me know if you have further questions.

    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. AP
    AP avatar
    242 posts
    Member since:
    Apr 2010

    Posted 15 Oct 2019 in reply to Aleksandar Link to this post

    Thanks for this, its now working.  However, it would be easier if the Kendo UI suite included a control that worked more like this in the first place - something a bit like the bootstrap multiselect perhaps? ( )

    I did consider using this, but wanted to keep the styling consistent with the other drop-downs on the page.

Back to Top