Our blazing fast Grid component built with pure JavaScript


Post by henrique »

When you create a column of type check, and you place the grid as read-only or disable cell edit, the field no longer loads the data.

import { Grid, DataGenerator } from '../../build/grid.module.js?459923';
import shared from '../_shared/shared.module.js?459923';

new Grid({

appendTo : 'container',
readOnly: true,
    features : {
        group : false,
cellEdit: {
disabled: false
}
    },

// Headers will ripple on tap in Material theme
ripple : {
    delegate : '.b-grid-header'
},

columns : [
    {
        text   : 'Name',
        field  : 'name',
        flex   : 2,
        editor : {
            type     : 'textfield',
            required : true
        }
    }, 
{
text: 'check box',
field: 'done',
type: 'check'
},

{
text: 'check box text',
field: 'done'
},

{
            text  : 'Age',
            field : 'age',
            width : 100,
            type  : 'number'
        }, {
            text  : 'City',
            field : 'city',
            flex  : 1
        }, {
            text  : 'Food',
            field : 'food',
            flex  : 1
        }, {
            text     : 'Color (not sortable)',
            field    : 'color',
            flex     : 1,
            sortable : false,
            renderer({ cellElement, value }) {
                // renderer that sets text color = text
                cellElement.style.color = value;
                return value;
            }
        }
    ],

data : DataGenerator.generateData(50)
});
Attachments
Columns image
Columns image
Screenshot_3.png (68.65 KiB) Viewed 284 times

Post by marcio »

Hey Henrique,

Thanks for the report, it's a bug indeed. Already created a ticket for it - https://github.com/bryntum/support/issues/4836

Best regards,
Márcio


Post by dev1@datip.nl »

Hi,

I had the same issue reported previously, and now, after updating to the new version 5.0.7 is working.

However, my listener beforeToggle is not working anymore.

Could you help me, please?

{
          sum: "count",
          summaryRenderer: ({ sum }) => `Total: ${sum}`,
          field: "IsGeoCoded",
          text: "GC",
          type: "check",
          flex: 1,
          sortable: true,
          listeners: {
            beforeToggle: (event) => {
              if (event.record.getData('IsGeoCoded'))
                window.open('https://www.google.com/maps/search/?api=1&query=' + event.record.getData('Lat') + ',' + event.record.getData('Lon'), "_blank");

          return false
        }
      }
     }

Thanks!


Post by marcio »

Hey dev1@datip.nl,

If you return false to the beforeToggle event it will be canceled and the check won't be done, because it's a preventable event. From the documentation:

Fired when a cell is clicked to toggle its checked status. Returning false will prevent status change.

https://www.bryntum.com/docs/grid/api/Grid/column/CheckColumn#event-beforeToggle

Besides that, which version are you using?
I added your column to our basic demo example, and the beforeToggle callback was called without any issues.

Best regards,
Márcio


Post by dev1@datip.nl »

Hi marcio, thank you!

I will try to remove the return false to see if the beforeToggle is triggered again and get back to you.

Thank you


Post Reply