Column Freeze (Locked property) with Cell property not working

[arun]

The "locked" property of the Grid Column which freezes the columns is not working when i introduce the "cell" property to the column.

Can someone help me with this issue?

[Stefan]

Hello,

This is because the locked columns depend on a className that we are adding to the td elements.

When a custom cell is used, the class has to be added programmatically.

The needed className is part of the cell props:

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

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[arun]

Thank You!

[Len]

I'm sorry but I still can't get it to work. I changed your example to add my own style and then it doesn't work.

Where am I going wrong?

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import products from './products.json';
const CustomLockedCell = ({dataItem, style, className}) => (
   <td style={{
        backgroundColor: dataItem.stockfree < 0 ?
            "rgb(243, 23, 0, 0.32)" :
            "rgb(55, 180, 0,0.32)"
    }} className={className}> {dataItem.ProductID} </td>
)
class App extends React.Component {
    render() {
        return (
            <div>
                <Grid
                    style={{ height: '400px', width: '500px' }}
                    data={products}
                    reorderable
                >
                    <Column cell={CustomLockedCell} field="ProductID"  title="ID" width="45px" locked />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" width="90px" />
                    <Column field="UnitsInStock" title="In stock" width="90px" />
                    <Column field="UnitsOnOrder" title="On order" width="90px" />
                    <Column field="Discontinued" width="120px" locked={true} />
                    <Column field="QuantityPerUnit" title="Additional details" width="250px" />
                </Grid>
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

 

[Len]

Update... (not stockfree.... but ProductID )

const CustomLockedCell = ({dataItem, style, className}) => (
   <td style={{
        backgroundColor: dataItem.ProductID < 0 ?
            "rgb(243, 23, 0, 0.32)" :
            "rgb(55, 180, 0,0.32)"
    }} className={className}> {dataItem.ProductID} </td>
)

[Stefan]

Hello, Len,

Thank you for the code.

The reason is that the styles are also needed, and in this case, we replace them only with the custom background:

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

Also, please have in mind that making this column with a transparent background will result in the scrolled columns showing under the locked one.

Regards,
Stefan
Progress Telerik

[Len]

Thank you... You're a superstar..!