Our blazing fast Grid component built with pure JavaScript


Post by Webethics »

Hello

We are trying to get the gridRowDrop event because we need to save the row reorder number in the database for next time. We already using the finishcelledit event and it's working.
But the gridrowdrop event is not working, don't know what we do wrong.

https://prnt.sc/11ajz42
https://prnt.sc/11ajzx6

We have attached the screenshots of the code, please check and let us know what we are doing wrong.

Thanks


Post by mats »

You can learn about events here: https://bryntum.com/docs/grid/#Grid/feature/RowReorder#events

Please try this here: https://www.bryntum.com/examples/grid/rowreordering/

grid.features.rowReorder.on('gridRowDrop', console.log)

Post by Webethics »

Thanks for the updates, but how can we use this event in Vue js.
Because we have already used finishcelledit event and in the same way we used the gridrowdrop event
but the gridrowdrop event not working. What we are doing wrong we don't figure out.

Screenshots we added for the code.
https://prnt.sc/11ajz42
https://prnt.sc/11ajzx6

Thanks


Post by saki »

For listening on feature events the feature needs to be configured with the listeners, not only boolean true. The modified App.vue of our columntypes Grid demo follows:

<!-- Application -->
<template>
    <div id="container">
        <bryntum-demo-header
            title="Vue Column Types demo"
            link="../../../../../#example-frameworks-vue-javascript-columntypes"
        />
        <bryntum-grid ref="grid" :rowReorderFeature="rowReorderFeature" v-bind="gridConfig" />
    </div>
</template>

<script>
// grid and its config
import { BryntumDemoHeader, BryntumGrid } from '@bryntum/grid-vue';
import { gridConfig } from './AppConfig';
import './components/ColorColumn.js';

// App
export default {
    name: 'app',

    // local components
    components: {
        BryntumGrid,
        BryntumDemoHeader
    },
    methods : {
        handleGridRowDrag({context}) {
            console.log(context);
        }
    },
    data() {
        const rowReorderFeature = {
            listeners : {
                gridRowDrag:this.handleGridRowDrag
            }
        }
        return { gridConfig, rowReorderFeature };
    }
};
</script>

<style lang="scss">
@import './App.scss';
</style>

Post by Webethics »

Thanks, it worked for me.


Post Reply