Best practice to implement settings window for grid

[Kaan]

Hi!

I want to achieve following:

I have a Kendo grid with a button in its toolbar, which opens a small modal Kendo window (referred as dialog), where I can save, load and delete several user-defined grid settings (http://demos.telerik.com/aspnet-mvc/grid/persist-state).

I am using ASP.NET MVC C# with a ViewModel for the dialog's form, but I think this is a very general question. That's why I posted this question into the Kendo UI forum.

 

Right now my implementation looks like this:

1. Click on the grid toolbar button creates a small dialog with an iframe

2. In this iframe a simple html page with a few combobox/dropdown and button components is loaded. This page gets the current grid settings (kendo.stringify(grid.getOptions());) posted in its http request (in case the user wants to save the current grid settings on the server).

3. The user can cancel the dialog through clicking on its x icon, which is in the title bar

4. or can perform any load/save/delete grid settings operation

5. When an operation is successful, the dialog shall be closed. This is achieved via returning a small bit of javascript from the server in the dialog's iframe. This javascript calls some javascript of the parent window: for example it tells the parent window to reload and apply a specific grid setting from the server (if the operation was to load an existing grid setting), and to close the dialog.

 

I feel like the way I implemented this dialog seems to be very complicated and not very clean. It feels annoying to load a complete page into a dialog's iframe, but it would be also very complicated to implement this just via manipulating the DOM structure of the parent window, using Ajax calls only instead of http-requests.

 

What would be the best way to implement a dialog which not just shows some content, but contains a form that needs to load, save and validate user input which needs to be returned to the parent window when closed? Is there a demo available? Or should I use some frameworks?

 

Thank you in advance.

Kaan

[Ianko]

Hello Kaan,

 

Having form, validation and server submission from Kendo Window is not so general and it is expected further code implementation to be involved. However, there is nothing more complex than a simple form implementation or validation configuration. 

 

In the case you have, however, I am not quite sure why form and submit behavior is needed at all. The Kendo Grid can be reconfigured on the client by using the setOptions method. Therefore, you can use a simple dialog with no iframe that calls the setOptions method in order to change the grid's settings. This will prevent you from interacting with parent window instances from iframe as such will not exist. 

 

Further, storing and re-storing the state to/form the server can be made through AJAX calls. This will prevent you the form submission.

 

Whereas for the validation, as the dialog will operate only on the client you will not need server-side validation and client-side validation should be a simple task.

 

If, however, I am missing some point of the situation you have, please provide a simple, locally runnable solution that will enable me to better understand the difficulties you have with this case.

 

Regards,
Ianko
Telerik by Progress