Column resize in grid stopped working when package is updated

4 posts, 0 answers
  1. Mukesh
    Mukesh avatar
    61 posts
    Member since:
    May 2019

    Posted 12 Mar 2020 Link to this post

    Column resize in grid stopped working when package is updated. I can see that working in 

    @progress/kendo-react-grid": "^3.4.1" but it is not working in  "@progress/kendo-react-grid": "^3.11.0",

     

    Is there any thing i need to do on that.

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 12 Mar 2020 Link to this post

    Hello, Mukesh,

    I made an example with version 3.11.0 and the resizable property is still working:

    https://stackblitz.com/edit/react-wxwkxq?file=app/main.jsx

    Is it possible to share the Grid configuration, as the issue may be visible on in a specific combination of properties?

    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
  3. Mukesh
    Mukesh avatar
    61 posts
    Member since:
    May 2019

    Posted 12 Mar 2020 in reply to Stefan Link to this post

    import { Grid, GridColumn, GridColumnProps } from "@progress/kendo-react-grid";
    import React, { ReactElement } from "react";
    let columns: GridColumnProps[] = [
      { "field": "dbKey", "title": "DBKey", "filter": "numeric", "filterable": false },
      { "field": "name", "title": "Name", "filter": "text", "filterable": false },
      { "field": "width", "title": "Width", "filter": "numeric", "filterable": false },
      { "field": "depth", "title": "Depth", "filter": "numeric", "filterable": false }
    ]
    const baseGridData = [
      {
        "category": "Nail Care",
        "name": "16' Nail Care",
        "height": 78.0,
        "width": 192.0,
        "depth": 12.0,
        "dbKey": 1,
        "dbCurrentUser": "ckbadmin",
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Cases and Trays",
        "name": "4' Cases",
        "height": 78.0,
        "width": 48.0,
        "depth": 18.0,
        "dbKey": 2,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Travel Accessories",
        "name": "8' Trial and Travel",
        "height": 78.0,
        "width": 96.0,
        "depth": 18.0,
        "dbKey": 3,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Travel Accessories",
        "name": "4' Travel",
        "height": 78.0,
        "width": 48.0,
        "depth": 18.0,
        "dbKey": 4,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Baby Bath",
        "name": "12' Baby Care",
        "height": 78.0,
        "width": 144.0,
        "depth": 24.0,
        "dbKey": 5,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Eye Care",
        "name": "4' Eye Care",
        "height": 78.0,
        "width": 88.25,
        "depth": 0.0,
        "dbKey": 6,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Safety",
        "name": "4' Safety",
        "height": 63.0,
        "width": 48.0,
        "depth": 18.0,
        "dbKey": 7,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Brace and Bandage",
        "name": "4' Bandage",
        "height": 78.0,
        "width": 48.0,
        "depth": 18.0,
        "dbKey": 8,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Vaporizers",
        "name": "12' Vaporizers",
        "height": 78.0,
        "width": 144.0,
        "depth": 18.0,
        "dbKey": 9,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Oral Care",
        "name": "8' Oral and Denture Care",
        "height": 78.0,
        "width": 96.0,
        "depth": 18.0,
        "dbKey": 10,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Oral Care",
        "name": "16' Mouthwash",
        "height": 78.0,
        "width": 192.0,
        "depth": 18.0,
        "dbKey": 11,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Diabetic",
        "name": "4' Diabetic",
        "height": 78.0,
        "width": 48.0,
        "depth": 18.0,
        "dbKey": 12,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Deodorant",
        "name": "16' Deodorant",
        "height": 78.0,
        "width": 192.0,
        "depth": 18.0,
        "dbKey": 13,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Eye Care",
        "name": "12' Eye Care",
        "height": 78.0,
        "width": 144.0,
        "depth": 18.0,
        "dbKey": 14,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Foot Care",
        "name": "12' Foot Care",
        "height": 78.0,
        "width": 144.0,
        "depth": 18.0,
        "dbKey": 15,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Skin Care",
        "name": "12' Skin Care",
        "height": 78.0,
        "width": 144.0,
        "depth": 18.0,
        "dbKey": 16,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Oral Care",
        "name": "20' Oral Care",
        "height": 78.0,
        "width": 240.0,
        "depth": 18.0,
        "dbKey": 17,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "First Aid",
        "name": "12' First Aid",
        "height": 78.0,
        "width": 144.0,
        "depth": 18.0,
        "dbKey": 18,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Feminine Care",
        "name": "28' Feminine Care",
        "height": 78.0,
        "width": 336.0,
        "depth": 24.0,
        "dbKey": 19,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      },
      {
        "category": "Hair Care",
        "name": "28' Shampoo and Hair Care",
        "height": 78.0,
        "width": 336.0,
        "depth": 20.0,
        "dbKey": 20,
        "dbCurrentUser": null,
        "dbstatus": 3,
        "selected": false
      }
    ]

    const Home = (): ReactElement<any> => {
      return (
        <div >
          <Grid
            pageable={false}
            filterable={true}
            sortable={true}
            data={baseGridData}
            resizable >
            {columns.map((column: GridColumnProps) => {
              return (
                <GridColumn {...column} key={column.field} />
              );
            })}
          </Grid>
        </div>
      );
    }


    export default Home
  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 12 Mar 2020 Link to this post

    Hello, Mukesh,

    Thank you for the code.

    I used the same code and made an example.

    The resizing is working as expected in it:

    https://stackblitz.com/edit/react-deniah?file=app/main.jsx

    Please check if deleting the node_modules (rm -rf node_modules) and installing them again will fix it, as sometimes packages get cached, and this can cause issues.

    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