is there a way to disable the checkbox in the datagrid component?

Thank you for your reply, Filip.

What i wanted to do is disable the checkboxes on load or after the grid has been rendered. Is there any event listener or hook for me to inject this logic?  

I tried using column's cell prop to customize the cell content. The code below works but the "checkbox selection" doesn't work. When the header checkbox is clicked it, the row's checkboxes are not selected.

Is there a way to return the default `<td>` element,  and just disable the checkbox in it? Thanks

const CustomCell = (props: GridCellProps) => {
      console.log(props);

      return (
        <td role="gridcell" >
          <input type="checkbox" className="k-checkbox" value={props.dataItem.memberId} />
            <label className="k-checkbox-label"></label>
        </td>
      )
    }

// Grid Component
<Grid>
<Column 
cell={CustomCell} 
...
/>

</Grid>

Hi, Rex,

Using the cell property will allow the developer to render the default td with a custom input that can be disabled, as you have found out. 

In addition to that in order for the rendered checkboxes to be selected a custom selection column has to be made and the rendered checkbox has to be based on the item value. Here is an example that showcases this approach:

https://stackblitz.com/edit/react-igh2gv-1b7bg7?file=app/main.jsx

In case this is not enough for you to transfer to your real-time application, can you provide a runnable example that reproduces your behavior so that I can inspect further?

I hope this helps.

Regards,Filip

I was able to simplify the implementation by using the checkbox component. 

The code below checks if the data is available, in this case it's email. If the email is not available, it disables the the checkbox. 

The only issue with this approach is that the header checkbox will not be ticked if there's one record that doesn't have email. 

    const CustomCell = (props: GridCellProps) => {
      const field = props.field || "";
      const value = props.dataItem[field];
      const navigationAttributes = useTableKeyboardNavigation(props.id);
      
      const hasEmail = (props.dataItem.email && props.dataItem.email !== '')
      return (
        <td
          colSpan={props.colSpan}
          role={"gridcell"}
          aria-colindex={props.ariaColumnIndex}
          aria-selected={props.isSelected}
          {...{
            [GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
          }}
          {...navigationAttributes}
        >
            
          <Checkbox value={(hasEmail) ? value : null} disabled={!hasEmail} />
        </td>
      
      )
    }

Hello, Rex,

If the only issue is that the header checkbox is not ticked on render, I can advise using the checked property to mark it as checked.

I hope this helps.