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

2 Answers 966 Views

Grid

Surrendra asked on 07 Apr 2022, 09:47 AM

KendoGridColIssue1.PNG

KendoGridColIssue2.PNG

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

2 Answers, 1 is accepted

Lindsay

commented on 18 Apr 2022, 07:08 PM

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

commented on 19 Apr 2022, 04:46 AM

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

commented on 21 Apr 2022, 05:04 PM

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

Konstantin Dikov

commented on 22 Apr 2022, 08:40 AM

Hi Surrendra,

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

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

2 Answers, 1 is accepted