This is a migrated thread and some comments may be shown as answers.
Show tags without delete option
3 Answers 5 Views
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
AP asked on 11 Oct 2019, 09:50 AM

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

3 Answers, 1 is accepted

Sort by
0
AP
Top achievements
Rank 1
answered on 14 Oct 2019, 10:56 AM

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?

0
Accepted
Aleksandar
Telerik team
answered on 15 Oct 2019, 08:29 AM

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

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.
0
AP
Top achievements
Rank 1
answered on 15 Oct 2019, 02:43 PM

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.

Asked by
AP
Top achievements
Rank 1
Answers by
AP
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or