Hello, the issue that I'm having is with Template not ruleTemplate. Here is an example of the code that I am using.
function HomeScreen() {
const [state, setState] = React.useState({});
console.log(state);
return (
<PEQueryBuilder
id="home-query-builder"
value={state}
onChange={({ value }) => setState(value)}
/>
);
}
function PEQueryBuilder({ id = "queryBuilder", value, onChange, ...props }) {
const ref = React.useRef();
function handleRuleChange(args) {
if (ref.current) {
onChange({ value: ref.current.getRules() });
}
}
return (
<Box>
<QueryBuilderComponent
ref={ref}
id={id}
dataSource={dataSource}
rule={!value || typeof value !== "object" ? {} : value}
change={handleRuleChange}
sortDirection="Ascending"
{...props}
>
<ColumnsDirective>
<ColumnDirective field="1001" label="State" type="string" />
<ColumnDirective field="1002" label="Creation Date" type="date" />
<ColumnDirective
field="1003"
label="Accounting Month"
type="string"
template={(args) => <Template queryBuilderId={id} {...args} />}
/>
<ColumnDirective field="1004" label="Export Date" type="date" />
</ColumnsDirective>
</QueryBuilderComponent>
</Box>
);
}
function Template({ queryBuilderId, values, ruleID, ...props }) {
const [openModal, setOpenModal] = React.useState(false);
const inputRef = React.useRef();
const queryRef = React.useRef(
getComponent(document.getElementById(queryBuilderId), "query-builder")
);
function openLookupModal() {
setOpenModal(true);
}
const keyPressOpenLookup = (e) => {
if (e && e.key === "F4") {
openLookupModal();
}
};
function handleChange(args) {
console.log(args);
if (queryRef.current) {
let elem = document.getElementById(ruleID).querySelector(".e-rule-value");
queryRef.current.notifyChange(args.value, elem, "value");
}
}
function handleClose() {
setOpenModal(false);
}
function handlePopupApply() {
if (queryRef.current) {
let elem = document.getElementById(ruleID).querySelector(".e-rule-value");
queryRef.current.notifyChange("April", elem, "value");
handleClose();
}
}
return (
<>
<div
onKeyUp={keyPressOpenLookup}
style={{ display: "flex", position: "relative" }}
>
<TextBoxComponent
ref={inputRef}
value={values ?? ""}
change={handleChange}
{...props}
/>
<IconButton
onClick={(e) => {
e.stopPropagation();
openLookupModal();
}}
style={{
padding: "4px",
margin: 0,
position: "absolute",
top: 0,
right: 0,
}}
>
<Search style={{ fontSize: "1.25rem" }} />
</IconButton>
</div>
<Dialog
open={openModal}
onClose={handleClose}
maxWidth="md"
fullWidth
scroll="paper"
>
<DialogTitle>Accounting Month</DialogTitle>
<DialogContent>
<DialogActions>
<Button onClick={handlePopupApply} color="secondary">
Apply
</Button>
<Button onClick={handleClose} color="secondary">
Cancel
</Button>
</DialogActions>
</DialogContent>
</Dialog>
</>
);
}
