Hi Aleksandar, 

I was able to implement this through the use of template columns. This solution rely's on storing the selected state on the row information itself (isOrderSelected in my code). Here is what my code looks like

  const handleSelectAllCheckbox = (selectAllState: boolean) => {
    if (ordersGrid?.current) {
      for (
        let i = ordersGrid.current.actualDataSource.firstVisibleIndexRequested;
        i <= ordersGrid.current.actualDataSource.lastVisibleIndexRequested;
        i++
      ) {
        const item = ordersGrid.current.actualDataSource.getItemAtIndex(i);
        ordersGrid.current.selectedItems.remove(item);
        if (selectAllState) {
          ordersGrid.current.selectedItems.add(item);
        }
      }
    }
  };

  const orderCheckBoxHeaderCellUpdating = (header: IgrTemplateHeader, args: IgrTemplateHeaderCellUpdatingEventArgs) => {
    const content = args.content as HTMLDivElement;
    let checkBox: HTMLInputElement;

    let selectedFound = false;
    let nonSelectedFound = false;

    if (ordersGrid?.current) {
      for (
        let i = ordersGrid.current.actualDataSource.firstVisibleIndexRequested;
        i <= ordersGrid.current.actualDataSource.lastVisibleIndexRequested;
        i++
      ) {
        const item = ordersGrid.current.actualDataSource.getItemAtIndex(i);
        if (!!item?.isOrderSelected) {
          selectedFound = true;
        } else {
          nonSelectedFound = true;
        }

        if (selectedFound && nonSelectedFound) {
          break;
        }
      }
    }

    if (content.childElementCount === 0) {
      checkBox = document.createElement("input");
      checkBox.type = "checkbox";
      checkBox.onchange = (ev: Event) => {
        handleSelectAllCheckbox((ev.target as HTMLInputElement).checked);
      };
      content.appendChild(checkBox);
    } else {
      checkBox = content.children[0] as HTMLInputElement;
    }

    checkBox.checked = selectedFound && !nonSelectedFound;
    checkBox.indeterminate = selectedFound && nonSelectedFound;
  };

  const orderCheckboxCellUpdating = (column: IgrTemplateColumn, args: IgrTemplateCellUpdatingEventArgs) => {
    const content = args.content as HTMLDivElement;
    const isOrderSelected = args.cellInfo.rowItem.isOrderSelected;
    let checkBox: HTMLInputElement;
    if (content.childElementCount === 0) {
      checkBox = document.createElement("input");
      checkBox.type = "checkbox";
      content.appendChild(checkBox);
    } else {
      checkBox = content.children[0] as HTMLInputElement;
    }

    checkBox.checked = isOrderSelected;
  };

  const [orderColumns, setOrderColumns] = useState<JSX.Element[]>([]);
  const createOrderColumns = useCallback((orderColumnSettings: ColumnCollection) => {
    const orderColumns: JSX.Element[] = [];

    const header = new IgrTemplateHeader({});
    header.cellUpdating = orderCheckBoxHeaderCellUpdating;

    orderColumns.push(
      <IgrTemplateColumn
        header={header}
        field={"isOrderSelected"}
        cellUpdating={orderCheckboxCellUpdating}
        width="50"
        isColumnOptionsEnabled={false}
        isResizingEnabled={false}
        pinned={PinnedPositions.Left}
        headerText={"Selected"}
      ></IgrTemplateColumn>
    );
    
    //more columns here
    }

Here is what it looks like when rendered:

Hi Charles Cymbor,

We also need the above behavior with the IgrDataGrid i.e. checkbox in the grid. But unable to achieve the same behavior, it would be helpful if you provide some sample application where this is implemented. The above code is not working as expected.