Our pure JavaScript Scheduler component


Post by Jammb »

Is it possible to disable resources from a dropdown (Combobox)? If so, how can this be accomplished?


Post by Maxim Gorkovsky »

Hello.
Combo box has a store with items which you can filter to remove them from combo. We don't have an API to disable certain items inside the dropdown list. But you can implement it on application level. e.g. add certain CSS class to certain disabled records and make them disabled with CSS:

//
combo.store.forEach((item) => {
  // item is disabled
  if (...) {
    // set this property to add class, set to empty string to remove
    item.cls = 'disabled';
  }
});
// css
.b-list-item.disabled {
  pointer-events: none; // this will prevent selection
  background-color: gainsboro; // add some visuals to distinguish disabled items
}

Post by Jammb »

Hi Maxim,
Below is the way I use the combo for resource dropdown.
Is there any other way to achieve that and I want to disable items in combo dynamically?
Thanks.

Attachments
Capture.PNG
Capture.PNG (21.54 KiB) Viewed 666 times

Post by fabio.mazza »

Hi Jammb,

Please, post your code using "Code display" button on editor forum instead of screenshot it, will be good for us to copy when needed. Screenshots are good to show the browse result on your UI.

Please, take a look on react examples, there are many examples that can help you.

Considering you created a css like suggested by Maxim, you can apply class according your variable value, like this:

editor : {
    type : 'combo',
    valueField: 'name',
    displayField: 'name',
    items: [{
        name: 'item 1'
    },{
        name: 'item 2'
    },{
        name: 'item 3'
    }],
    listItemTpl : item => `<div class="${disabled ? 'disabled' : ''}"></div><div>${item.value}</div>`
}

Best regards,
Fabio


Post Reply