Grid question - row selection and ellipsis menu

[prashantgoel]

We are using the grid product and had a few questions:

1. When using the checkbox selection option, how can we disable the checkbox selection for certain rows based on a criteria?
2. When using checkbox selection, what trigger is fired when a row is selected? We would like to enable functionality elsewhere on the page when a row is selected.
3. Can we show an dropdown ellipsis menu at the end of each row? We would like to show additional options and open modal etc when these options are selected. See attached image.

https://www.dropbox.com/scl/fi/gfkcndtdcwq9y4pai7tra/Ellipsis.png?rlkey=jah02b98nicjm7zgng8qae2bg&dl=0

[tasnim]

Hi,

1. You could use beforeSelectionChange (https://bryntum.com/products/grid/docs/api/Grid/view/mixin/GridSelection#event-beforeSelectionChange) event to prevent selection of certain rows by returning false with some condition
       listeners : {
           beforeSelectionChange(props) {
               if (/** condition */) {
                   return false;
               }
           }
       }
   

2. On selection change it fires https://bryntum.com/products/grid/docs/api/Grid/view/mixin/GridSelection#event-selectionChange and https://bryntum.com/products/grid/docs/api/Grid/view/mixin/GridSelection#event-beforeSelectionChange
3. Yes, of course. You would need an widget column for this https://bryntum.com/products/grid/docs/api/Grid/column/WidgetColumn. And inside of that you can create a button with a menu attached (https://bryntum.com/products/grid/docs/api/Core/widget/Menu)
           {
               type : 'widget',
               text : 'Menu Column',
               widgets : [{
                   type : 'button',
                   menu : {
                       type     : 'menu',
                       anchor   : true,
                       autoShow : false,
                       items    : [
                           {
                               icon : 'b-fw-icon b-icon-add',
                               text : 'Add'
                           },
                           {
                               icon : 'b-fw-icon b-icon-trash',
                               text : 'Remove'
                           },
                           {
                               icon     : 'b-fw-icon b-icon-lock',
                               disabled : true,
                               text     : 'I am disabled'
                           },
                           {
                               text : 'Sub menu',
                               menu : [{
                                   icon : 'b-fw-icon b-fa-play',
                                   text : 'Play'
                               }]
                           }
                       ],
                       // Method is called for all ancestor levels
                       onItem({ item }) {
                           Toast.show('You clicked ' + item.text);
                       }
                   }
               }]
           }
   

   

   Screenshot 2024-01-24 195432.png (36.2 KiB) Viewed 743 times

Hope this helps!

Best of luck,
Tasnim

[prashantgoel]

Thank you. This is extremely helpful!

A few follow-up questions:

1. When selecting all rows (using the select all checkbox), we want to avoid selecting certain rows based on a criteria. How can this be achieved?
2. Instead of blocking a selection, is it possible to hide or disable the checkbox completely on certain rows?
3. What is the easiest way to add a footer to the grid to display record count, selected record count, page info etc.?

[joakim.l]

1. There is currently no supported way of achieving this. But it seems a reasonable thing to do, so I have made a ticket: https://github.com/bryntum/support/issues/8360

2. You could set a css class on the records which should have hidden or disabled some way (Model needs to extend GridRowModel, which is the default if no separate Model class is defined). And then add the neccessary CSS. Something like this:

.b-grid-row.row-is-not-selectable .b-checkbox-selection .b-checkbox {
   display:none
}

Or you can use the checkbox selection column renderer to hide or disable the checkbox. Something like this:

new Grid({
   selectionMode : {
      checkbox : {
         renderer({record, widgets}){
            widgets[0].disabled = record.isNotSelectable;
         }
      }
   }
});

3: Take a look at this demo: https://bryntum.com/products/grid/examples/spreadsheet/

[prashantgoel]

Thanks. For #3, it takes me to a spreadsheet demo. Not sure if that is what you meant to post. I am looking for a paging footer example.

A few other follow-up questions:

1. If checkboxes are enabled, and there no records to display, the "No records to display" message displays in the columns with the checkboxes instead of the main body. Is there a way to display the message in the main grid body instead?

2. Is there a specific event that fires when the "select all" checkbox is checked?

3. How do I add a css class to a grid record?

[mats]

3. Can we show an dropdown ellipsis menu at the end of each row? We would like to show additional options and open modal etc when these options are selected. See attached image.

See the right-most column here:

https://bryntum.com/products/grid/examples/contextmenu/

Docs https://bryntum.com/products/grid/docs/api/Grid/feature/CellMenu#config-clickTriggerSelector

[prashantgoel]

Bubbling these questions up since they got lost in other replies:

Thanks. For #3, it takes me to a spreadsheet demo. Not sure if that is what you meant to post. I am looking for a paging footer example.

A few other follow-up questions:

1. If checkboxes are enabled, and there no records to display, the "No records to display" message displays in the columns with the checkboxes instead of the main body. Is there a way to display the message in the main grid body instead?

2. Is there a specific event that fires when the "select all" checkbox is checked?

3. How do I add a css class to a grid record?

[mats]

If checkboxes are enabled, and there no records to display, the "No records to display" message displays in the columns with the checkboxes instead of the main body. Is there a way to display the message in the main grid body instead?

Please share a screenshot showing actual vs expected. And the code you use.

Is there a specific event that fires when the "select all" checkbox is checked?

https://bryntum.com/products/scheduler/docs/api/Grid/column/CheckColumn#event-toggleAll

How do I add a css class to a grid record?

See example snippet using the renderer on Column https://bryntum.com/products/scheduler/docs/api/Grid/column/Column#config-renderer