Conditional Cell Editability & Styling Guide

1. Managing Cell Editability Globally and Dynamically

• Conditional Row Editability: Grid cells can be made selectively read-only at runtime based on arbitrary business rules or live row data.
• Data Integrity Enforcement: When a cell is marked as read-only, it is strictly protected from any data modifications, preventing changes via both standard inline editing and data paste operations.
• Dynamic Property Resolution: You can pass a callback function to the editable property of a column configuration to evaluate cell permissions dynamically for every row. In this example, the "Company Name" and "Contact Name" columns become read-only depending on the value of the "Country" column.

editable: function (ui) {
    // Retrieve the row data and normalize the value for consistent matching
    const country = (ui.rowData.Country || "").toUpperCase();
    
    // The cell remains editable only if the country is NOT present in the restricted list
    return !['SPAIN', 'UK', 'USA'].includes(country);
}

2. Implementing Generic Styles for Disabled Cells

• Leveraging Native Classes via editModel: Instead of manually tracking cell states to apply background colors, you can configure pqGrid to manage this lifecycle natively by enabling the addDisableCls option.
• Automatic Class Assignment: Setting editModel: { addDisableCls: true } instructs the grid engine to automatically append the pq-cell-disable CSS class to every cell where the editable rule evaluates to false.
• Centralized CSS Control: Once the class is globally enabled, you can manage the visual presentation of your disabled cells uniformly across your entire application using simple CSS selectors.

/* styling for cells flagged with the native disable class */
.pq-cell-disable {
    background-color: #ccc; 
}