[Solved] Column resize & order by code

[Jean-Pierre]

Hello,

I have several kendo react grids, for which columns maybe resized and/or reordered. I have one question and one issue.

Let starts by the issue. As soon as I click (and release) the resize handler (without moving the mouse), the whole grid is resized. To illustrate this, the attached picture "before_resize" is taken before resizing and the attached picture "after_resize" is taken after a left mouse click and mouse up (no mouse move between).

And now, the question. I would like to memorize the size and the order of all columns, save it into some file and later restore the order and size of all columns. I think I can handle the two first items, but how could I reorder and resize by code the columns ?

Grid is defined by:

<Grid

    data={this.state.data}

    cellRender={this.renderers.cellRender}

    rowRender={this.renderers.rowRender}

    editField="inEdit"

    selectedField="selected"

    onSelectionChange={this.selectionChange}

    onHeaderSelectionChange={this.headerSelectionChange}

    onItemChange={this.itemChange}

    onColumnResize={(e) => { if(e.end) console.log(e); }}

    onColumnReorder={(e) => { console.log(e); }}

    onRowClick={this.rowClick}

    reorderable

    resizable

    scrollable="none"

>

 

While columns are defined by the following code, where width is undefined:

{
    this.state.columns.map((column, idx) =>
    column.show && (
        <Column
            key={idx}
            field={column.field}
            title={column.title}
            filter={column.filter}
            cell={column.cell}
            editable={column.editable}
            editor={column.editor}
            width={column.width}
            columnMenu={
                props =>
                (
                    <CustomColumnMenu
                        {...props}
                        columns={this.state.columns}
                        onColumnsSubmit={this.onColumnsSubmit}
                     />
                 )
                 }
     />
 )
 )}

 

[Stefan]

Hello, Jean-Pierre,

Regarding the question and the issue

1) Issue: This occurs because the width is set to undefined or an empty string. If there is not width to be set return the column without this property. Still, we will investigate to make it possible by returning undefined.

2) Question: This can be achieved by setting the current column array retrieved on the Resizing and Reordering events as they contain the information for the current width and the order index.

I made an example demonstrating both:

https://stackblitz.com/edit/react-rxelpy?file=app/main.js

Regards,
Stefan
Progress Telerik