Column resize & order by code

2 posts, 0 answers
  1. Jean-Pierre
    Jean-Pierre avatar
    15 posts
    Member since:
    Dec 2018

    Posted 30 Jan 2019 Link to this post

    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}
                         />
                     )
                     }
         />
     )
     )}

     

  2. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 31 Jan 2019 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top