Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 31 Jan 2022 08:53 by ADMIN
Shannon
Created on: 30 Jan 2022 09:44
Category: KendoReact
Type: Feature Request
1
Allow defining displayFunction to GridColumn

Imaging a GridColumn field that is a simple object {name:"My Item", value: 123}. It would be great to be able to define properties of the object as what to display without having to build a custom renderer.

displayField/displayFunction as a callback function with the fieldName of the columns and the dataItem of the row as parameters

const nameDisplay = (field, dataItem) => {

   return "some value"

}

...

<GridColumn field={"name"} displayFunction={nameDisplay}


 

 

1 comment
ADMIN
Konstantin Dikov
Posted on: 31 Jan 2022 08:53

Just wanted to include the current solution for re-using the built-in TD elements and editors and change only the content of the cells:

import {
  Grid,
  GridColumn as Column,
  GridToolbar,
  GridEditCell,
  GridCell,
} from '@progress/kendo-react-grid';

const myCustomCell = (props) => {
  if (props.dataItem.inEdit) {
    return GridEditCell({ ...props, key: props.columnIndex });
  } else {
    let defaultCell = GridCell({ ...props, key: props.columnIndex });
    const children = 'custom content'; //here you can define the custom content of the cell
    return React.cloneElement(defaultCell, [props], [...children]);
  }
}

      <Column
        field="UnitsInStock"
        title="Units"
        editor="numeric"
        cell={myCustomCell}
      />

Regards,
Konstantin Dikov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category