Replies
0
This works for getting all the filtered row:
for (let i = 0; i < grid.actualDataSource.actualCount; i++) {
const item = grid.actualDataSource.getItemAtIndex(i);
}
0
Hi Michael,
I thought this was working but it actually only works for what is visible on the screen. I need to get all the rows that are currently in the table after filtering.
0
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:
