I have a custom button on a Form which invokes a custom Dialog to edit properties of the item on display, that part works fine. However, the Submit button does not enable unless one of properties mapped to a 'Field' controls is edited.
How can I change the allowSubmit value in the Form render properties so the button is enabled when its' only my custom button that is updating the object?
1 Answer, 1 is accepted
Hi, David,
You can set the ignoreModified prop to allow submitting the form without modifying its fields. In addition, you can enable the Submit button based on the click of the custom button. You can do this by setting the `disabled` prop of the submit button to `!allow` where `allow` is the state variable that is modified by the click event of the custom button.
In the below demo, only after clicking the custom button you will be able to click the submit button that submits the form:
If the above information does not help, please send me a StackBlitz example that demonstrates your scenario, and I will be glad to modify it with the needed requirement.
Looking forward for your reply.
Regards, Wissam Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
I understand ignoreModified. Adding my own 'allowSubmit' state to the form is possible (and that's what I did), but I have to explicitly handle onChange for all the form fields to keep that state across the entire form. Yuck.
I found a bit in the docs on Form-Custom Components that was the hint I needed: calling the onChange() handler in the fieldRenderProps passed to the component tripped the renderProps.allowSubmit flag without having onChange handlers all over the form fields.
Hello, David,
Yes, when rendering custom components you sometimes need to handle the onChange event.
In components like the Input, you can directly have the `fieldRenderProps.onChange` set to the `onChange` of the Input (this happens when directly setting `component={Input}` in the Form, but if you have a more complex component, you will need to make its onChange event call the `fieldRenderProps.onChange` and set its value property to the new value.
Here is an example for the TextArea component:
Example for the Grid that calls the `fieldRenderProps.onChange` in its `onDataStateChange` event:
Therefore, this tells the Form that the Field is changed and allows you to submit.
Regards,Wissam
Progress Telerik