Our blazing fast Grid component built with pure JavaScript


Post by henrique »

In the example below I created two events and the "On" event does not work, just the other. Did I say something wrong?

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

new Grid({

appendTo : 'container',

features : {
    group : false,
    rowReorder : {
        onGridRowDrop: () => {
                console.log("event onGridRowDrop works!");
            },
        listeners : {
            GridRowDrop: () => {
                console.log("listener GridRowDrop works!");
            }
        }
    }
},

// 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  : '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)
});

Post by mats »

onXXX functions are called only when callOnFunctions is set to true, so add this to your feature declaration:

 features : {
        rowReorder : {
            callOnFunctions : true,
            onGridRowDrop   : () => {
                console.log('event onGridRowDrop works!');
            },

This flag will be public in v5.0.


Post Reply