Getting error when using kendo react data grid "Property 'field' does not exist on type 'IntrinsicAttributes & GridColumnProps

[Surrendra]

I am creating SPFx app. Here is the code : 

React Version : 16.9.0

Kendo versions :

"@progress/kendo-data-query": "^1.5.6",

    "@progress/kendo-licensing": "^1.2.2",

    "@progress/kendo-react-animation": "^5.1.0",

    "@progress/kendo-react-common": "^5.1.0",

    "@progress/kendo-react-data-tools": "^5.2.0",

    "@progress/kendo-react-excel-export": "^5.1.0",

    "@progress/kendo-react-grid": "^5.1.0",

    "@progress/kendo-react-intl": "^5.1.0",

    "@progress/kendo-react-pdf": "^5.1.0",

    "@progress/kendo-theme-default": "^5.3.0",

 

import * as React from "react";

import { Grid, GridColumn, GridExpandChangeEvent, GridDetailRow, GridToolbar, GridColumnProps } from '@progress/kendo-react-grid';

import { process, State, DataResult } from '@progress/kendo-data-query';

import'@progress/kendo-theme-default/dist/all.css';

 

export const BizpSettingGrid: React.FunctionComponent<IBizpSettingGridProps> = (

  props: React.PropsWithChildren<IBizpSettingGridProps>

) => {

  const [items, setItems] = React.useState([]);

  const [isLoading, setIsLoading] = React.useState(false);

  const [showAddButton, setShowAddButton] = React.useState(true);

 

  const getKendoColumns=()=>{

    // let cols=props.viewFields.map((itm, i)=> <GridColumn  key={i} sortable={true} groupable={true} filterable={true} /> )

    //let cols=props.viewFields.map((itm, i)=> <GridColumn field ={itm.name} title={itm.displayName} key={i} sortable={true} groupable={true} filterable={true} /> )

    // return cols;

    let cols: GridColumnProps[]=[

      { field: 'ProductID', title: 'ID', filter: 'numeric' },

      {

          field: 'ProductName', title: 'Product Name',

          reorderable: false

      },

      {

          field: 'QuantityPerUnit', title: 'Quantity Per Unit',

          groupable: false

      },

      {

          field: 'UnitsInStock', title: 'Units In Stock', filter: 'numeric',

          reorderable: false,

          groupable: false

      },

      { field: 'Category.CategoryName', title: 'Category Name' }

  ];

   

  }

 

  return (

    <Panel

      styles={{

        commands: {

          backgroundColor: "[theme:themePrimary, default:#0078d7]",

          marginTop: 0,

        },

        scrollableContent: { overflow: "hidden" } /* Add: Jul-01-2021 */,

      }}

      className={`${styles["PanelWrapper"]}`} /* Add: Jul-01-2021 */

      id={props.panelId}

      isOpen={props.showPanel}

      onDismiss={props.onDismissPanel}

      type={PanelType.large}

      closeButtonAriaLabel="Close"

      headerText={props.panelHeading}

      onOuterClick={() => undefined}

      onOpen={() => getItems()}

      // isBlocking={false}

    >

      {/* {props.selectedItem.itemId ==0 &&  ( */}

      {isLoading && <BizpSpinner message="Please wait loading records..."></BizpSpinner>}

      {!isLoading && (

        <React.Fragment>

          <Toolbar actionGroups={toolBarActionGroups} find={false} />

          <Grid

      style={{

        height: "400px",

      }}

     

      data={items}

    >

     

      {getKendoColumns()}

    </Grid>

         

        </React.Fragment>

      )}

 

    </Panel>

  );

};

[Stefan]

Hello,

The field is part of the GridColumnProps interface:

https://www.telerik.com/kendo-react-ui-develop/components/grid/api/GridColumnProps/#toc-field

Could you please let me know and TypeScript version of the project. In general, sending the package.json can prove helpful.

Regards,
Stefan
Progress Telerik

[Lindsay]

I'm all of the sudden getting the same error.  I was trying to add a custom filter UI and I kept getting an error that GridColumnMenuFilterUIProps wasn't an export from kendo-react-grid, even though it worked in another web part.  I deleted and did an npm install and now I'm getting errors on all sorts of things, including Column field.

[Stefan]

Hello,

Could you please share the package.json of the application and a tsconfig file?

That will help us see if a combination of versions can lead to that error.

[Lindsay]

I put in a ticket, 1561950, for the error, but the only thing that fixed it was copying the files over to a brand new folder/project.

[Surrendra]

It resolves when I install following package :

"@progress/kendo-react-data-tools": "^5.2.0",

[Konstantin Dikov]

Hi Surrendra,

Thank you for sharing your finding. Hopefully it will be helpful for other developers facing the same issue.