Create external editor form using popup editor template

[Mikael]

We want to implement something which is similar to the "EditForm" edit-mode in RadGrid for ASP.NET Ajax.

This looks promising: https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/editing/external-editor-form

However, we are in the situation where the grid's columns are created dynamically, based on configuration from a database.

Thus, we would have to implement the external editor form dynamically as well. Not impossible, of course, but I would rather avoid it :-)

The standard popup editor is, as far as I understand it, created dynamically, based on the columns of the grid. So, perhaps I could use the popup editor's template, but use it as an external form. Would that be possible (assuming you understand my question :-)

A follow-up question:

Once I have solved this (either by implementing it myself or re-using the popup editor), I would like to generate one external form per row in the grid.

In other words, if there are three rows in the grid, there would be three instances of external forms (stacked vertically). Is that possible? A sample for this, maybe based on this would be ideal! https://dojo.telerik.com/ITaciTAc

Thanks!

/Fredrik

[Plamen]

Hello,

As far as I could understand the scenario, may be the best approach will be to Create Custom Editor in Detail Template as it is described in the article. In that case we have a main detailTemplate and a detailInit where we pass the model that we need to use in the template. If we need different kind of templates we can add options that are then read by the MVVM . Here is an example how we can add custom div on every odd row editor - https://dojo.telerik.com/@zdravkov/eYejAduN.

Please review this approach and let me know if you have more questions or your scenario is somehow different.

Regards,
Plamen
Progress Telerik

[Mikael]

Thanks for your reply, Plamen!

Let me explain what I am trying to accomplish. There are two things, actually:

1: Today we use RadGrid for ASP.NET Ajax, but would like to migrate to Kendo UI. One of the features that we see missing is the GridEditMode.EditForms setting, where the grid opens a form, just like the popup, but "within" the grid.

See Popup.png (GridEditMode.PopUp) and EditForms.png (GridEditMode.EditForms)

I've googled, and it seems as if there is no way to reproduce the exact same behaviour (correct me if I'm wrong!), but one idea would be to use an "external editor form", like this: https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/editing/external-editor-form. When the user clicks "Edit", we could hide the grid and only show the external form. 

Now, the problem is that the columns in our grid is defined at runtime. We load the columns' specification from the database (together with the actual content of the grid). Thus, we would have to generate the markup for the external editor form dynamically as well. That is perfectly possible, but we would definitely prefer not having to implement this, it would get rather complex. It would have to take into account all different column datatypes (string, integer, decimal, boolean, etc), validators, etc and also of course creating the layout dynamically.
Since the built in popup editor does exactly what we want (automatically generates the dialog/form based on the column's datatypes etc, we are wondering if there is a way to reuse this implementation in our external editor form. This would save us a lot of work! 

2: We also implement batch editing. We use GridEditMode.EditForms so that the user has the possibility to enter data for each row, in edit forms (not inline), and then click "Save all changes" to save all the data the user has modified.
The attached image (BatchEditing.png) show a simple example. Here, there are 4 rows, all in edit mode. The grid uses GridEditMode.EditForms.
Again, we would use external editors for this, I guess. (Or, having read your example, I realize we could use rowTemplate instead). But the challenge is the same as in #1 above - since the columns are defined in runtime, we would have to build the layout dynamically. Again, it would be much easier if we could reuse the implementation of the built-in popup editor.

(I should mention that in RadGrid for ASP.NET Ajax, we don't need to do anything special - the grid automtically build the edit forms for us.)

Hope I made myself understood. Let me know otherwise!

/Fredrik

[Plamen]

Hi,

Thank you for elaborating the scenario.

In will try to summarize the editing scenarios that are supported by Kendo Grid for you:

1) If you need to have a Popup editing form that contains editors for the fields you can check the Popup Editing demo - it corresponds to the PopUp EditForm scenario of RadGrid. Here is an image of it:

2) If you need to have the editors inline inside the Grid you can check the inline editing demo of Kendo Grid - it corresponds to the EditForm FormType option of RadGrid.   The only difference here is that in Kendo each column contains an editor for its column while in RadGrid the editors are in one common div. If you need to have the editors in one place the solution that we recommend is the KB article that I linked in my previous reply - https://docs.telerik.com/kendo-ui/knowledge-base/detail-template-editor. Here is an image of the inline editing in Kendo:

3) If you need batch editing in Kendo Grid you can refer to this online demo - it has a similar implementation to the Batch Editing demo in RadGrid. Below you can see an image of the batch editing in Kendo Grid

If the scenario that you are trying to achieve is somehow different please elaborate it a little deeper by providing a short video of the editing process or a runnable demo of how exactly is it currently working with RadGrid so we could think of a possible solution for the exact case.

Regards,
Plamen
Progress Telerik

[Mikael]

Hi Plamen, sorry for the late reply!

I have attached two animated gifs to show you how we take use of the EditForms-mode in RadGrid for ASP.NET Ajax.

Note that our implementation is such that the set of columns are dynamic, everything is loaded from the database. Thus, we cannot pre-define our grids in code. Also, the gifs are only simple examples, in reality we have much more complex scenarios.

Anyway, "Grid editforms normal edit mode.gif" shows the RadGrid in "normal" mode, using EditForms.When the user clicks "Edit" on a row, that row opens in EditForms-mode "inside" the grid. In Kendo Grid, this is not supported, I know, but we can live with the popup-editor which has similar functionality (although our users would appreciate the "inside" technique).

The nice this with this, for a developer, is that much of work is provided by the RadGrid. The dropdowns, the calendar popup, the "This is a required field"-validator, everything comes more or less automatically from our (dynamic) configuration.

So, this scenario is not a problem, we can use the Kendo grid's popup editor, which also provides the same functionality out of the box.

Now, have a look at "Grid editforms immediate edit mode.gif". This is a really silly example, normally there is a list to the right which lets the user select which item he wants to edit.

Anyway, to implement this, we don't have to do anything except for making sure that the RadGrid is in edit-mode immediately (without the user having to click an "Edit"-link). The rest of the code is identical - the dropdowns, the calendar popup, the "This is a required field"-validator, everything is again provided by the RadGrid.

But, with Kendo grid, it is not obvious how and if we can do something like this. The samples I have seen either uses an external form or handcrafted item templates. We have to implement lots of things our self. For instance, this sample shows one way to do something like what we want: https://docs.telerik.com/kendo-ui/knowledge-base/grid-external-form-editing

But in this case,the entire "editForm"-div would have to be implemented by us. Again, our grids are dynamic, without predefined columns, so it would be like re-inventing the wheel - or rather re-inventing the popup editor. The popup editor does exactly what we want, except that we don't want it as a popup, but a "control" in the page.

So, my questions are:

1. Is there any way to take use of the popup editor to solve the second scenario (immediate single row editing), without having to implement too much ourself?

2. If the popup editor is not an option, any other ideas?

 

[Mikael]

I wish there was a way to edit posts...

It should say "a list to the left" in the following sentence (not that it really matters):

"This is a really silly example, normally there is a list to the right which lets the user select which item he wants to edit." should be 

[Plamen]

Hello,

Thank you for elaborating the issue.

One possible approach that I could see with a popup editor is to use the editRow method and open the popup editor for the desired item of the grid initially or on some item click as for example it is done in this dojo - https://dojo.telerik.com/@zdravkov/ugAvIbaT. 

One other option is to use our new from widget and submit the updated item to the server - a sample implementation on item double click is implemented in this dojo - https://dojo.telerik.com/@zdravkov/OXIFIWEx

Hope some of there option helps you achieve the scenario - if you have further questions please let me know.

Regards,
Plamen
Progress Telerik

[Mikael]

Thanks for your reply, Plamen!

 

The Forms widget does seem powerful for other scenarios, but in our case it would require repeating much of our code: one code path for the grid for "normal edit mode" and one for the form for "immediate edit mode".

I don't want to give up the popup editor form yet. The problem is that it is shown in a modal window - we want it to be inline with other elements on the page, just as a normal div. I tried mucking around with the HTML, using Chrome Developer Tools, and it looks a little promising, although I havent got the data binding to work. What I do is that, after the editRow call, I "move" the div containing the form (class="k-edit-form-container") and place it below the div for the grid. I then delete the divs "k-overlay" and "k-window".

Before I go any further on this path, is this something you would advice against? Or do you know if this has been done before, something to share?

[Plamen]

Hello,

Thank you for sharing your approach. We don't have such ready example yet in my opinion it seems like something that can be achieved. Please let us know if you need further help or you have more questions.

Regards,
Plamen
Progress Telerik