like-gold•2y ago

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

kapa.ai•2y ago

Hi @pabloat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- 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:

onFinish={(values) => {
  // Your custom logic and API request here
});

onFinish={(values) => {
  // Your custom logic and API request here
});

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.

kapa.ai•2y ago

<@703699805242916934> kapa.ai is still learning and improving, please let us how it did by reacting below

ugly-tan•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

like-goldOP•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)} >

ugly-tan•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.

like-goldOP•2y ago

THANKS!