MUI ButtonGroup useForm
Hi,
I have a seach from and a grid.
Now i wanted to put a formbutton group with a status in each button.
i used another form with a handlesubmit() and then the buttongroup, but 1 dont know why i cant make the API request on click (each button has type="submit").
I tried a input type="hidden" and others things, but i cant get it working.
Thanks.
7 Replies
Hi @pabloat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, I can provide you with some information on handling form submissions and buttons in refine.
Refine provides an
onFinish hook that lets you override the default configuration of the form submission and define what's sent to the server. You can use this hook to handle the form submission and make API requests. Here's an example of using the onFinish hook:
For more information on handling form submissions in refine, you can refer to these sources:
- Dynamic Forms with React Hook Form - Handling submission (https://refine.dev/blog/dynamic-forms-in-react-hook-form/)
- Save and Continue - Handling submit events on buttons (https://refine.dev/docs/advanced-tutorials/forms/save-and-continue)
If you need more help, please provide more information about your specific use case and the code you're working with.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------Dynamic Forms with React Hook Form | refine
How to build dynamic forms with React hook form in React CRUD apps.
Save and Continue | refine
refine provides you with the necessary methods to add this feature. This feature is familiar to Django users.
<@703699805242916934> kapa.ai is still learning and improving, please let us how it did by reacting below
other-emerald•2y ago
Hey @pabloat,
You can handle the submit function on button clicks. You can see an example here:
https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api
wise-whiteOP•2y ago
i think i missed some info.
i have this: const { dataGridProps, search, filters, sorters } = useDataGrid<
ILead,
HttpError,
ILeadFilterVariables
>({
initialPageSize: 10,
onSearch: (params) => {
const filters: CrudFilters = [];
const { texto, fechaInicio, fechaFin, usuario, estado } = params;
filters.push({
field: "texto",
operator: "eq",
value: texto !== "" ? texto : undefined,
});
const { register, handleSubmit, control } = useForm<
BaseRecord,
HttpError,
ILeadFilterVariables
>({
defaultValues: {
estado: getDefaultFilter("estado.id", filters, "in"), ///filters.find(f=>(f as LogicalFilter).field === 'estado.id')?.value,
texto: getDefaultFilter("texto", filters, "eq"),
fechaInicio: getDefaultFilter("fechaInicio", filters, "eq"),
fechaFin: getDefaultFilter("fechaFin", filters, "eq"),
usuario: getDefaultFilter("usuario", filters, "eq"),
},
});
<Box
component="form"
sx={{ display: "flex", flexDirection: "row", paddingTop: "20px" }}
autoComplete="off"
onSubmit={handleSubmit(search)}
>
<Grid container spacing={2}>
<Grid item xs={12} lg={2}>
<TextField
fullWidth....
i am not undrstanding how the useForm works with useDataGrid
on handleSubmit(search), useForm makes the API call? or useForm passes form values to the useDataGrid?
and then, i dont know how to link this with a buttonGroup that is outside the:
<Box
component="form"
sx={{ display: "flex", flexDirection: "row", paddingTop: "20px" }}
autoComplete="off"
onSubmit={handleSubmit(search)}
>
other-emerald•2y ago
Got it, you can use ‘setFilters’. ‘onSearch’ works with filters no magic under the hood. So, you use setFilters outside of the form to add or remove filter.
wise-whiteOP•2y ago
THANKS!