Checkbox row selectors?

Is it possible to have Checkbox column to select one or multiple rows?

Similar to this example for Angular: https://pt-br.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-selection

Hello Aleksandar,

If you are particularly looking for row selector in React grid then i would say Angular grid is different then react grid, so far we have not implemented grid row selector feature in the React.

That would be a new feature idea, which you can suggest for future versions (or vote for existing ones) at < http://pt-br.infragistics.com/…/ignite-ui-for-react >.

Submitting your idea will allow you to communicate directly with our product management team, track the progress of your idea at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.

Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. You can also link back to this thread for additional details.

Thank you in advance to submitting your product idea.

Regards,

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(
      
    );
    
    //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.