This is a migrated thread and some comments may be shown as answers.

Conditionally Hide/Disable the Remove (x) button

2 Answers 1147 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Ross
Top achievements
Rank 1
Ross asked on 01 May 2017, 08:28 PM

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

2 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 03 May 2017, 11:35 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ross
Top achievements
Rank 1
answered on 03 May 2017, 12:01 PM

Hello Ivan,

 

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

 

Regards,

Ross

Tags
MultiSelect
Asked by
Ross
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Ross
Top achievements
Rank 1
Share this question
or