How to get KendoUI Grid to work with custom cell renderer and selection

Question

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.

Answer 1

In TypeScript this worked for me in ReactKendo Grid

const MyDataCustomCell = (props: GridCustomCellProps) => (
    <CustomCell {...props} color="skyblue" />
  );

Was trying to customize a date display and this worked in Typescript though its based on some other sample those gave error in typescript but this is fully working

const StringDateCell = ( props: GridCustomCellProps ) => { 
    const field = props.field || '';
    const value = props.dataItem[field];
    const [year, month, day] = value.split('T')[0].split('-');
    const time_part = value.split('T')[1];
  
    return (
          <td>
              {`${year}/${month}/${day}`}
          </td>
      )
  }

and in column call assign to cells

<GridColumn field="Date" title="Date" cells={{data: StringDateCell}} />

Answer 2

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.