Access to row size in cell editor

Our blazing fast Grid component built with pure JavaScript


Post Reply
User avatar
hypergenekim
Premium Member
Premium Member
Posts: 5
Joined: Fri Sep 04, 2020 11:00 am

Access to row size in cell editor

Post by hypergenekim »

Is it possible to access the row size in a custom cell editor as it's possible in a custom cell renderer to manipulate the height of the rows? I'm using the react wrapper for the grid.


User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 3100
Joined: Fri Apr 01, 2016 11:08 am

Re: Access to row size in cell editor

Post by pmiklashevich »

Hello,

It took me some time to understand your question. If I got you right, you want to increase row hight when you start editing to allow more content to fit in the cell. Am I right? This is very easy to achieve due to our GridRowModel. It provides rowHeight field. So by setting the record.rowHeight, you can change the height of the row. You can increase the height on beforeCellEditStart and reset it on when editor is closed. For that you can use beforeFinishCellEdit. But this event is triggered only when the data is changed, otherwise cancelCellEdit is fired. Unfortunately, the context is already destroyed at this phase. I created a ticket to introduce "beforeCancelCellEdit" event. https://github.com/bryntum/support/issues/1832
Meanwhile please use this workaround. But keep in mind it relies on private function, so might stop working at any time. Should be removed as soon as the ticket is fixed.

Code: Select all

import CellEdit from '../../lib/Grid/feature/CellEdit.js';
import GridFeatureManager from '../../lib/Grid/feature/GridFeatureManager.js';

// REMOVE THE WORKAROUND WHEN https://github.com/bryntum/support/issues/1832 IS FIXED
class MyCellEditor extends CellEdit {
    static get $name() {
        return 'MyCellEditor';
    }

// OVERRIDE PRIVATE FUNCTION
getEditorListeners() {
    return Object.assign(super.getEditorListeners(), {
        beforecancel : 'onEditorBeforeCancel'
    });
}

onEditorBeforeCancel(context) {
    Object.assign(context, {
        grid          : this.grid,
        editorContext : context.source.cellEditorContext
    });

    return this.grid.trigger('beforeCancelCellEdit', context);
}
}

GridFeatureManager.registerFeature(MyCellEditor);

new Grid({
    listeners : {
        beforeCellEditStart({ editorContext }) {
            editorContext.__oldRowHeight = editorContext.record.rowHeight;
            editorContext.record.rowHeight = 100;
        },
        beforeFinishCellEdit({ editorContext }) {
            editorContext.record.rowHeight = editorContext.__oldRowHeight;
        },
        // This is available due to override
        beforeCancelCellEdit({ editorContext }) {
            editorContext.record.rowHeight = editorContext.__oldRowHeight;
        }
    },
    features : {
        myCellEditor : true,
        cellEdit     : false
    },
Запись активности на экране 2020-11-06 в 20.19.06.gif
Запись активности на экране 2020-11-06 в 20.19.06.gif (1.69 MiB) Viewed 109 times

Best regards,
Pavel

Pavel Miklashevich - Core Developer

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 3100
Joined: Fri Apr 01, 2016 11:08 am

Re: Access to row size in cell editor

Post by pmiklashevich »

The same is true for React. Just need to put the override to the React wrapper and the feature to the list of features there.
Grid/examples/react/_shared/src/lib/BryntumGrid.js

Code: Select all

import { Grid, ObjectHelper, Widget, CellEdit, GridFeatureManager } from 'bryntum-grid/grid.umd';

// REMOVE THE WORKAROUND WHEN https://github.com/bryntum/support/issues/1832 IS FIXED
class MyCellEditor extends CellEdit {
    static get $name() {
        return 'MyCellEditor';
    }

// PRIVATE OVERRIDE
getEditorListeners() {
    return Object.assign(super.getEditorListeners(), {
        beforecancel : 'onEditorBeforeCancel'
    });
}

onEditorBeforeCancel(context) {
    Object.assign(context, {
        grid          : this.grid,
        editorContext : context.source.cellEditorContext
    });

    return this.grid.trigger('beforeCancelCellEdit', context);
}
}

GridFeatureManager.registerFeature(MyCellEditor);

// Defines a React component that wraps Bryntum Grid
class BryntumGrid extends Component {


/**
 * @deprecated in favor of gridInstance
 */
get gridEngine() {
    console.warn('gridEngine is deprecated. Use gridInstance instead.')
    return this.gridInstance;
}

// defaults for grid. Feel free to adjust it
static defaultProps = {};

featureRe = /Feature$/;

/* #region Features */
features = [
    'myCellEditorFeature', // FEATURE IS ADDED TO THE LIST
    'cellEditFeature',

Grid/examples/react/javascript/basic/src/containers/Main.js

Code: Select all

                <BryntumGrid
                    ref={'grid'}

                listeners={{
                    beforeCellEditStart({ editorContext }) {
                        editorContext.__oldRowHeight = editorContext.record.rowHeight;
                        editorContext.record.rowHeight = 100;
                    },
                    beforeFinishCellEdit({ editorContext }) {
                        editorContext.record.rowHeight = editorContext.__oldRowHeight;
                    },
                    // This is available due to override
                    beforeCancelCellEdit({ editorContext }) {
                        editorContext.record.rowHeight = editorContext.__oldRowHeight;
                    }
                }}

                myCellEditorFeature={true}
                cellEditFeature={false}

Cheers!

Pavel Miklashevich - Core Developer

User avatar
hypergenekim
Premium Member
Premium Member
Posts: 5
Joined: Fri Sep 04, 2020 11:00 am

Re: Access to row size in cell editor

Post by hypergenekim »

Hi!

I can see all the events working as intended with your override. But how would I make the grid re-render to reflect the new 'rowHeight' in a react context since it wont actually change the displayed height only by setting 'rowHeight'.

Also, I need to set the height independently within the cellEditor since the height is dynamic.

With the cellEditor i can do with by accessing the 'size' object from the component props, and after changing 'size.height' i trigger 'refreshRows' on the grid.


User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 3100
Joined: Fri Apr 01, 2016 11:08 am

Re: Access to row size in cell editor

Post by pmiklashevich »

Hello,

I checked the solution in the react/javascript/basic demo before give it to you. It worked the same good as for vanilla example. Please provide a testcase showing your issue and describe the problem more detailed. It seems I'm missing something. Please describe what you're trying to change, when, and why. https://www.bryntum.com/docs/grid/#Grid/data/GridRowModel#field-rowHeight is a data field, so when it gets changed, the grid displays the changes automatically.

Best,
Pavel

Pavel Miklashevich - Core Developer

User avatar
hypergenekim
Premium Member
Premium Member
Posts: 5
Joined: Fri Sep 04, 2020 11:00 am

Re: Access to row size in cell editor

Post by hypergenekim »

I have a column setup like this:

Code: Select all

interface Renderer {
    record: any,
    value: Array<string>,
    size: any,
    cellElement: any,
}

Code: Select all

{
    field: 'tags',
    text: 'Tags',
    flex: 1,
    renderer: (data: Renderer): ReactElement => <Tags {...data} />,
    editor: (ref: RefObject<any>): ReactElement => <TagsEdit ref={ref} />,
}

Code: Select all

                <Grid
                    ref={grid}
                    // rowHeight={50}
                    autoHeight={true}
                    treeFeature={true}
                    store={new Store({
                        tree: true,
                        data: [],
                    })}
                    columns={columns}
                    renderRows={onRenderRows}

                listeners={{
                    beforeCellEditStart ({ editorContext }): void {
                        editorContext.__oldRowHeight = editorContext.record.rowHeight;
                        editorContext.record.rowHeight = 400;
                    },
                    beforeFinishCellEdit ({ editorContext }): void {
                        editorContext.record.rowHeight = editorContext.__oldRowHeight;
                        grid.current.gridEngine.refreshRows();
                    },
                    beforeCancelCellEdit ({ editorContext }): void {
                        editorContext.record.rowHeight = editorContext.__oldRowHeight;
                    },
                }}

                myCellEditorFeature={true}
                cellEditFeature={false}
            />

And in <Tags /> component i can set the size of the cell within 'componenetDidMount' by accessing the 'this.props.size', and I would like to do something similar in <TagsEdit> component =)


User avatar
fabio.policeno
Core Developer
Core Developer
Posts: 204
Joined: Sun Jul 12, 2020 8:22 pm

Re: Access to row size in cell editor

Post by fabio.policeno »

Hi hypergenekim,

I am not 100% sure of your implementation, but I applied some change that will give you some idea what to do to have the rowHeight of the records edited available and changeable on your editor component.

I have applied some changes on DemoEditor that already exists to be easier on https://www.bryntum.com/examples/grid/react/javascript/basic/build/index.html demo.

For this example wasn't necessary to use the overrides, you have to just change the Grid/examples/react/javascript/basic/src/components/DemoEditor.js file like this:
First, add a new state config cellEditorContext:

Code: Select all

state = {
    ...
    cellEditorContext : null
};

after that, you can change the setValue method to:

Code: Select all

// here the cellEditorContext parameter is available with all data about the current editing record
// it will be available globally for your state
setValue(value, cellEditorContext = this.state.cellEditorContext) {
    this.setState({
        value,
        cellEditorContext
    });

// just for test: if editor value is true, change the height to 100 but if false, change to 200
this.state.cellEditorContext.record.rowHeight = value ? 100 : 200;
}

After that you can run the app and change the values on ORIGINAL 6 column to see columns changing the height:

Nov-13-2020 22-25-04.gif
Nov-13-2020 22-25-04.gif (15.16 MiB) Viewed 60 times

Please let us know if this is what you was looking for.

Fabio Jr. Policeno
Core Developer


User avatar
hypergenekim
Premium Member
Premium Member
Posts: 5
Joined: Fri Sep 04, 2020 11:00 am

Re: Access to row size in cell editor

Post by hypergenekim »

This works perfectly, thanks!


Post Reply