Problem with KendoReact Form component in Dialog/Windows component

[Tomasz]

Hello,
Is it possible to use the KendoReact Form component in a Dialog/Window so that a WindowActionsBar with buttons is placed at the bottom of the dialog?
At the moment, for the dialog to work correctly, it must consist of two blocks: <container/content><actions/WindowActionsBar>. In such a case, actions bar is glued to the bottom of the window.

Unfortunately, when using the KendoReact Form component, the entire form is in a single form block. The actions bar is treated as content and is not at the bottom of the screen.

Best,
Tomek 

[Ina]

Hi, Tomasz,

You are correct that the handleSubmit function is not called when it is clicked, please accept my apologies for the oversight. You can achieve the desired behavior using custom CSS styling for the Form component and use the Form submit/cancel buttons. I have modified the previous example in order to showcase this approach:

• https://stackblitz.com/edit/react-mnvupiwe-qa4zybyk?file=index.html 

This way the buttons can be positioned exactly per your needs. Please let me know in case further assistance is required and I will gladly help.

Regards,
Ina
Progress Telerik

[Tomasz]

Hi, Ina,
Thanks for your help. The solution provided works correctly.

Regards,
Tomek

[Tomasz]

Hi, Ina

One more question. Is it possible to improve the CSS styles so that in the case of a large number of components, its content does not overlap the action bars? Attached are examples of a correct and incorrect long window.

Regards,
Tomek

[Ina]

Hi, Tomasz,

Thank you for the images.

In this scenario, we are using a custom CSS styling to achieve the desired behavior. You can customize the CSS to fit your specifications. I have modified the previous Stackblitz code to demonstrate an example of custom buttons styling. You might need to adjust the CSS to fit your specific application needs:

• https://stackblitz.com/edit/react-mnvupiwe-yuoyrrzz?file=app%2Fapp.jsx 

Hope that was helpful. Let me know if you have any other questions.

Regards,
Ina
Progress Telerik

[Tomasz]

Hi, Ina,

Unfortunately, this is not a good solution. WindowActionBar is not glued to the window. The window is draggable, and the actions bar is in one place of the screen.

Regards,
Tomek

[Ina]

Hello, Tomasz,

After trying different approaches with both CSS and state management, I wasn't able to find a solution that would properly position the buttons and still allow the form to be submitted with the current implementation of the component. Since this behavior should be available out of the box and we are constantly trying to improve our product I have logged an enhancement in our official repo that will allow for easier positioning of the buttons

• https://github.com/telerik/kendo-react/issues/2996 

I recommend subscribing to the GitHub item. This way, you will receive notifications once we make any progress, since we will update it directly. 

Please let me know if I can assist you further.

Regards,
Ina
Progress Telerik

[Tomasz]

Hello Ina, I think I found a solution. I've added it to github.

Regards,
Tomek

[Ina]

Hello, Tomasz,

Thank you for your example. It is a great solution. We will create a related KB article, so I will close the public GitHub issue as fixed.

[Ina]

Hello, Tomasz,

Thank you for reaching out to us.

You can achieve the desired behavior using the Button inside the WindowActionsBar component. I have prepared the example below to demonstrate the behavior. In the code, we use a state variable to set the `disabled` property of the Window button based on the `formRenderProps`.

• https://stackblitz.com/edit/react-mnvupiwe-urjombji?file=app%2Fapp.jsx 

I hope that was helpful, please let me know if you need more assistance.

Regards,
Ina
Progress Telerik

[Tomasz]

Hello, Ina
Thank you for the feedback.

Unfortunately, the example provided does not seem to work properly. The submit button is out of the form and the handleSubmit function is not called when it is clicked.

Regards,
Tomek