Adjusting the Behaviour of DataGridHasMany filter

[kausik10]

Hi, I am using the DataGridHasManyFilter to filter out files based on flags. However, I am running into an issue where by default I am shown the N/A flag as shown in picture.

I want to be able to completely remove out the N/A and on selecting XML, it should list out all the files except marked PDF. Meaning I will have only 2 filters and upon selecting the second filter, it will display all the files except marked as PDF.

Does the N/A filter come by default? Because if I do something like shown below, I still get the N/A shown.

I was wondering, if DataGridHasManyFilter provides such flexibility.

<DataGridHasManyFilter
                                            field="flags"
                                            label="Filtr"
                                            options={{
                                                entityName: "FileFlag",
                                                filter: {
                                                    name: {
                                                        not: { eq: "N/A" },
                                                    },
                                                },
                                            }}
                                        >
                                            <Field field={"name"} />
                                        </DataGridHasManyFilter>

Thank you!

[matej21]

Hi,

The "N/A" filter appears automatically to filter items that have no flags attached. Currently, there is no built-in prop to disable it in DataGridHasManyFilter.

However, this behavior comes from the UI library, which is copied into the project and defined in datagrid/filters/relation.tsx like this:

export const DataGridRelationFilteredItemsList = ({ children }: {
	children: ReactNode
}) => (
	<>
		<DataViewRelationFilterList>
			<DataViewRelationFilterTrigger action={'unset'}>
				<DataGridActiveFilterUI>
					{children}
				</DataGridActiveFilterUI>
			</DataViewRelationFilterTrigger>
		</DataViewRelationFilterList>
		<DataViewNullFilterTrigger action={'unset'}>
			<DataGridActiveFilterUI>
				<span className={'italic'}>{dict.datagrid.na}</span>
			</DataGridActiveFilterUI>
		</DataViewNullFilterTrigger>
	</>
)

To remove the "N/A" filter, you can either:

1. Completely remove the <DataViewNullFilterTrigger> from DataGridRelationFilteredItemsList.
2. Modify DataGridHasManyFilter to propagate a prop allowing null filtering to be disabled.

Let me know if you need further clarification!

[kausik10]

Hi, It was no the DataViewNullFilterTrigger that solved the issue.
However, commenting out the DataGridNullFilter from the DataGridRelationFilterControls removed the N/A filter being displayed.

export const DataGridRelationFilterControls = ({
    children,
    queryField,
}: {
    queryField?: DataViewUnionFilterFields;
    children: ReactNode;
}) => {
    const filterFactory = useDataViewRelationFilterFactory(
        useDataViewFilterName()
    );
    return (
        <>
            <DataViewRelationFilterOptions queryField={queryField}>
                <SelectListInner filterToolbar={<SelectDefaultFilter />}>
                    <DataGridRelationFilterSelectItem
                        filterFactory={filterFactory}
                    >
                        {children}
                    </DataGridRelationFilterSelectItem>
                </SelectListInner>
            </DataViewRelationFilterOptions>
            {/* <div>
                <DataGridNullFilter />
            </div> */}
        </>
    );
};

Thank you!