[Solved] Conditionally Hide/Disable the Remove (x) button

[Ross]

Hello!

 

Is there a way to hide or disable the Remove button conditionally for some items only?

I want to prevent the user from removing items that were already used on another list, while enabling them to add more or remove the items not inused.

I use the MVC approach:

@(Html.Kendo().MultiSelect()
    .Name("SelectedCategories")
    .DataValueField("Id")
    .DataTextField("Title")
    .Placeholder("Select categories...")
    .AutoClose(false)
    .ValuePrimitive(true)
    .ClearButton(false)
    .DataSource(ds => ds.Read(read => read.Action("GeCategories", "Category")))
    .BindTo("Categories")
)

 

 

TIA! :o)

 

Ross

[Ivan Danchev]

Hello Ross,

There isn't a method in the MultiSelect's API that would allow you to achieve this custom behavior, but it can be done with jQuery. Here's a sample dojo that demonstrates how. In the example we want to hide the remove button of the "charlie" item (id=4). To do so in the change event handler we check the MultiSelect's value (an array holding the values (Id) of the selected items) and if charlie is selected we find its remove button (a span element with class k-i-close) and hide it.
The dojo shows this approach with the Kendo UI MultiSelect. The difference with the MVC wrapper would be the change event handler attachment:

.Events(e =>
{
    e.Change("onChange");
})

function onChange(e) {
    var value = this.value();

    for(i = 0; i < value.length; i++) {
        if(value[i] == 4) {
            $(".k-multiselect-wrap li:eq(" + i + ")").find(".k-i-close").hide();
        }
    }
}

I hope this was helpful and points you in the right direction.

Regards,
Ivan Danchev
Telerik by Progress

[Ross]

Hello Ivan,

 

Thank you for your reply and suggestion. Yes this is really helpful!

 

Regards,

Ross