Our blazing fast Grid component built with pure JavaScript


Post by henrique »

I need some help!

I've registered an event in the row reordering and the drop event runs twice, is there a way to find out who's firing this second event?


Post by marcio »

Hey henrique,

You can see the documentation of drop event https://www.bryntum.com/docs/grid/api/Core/helper/DragHelper#event-drop

That we have a grabbed property which will have the information about the node which started the drag/drop action, is that the information that you're looking for?? Could you provide more context about how you set up the events?

Besides that, you could also try to add a breakpoint using dev tools, and then follow the function chain to check from where it was called.

Best regards,
Márcio


Post by henrique »

How is the name of the function to generate the sample application to send to you?


Post by henrique »

I found the function, downloadTestCase, but it's given me a stack overflow...


Post by marcio »

What error is being displayed for you??? Could you please share a screenshot?

Best regards,
Márcio


Post by henrique »

I found the problem. It was another framework that we used to create div, it was removed, and everything work as expected.


Post by marcio »

Thanks for the clarification Henrique and glad that everything is working now. :)

Best regards,
Márcio


Post by henrique »

Sorry, isn't the another framework, but the hidden property of the grid.

In the sample below, every time you click in the button, and change the record position, will gerenate an event in the onGridRowDrop. If you click 5 time in the button, will generate 5 times the "passed here", in the console.

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

const grid = new Grid({

appendTo : 'container',

features : {
    rowReorder : {
        showGrip  : true,
        callOnFunctions: true,
onGridRowDrop()
{
console.log("passed here");
}
        }
    },

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

multiSelect : true,

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;
    }
}],

tbar : [
    {
        type    : 'checkbox',
        ref     : 'confirmationButton',
        text    : 'Show confirmation dialog',
        checked : false
    },
    {
        type    : 'checkbox',
        text    : 'Show grip icon',
        checked : true,
        onAction() {
            grid.features.rowReorder.showGrip = this.checked;
        }
    }
],

data : DataGenerator.generateData(50)

});

const button = new Button({
    appendTo : 'container',
text: 'click here',
onClick()
{
   grid.hidden = !grid. Hidden;
}
});

Post by marcio »

Hey henrique,

Which version are you using?? I tested in the last version and didn't get that console.log (attached a video to show that)

Attachments
Bryntum Grid - Basic demo - 4 October 2022.mp4
(172.24 KiB) Downloaded 41 times

Best regards,
Márcio


Post by henrique »

After click, must move the record, change the position of it.

I'm using the last version, 5.1.4.


Post Reply