This is a migrated thread and some comments may be shown as answers.

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

1 Answer 521 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 31 Oct 2020, 08:53 PM

    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

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 02 Nov 2020, 02:41 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Eric
Top achievements
Rank 1
commented on 18 Oct 2021, 08:22 PM

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> { /*...*/ }

Tags
General Discussions
Asked by
Jason
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or