Put a React Link Element Inside Your Grid Column - How? Example?

[Jason]

    Hello,

  I need to stick a React Link element inside a column in your React Grid.  I have tried setting the widget on the cell prop as your documentation suggests, but cell is not correctly seen.  Do you have a quick example of how I can do this or a link to documentation that is current and correct?

  I have your Grid populated with data and in the same column in each row I want to clickable Link element that will navigate to a View page to see the details in a nice form of the row on which the Link was clicked.

  Thanks,

  Jason

[Stefan]

Hello, Jason,

This can be done using the cell property of the Grid column:

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

Then in the props, there is information for the row data, and we can use it to make dynamic links based on the name, id, or any other field. The example is made for the ID column as with this data is more link friendly:

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

Also, you can open a Form to edit the clicked item directly in our Dialog component as shown in this demo:

https://www.telerik.com/kendo-react-ui-develop/components/grid/editing/editing-external-form/

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Eric]

The example provided works great when you are using inline functions for the subcomponents:

<GridColumn field="Discontinued" cell={props => (
  <td>
    <input type="checkbox" checked={props.dataItem[props.field!]} />
  </td>
</GridColumn>

I tried to do it with a component. Here is the updated line from render() from above plus part of the component:

<GridColumn field="Discontinued" cell={checkboxColumn} />
//...
class checkboxColumn {
  render() {
    return (
      <td>
        <input type="checkbox" checked={this.props.dataItem[this.props.field]} />
      </td>
    );
  }
}

I can't seem to get the casting of "props" to work correctly. Maybe it is that I can't find the right way to specify the Kendo classes, or more likely I am not sure where to import them from.

class checkboxColumn extends Component<CheckboxProps, any> { /*...*/ }
//or
class checkboxColumn extends kendo.ComponentType<kedo.GridCellProps, any> { /*...*/ }

[Stefan]

Hello, Eric,

The cell prop is accepting a React component. This can be both a functional component or a class component.

If there is a specific issue, please let us know and we will be happy to take a look.