Show tags without delete option

[AP]

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.

 

Thanks

[AP]

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?

[Aleksandar]

Hi Andrew,

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

<style>
  .k-multiselect-wrap.k-floatwrap li.k-button .k-icon.k-i-close
  {
    display: none !important;
  }
</style>

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.

Regards,
Aleksandar
Progress Telerik

[AP]

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? (http://davidstutz.de/bootstrap-multiselect/ )

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