Conditionally Hide/Disable the Remove (x) button

3 posts, 0 answers
  1. Ross
    Ross avatar
    6 posts
    Member since:
    Sep 2016

    Posted 01 May 2017 Link to this post

    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. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2088 posts

    Posted 03 May 2017 Link to this post

    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.
  3. Ross
    Ross avatar
    6 posts
    Member since:
    Sep 2016

    Posted 03 May 2017 in reply to Ivan Danchev Link to this post

    Hello Ivan,

     

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

     

    Regards,

    Ross

Back to Top