Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
590
Disabling particular cell in Infragistics React data grid
posted

Hi

I want a small clarification on one use case related to IgrDataGrid (https://es.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/overview).

I know there is a column property  'Is editable' which allows the grid column to be editable but I want certain rows to have this functionality and not the whole column. Please suggest ways to achieve this. 

Hoping for a positive response.

Thanks!!!

  • 34810
    Offline posted

    Hello Shubham,

    I have been investigating into the behavior you are looking to achieve in this case, and the editable functionality of the columns of the IgrDataGrid is only configurable at the column level. As such, my best recommendation in this case would be to toggle this programmatically. You can do this by using the activeCellChanged event of the IgrDataGrid. The following is an example handler for this event:

        public onActiveCellChanged(s: IgrDataGrid, e: IgrGridActiveCellChangedEventArgs){
            let newCell = e.newActiveCell;       
            let item = this.grid.actualDataSource.getItemAtIndex(newCell.rowIndex);
            let columnKey = newCell.columnUniqueKey;

            let column;

            for(let i=0; i<this.grid.actualColumns.count; i++){
                let col = this.grid.actualColumns.item(i);
                if(col.field == columnKey){
                    column = col;
                    break;
                }
            }

            column.isEditable = false;
        }

    In the above code, the column that owns the cell will be stored in column, and you can get the data item to the row that owns the cell from the getItemAtIndex above. As long as there is something on the data item that determines whether or not you want the cell to be editable, you can use that property on “item” to set the column.isEditable property.

    Please let me know if you have any other questions or concerns on this matter.