Can't select text on a cell


I have the following grid on my webpage

var columnDefinitions = [
{ headerText: "Work Order Number", width: "140px", key: "WorkOrderNumber" },
{ headerText: "Work Order Description", width: "250px", key: "WorkOrderDescription" },
{ headerText: "Asset Reference", width: "150px", key: "SPN" }



autoGenerateColumns: false,
height: "400px",
width: "680px",
dataSource: createdWorkOrders,
primaryKey: "WorkOrderNumber",
dataSourceType: "array",
dataRendered: function () { common.styleGridHeaders("#createdWorkOrdersGrid", columnDefinitions); },
columns: columnDefinitions,
features: []


When this grid is displayed the user wants to be able to highlight the text with the mouse cursor, so he is able to copy it. However, the infragistic grid does not let me select the text inside of a cell. This is very frustrating as it should be something very simple.

I am using the bootstrap4 theme.