Our blazing fast Grid component built with pure JavaScript


Post by thejas.pateel »

Hi ,
I am using bryntum button widget in column . Consider i am having buttons button and button
when i click button one i need to hide button or when i click button 2 i need to hide button 1 .Kindly tell how to achieve this in OnAction method in button of bryntum .

How to call Vue js function form from Bryntum config.js file .


Post by mats »

You could simply set a state flag in your record data that will trigger a rerender of the row and use the renderer of the column to hide/show your buttons as you please. Docs: https://bryntum.com/products/scheduler/docs/api/Grid/column/WidgetColumn#config-renderer


Post by thejas.pateel »

i need dynamic when on button click .when button 1 is clicked we need to hide button 2 is it possible


Post by mats »

Yes, that's what I suggest. On your button click handler, set a flag on your record data and then use the renderer to hide/show the other button.

new Grid({
    columns : [
        {
             type: 'check',
             field: 'allow',
             // In the column renderer, we get access to the record and column widgets
             renderer({ record, widgets }) {
                 // Hide button in certain rows
                 widgets[0].hidden = record.yourFlag;
                 widgets[1].hidden = !record.yourFlag;

         }
    }
]
});

Post by thejas.pateel »

Hi,
Ok thanks .you know how to call vue js functions from render function ?

we can also use action columns in Bryntum grid


Post by saki »

The key is to define a clickHandler function in Vue and then pass it down to the rendering components in extraData through grid which binds property extraData. It is then used in the renderer to pass the clickHandler as a prop of the Vue rendering component.

The above way is used in our https://bryntum.com/products/grid/examples/frameworks/vue-3/javascript/vue-renderer/dist/ example.

I'd recommend to study this demo well and to use it as the basis of your implementation.


Post Reply