Premium support for our pure JavaScript UI components


Post by LiaH »

Hello Bryntum People,

We recently encountered an issue with the Bryntum grid when:

  • One or more rows are disabled for selection

  • First click on "select all" checkbox - all rows except the disabled rows are selected (as expected)

  • On second click on "select all" checkbox to deselect all rows - we're not able to uncheck all rows (the problem)

Thanks in advance for your attention.

Best,
Lia

Attachments
disabled_row_issue.gif
disabled_row_issue.gif (1.62 MiB) Viewed 2507 times

Post by mats »

Do you have any small test case we can look at?


Post by LiaH »

Can you explain what do you mean by "test case"?

What seems to be happening is the synchronisation of the “select all” check box does not take into account disabled rows, which is why when you click it to un-select all it isn’t checked because in fact not all rows are selected


Post by mats »

A test case is a way for us to reproduce this easily. How do you 'disable' the rows?


Post by LiaH »

The team that encountered this issue used:

listeners: { 
   selectionChange: (event) => {
     grid.deselectRows(grid.store.records[1]);
   }
},

Post by mats »

We don't really support that way of 'disabling', a cleaner way is to provide this to your grid:

  isSelectable(recordCellOrId) {
        const row = this.store.getById(recordCellOrId.id || recordCellOrId);
        return this.store.indexOf(row) !== 1;
    },

Post by rridl »

The team wanted us to follow up on this. The solution provided works as expected, and does not select the row when select all checkbox is selected, but the individual row is still selectable. Do you have a recommended pattern that should be used so that the user is given a visual cue that it is non selectable and if the user clicks on it, it is not selected?


Post by mats »

Sounds like a bug if it's selected. https://github.com/bryntum/support/issues/3587

As for visual clue, you can add a renderer for the check column and style the checkbox as you please to provide a hint

 * new Grid({
 *     appendTo : document.body,
 *
 *     columns : [
 *         {
 *              type: 'check',
 *              field: 'allow',
 *              // In the column renderer, we get access to the record and CheckBox widget
 *              renderer({ record, widgets }) {
 *                  // Hide checkboxes in certain rows
 *                  widgets[0].hidden = record.readOnly;
 *              }
 *         }
 *     ]
 * });
 *

Post by Phil234234234234 »

We have similar code to prevent selection of events in Scheduler Pro. When using isSelectable we found that affects selection of resources, which are represented as rows.

Although the EventSelection mixin has an equivalent event eventSelectionChange, we could find no equivalent function isEventSelectable to leverage.

So in Scheduler Pro, what choice do we have but to deselectEvents from eventSelectionChange if we want to selectively prevent individual events from being selected?


Post by mats »

Not yet supported, but we will add a new template method to cover this. https://github.com/bryntum/support/issues/3647


Post Reply