Connected Listboxes, limit number of items in second listbox

2 posts, 1 answers
  1. RichardAD
    RichardAD avatar
    133 posts
    Member since:
    Feb 2012

    Posted 16 Sep Link to this post

    I have two list boxes that are connected, the left one lists available items and the second for selected items. The number of selected items is limited to 5.  Is there a way to turn of the transferTo tool button and disable new drops in the second list box ?  The second box needs to remain 'active' for the user to reordering the items in their priority sequence.

    I have been able to disable the transfer to button in the toolbar, in the second listbox add handler, when a new add is occurring and the listbox currently has 4 items.

    Thanks,

    Richard

  2. Answer
    Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 19 Sep Link to this post

    Hello Richard,

    In this scenario, I can suggest using custom logic to determine if an item can be added to the selected list. This can be achieved on the add event using the view method of the ListBox dataSource. This will add it and respectively remove it from the first list only if the conditions are met. A similar logic can be used to determine if the button will be disabled and then enabled. The button can be selected by data-command attribute:

    data-command="transferTo"

    // This can be done on the add event if the number of items is >= 4 
    $('[data-command="transferTo"]').attr("disabled", true)

    http://docs.telerik.com/kendo-ui/api/javascript/ui/listbox#events-add

    http://docs.telerik.com/kendo-ui/api/javascript/ui/listbox#events-remove

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-view

    I made an example demonstrating the approach with preventing the actions:

    http://dojo.telerik.com/UYUsa

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    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.
Back to Top