restricting +rule button #633
Replies: 2 comments 1 reply
-
You can accomplish this with CSS or a custom "+ Rule" button. This tips page in the documentation should help with the concepts, so read that first. The CSS method would be something like this: .queryBuilder > .ruleGroup > .ruleGroup-header > .ruleGroup-addRule {
display: none;
} That will hide the "+ Rule" button at the top level only. If you want to be a little more certain that a "+ Rule" button doesn't show up at the top level, use a custom component like this: const CustomAddRuleAction = (props: ActionWithRulesAndAddersProps) => {
// Don't render anything if this is the root group
if (props.level === 0) {
return null;
}
// Otherwise render as normal
return <ActionElement {...props} />;
};
// Implementation:
<QueryBuilder
fields={fields}
query={query}
onQueryChange={setQuery}
controlElements={{
addRuleAction: CustomAddRuleAction,
}}
/> Also make sure that at least one of the following are true:
Finally, if you really want to lock it down, use the // Return false if the rule is being added to the root group
const onAddRule = (r: RuleType, parentPath: number[]) =>
parentPath.length === 0 ? false : r;
// Implementation:
<QueryBuilder
fields={fields}
query={query}
onQueryChange={setQuery}
controlElements={{
addRuleAction: CustomAddRuleAction,
}}
onAddRule={onAddRule} // <--
/> |
Beta Was this translation helpful? Give feedback.
-
the above example of using a "CustomAddRuleAction" worked fine, but my addRule button styles is not getting applied, i am using QueryBuilderMantine. |
Beta Was this translation helpful? Give feedback.
-
I have a use case where i need the user to first click +group button and then ask him to add rule or nested group inside (to make ui more intuitive)
we can either achieve it by hiding the rule button on top most level and make it available only inside a group (i.e once user clicked +group button)
do you have a better alternative for it.
And if we need to adapt the first approach, what should be the changes to achieve hiding +rule button on top
Beta Was this translation helpful? Give feedback.
All reactions