0

It seems that the selection events are not being passed through custom cell renderers. My goal is I want to change the background color of every cell in my grid (based on the values), and also be able to handle selection events. I've modified the example in the docs here:

https://www.telerik.com/kendo-react-ui/components/grid/selection/

To include a background color on the Units on Order column. You'll notice that that column does not participate in selections. I created a stackblitz example here:

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

All I changed was I added a cellWithBackground function and assigned it to the column UnitsInStock. Here is that function

const cellWithBackGround = props => {
 const examplePrice = true;
 const style = {
   backgroundColor: "rgb(243, 23, 0, 0.32)"
 };
 const field = props.field || '';
 return <td style={style}>
    {props.dataItem[field]}
    </td>;
};

I did find an example that was close but it I couldn't get it to work with functional components. It just worked with classes which I don't use. So, please provide examples or references on that support Functional Components.

Peter Kellner
  • 14,748
  • 25
  • 102
  • 188

1 Answers1

0

H Peter,

Thank you for sharing the code. By completely replacing the entire cell's infrastructure, it will no longer respond to anything from the Grid.

Specifically, I'm referring to this line in the function. It only returns a <td> with the field's name, it abandons the rest of the properties of the element.

//cell returned form the function
return <td style={style}>
    {props.dataItem[field]}
    </td>;

At that point, it's basically a dead cell. It will not respond to events, data actions, etc because it is missing all the parts that the Grid requires to interact with it.

Further Guidance

As I mentioned in my Twitter reply, you can get guidance for the Kendo Engineers to help you from here.

I think there's a better way to handle this by using styling instead of manually handling the DOM elements directly. At the very least, you need to return the complete infrastructure of the cell and they can assist with that.

Lance McCarthy
  • 1,884
  • 1
  • 20
  • 40
  • Thanks @Lance, I was going down that path and could only figure out how to style the entire row (using className assigned to the GridColumn). I couldn't figure out how to style an additional cell. It would be really helpful to see the default implementation of the cell renderer so if I do go down the path of the custom cell rendererer I have a starting place besides just blow away all of KendoUI on that cell. – Peter Kellner May 21 '21 at 21:17
  • 1
    In your support ticket, definitely ask the Kendo team for an example or KB article. It's likely they already have one. If not, then they'll write a PoC example (after which I'll ask them to make a new KB from that PoC). – Lance McCarthy May 23 '21 at 20:21
  • They left me a nice note saying they will do that (and that it should have worked without me having to do anything special). I know today is a holiday for them so I don't expect to hear back until tomorrow. – Peter Kellner May 25 '21 at 01:05