Column Freeze (Locked property) with Cell property not working

7 posts, 0 answers
  1. arun
    arun avatar
    4 posts
    Member since:
    Dec 2019

    Posted 14 Jan 2020 Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 14 Jan 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. arun
    arun avatar
    4 posts
    Member since:
    Dec 2019

    Posted 14 Jan 2020 in reply to Stefan Link to this post

    Thank You!
  4. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 21 Feb 2020 Link to this post

    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')
    );

     

  5. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 21 Feb 2020 in reply to Len Link to this post

    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>
    )

  6. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 24 Feb 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 24 Feb 2020 in reply to Stefan Link to this post

    Thank you... You're a superstar..!
Back to Top