Grid inside Popup editor of grid

[Marek]

I have grid of orders with popup editor.

I need to add another grid inside popup editor with inline editing of grid items but it doesn't work - empty object is send to action and after trying to add item into grid it is not possible to submit popup window.

Is this approach possible?

[Vladimir Iliev]

Hi Marek,

 
Basically this scenario is not supported out-of-the-box and you should implement it using custom code. For example you can create custom PopUp editor template with grid which Read action sends additional data provided by JavaScript function in which you can render the edited row data using the following approach (please note the first row of the getCurrentParentId function):

Custom PopUp editor:

<script>
    function getCurrentParentId() {
        var parentGridModel = ${JSON.stringify(data)};

        return {parrentGridRecordId: parentGridModel.OrderID};
    }
</script>


@(Html.Kendo().Grid<ForeignKeyColumnDemo.Models.Order>()
    .Name("PopupGrid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID);
        columns.Bound(p => p.OrderDescription);
        columns.Bound(p => p.OrderDate);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model => {
            model.Id(p => p.OrderID);
        })
        .Read(read => read.Action("ForeignKeyColumn_Read", "Home").Data("getCurrentParentId"))
    )
)

For convenience I created small demo based on the above solution which you can use as a baseline and attached it to the current thread.

Kind Regards,
Vladimir Iliev
the Telerik team

[Manikanth]

Hi Vladimir,

I didn't understand the first sentence in your reply.Could you let me know if Kendo supports to create a popup with grid inside it that includes delete,Add and Edit functionality for that particular grid?.

[Alex Hajigeorgieva]

Hello, Manikanth,

The Kendo UI Grid with popup editing can be configured to use a custom popup window with the TemplateName() method.

In that custom popup, you may add another grid which supports CRUD operations. Something that you should be cautious about - editor templates for the grid in the popup as the templates have become heavily nested by the time the grid is put in edit mode. Take necessary precautions such as escaping or using the ToClientTemplate() method.

I am attaching here an example for your reference.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Manikanth]

Hi,

I have faced one complex situation when I have created the hierarchy grid with edit form popup as shown in attached figure.here I have create method for the whole form.But may I know how can I get the values entered in the fields of the grid inside popup along with other stand alone fields and update that batch successfully.is there any sample or suggestions you can give to achieve.Same should be applied to update as well.

Can I create seperate popup editors for create and edit,If so how should I do it and how can I achieve this in scenario likeshowing only create popup when model is new and viceversa How to handle this part.

[Angel Petrov]

Hi Manikanth,

I have already replied to the ticket opened in regards of this query. In order to avoid duplicate posts I suggest posting the questions there and sharing the findings in the forum post once we resolve the matter.

Regards,
Angel Petrov
Progress Telerik

[Brian]

Hi Manikanth,

I am attempting to do something similar here.  I have a child collection that I want to present for edit(along with some properties from the parent object) in a grid inside a popup editor based upon the parent object.

Similar to your sample, in my popup editor, I have my parent object(Equipment) as the @model and the child collection(EquipmentLighting) as the type specified on the grid definition.  I am getting an error as follows:

'The model item passed into the dictionary is of type 'SharedEntities.EquipmentLighting', but this dictionary requires a model item of type 'SharedEntities.Equipment'.'

Any thoughts?

[Brian]

err i meant to address this to the admin... Angel.

[Alex Hajigeorgieva]

Hi, Brian,

I have responded to you in the private support ticket that you have submitted. Upon resolution, I suggest we update this thread so anyone looking for similar answers can get them here.

Meanwhile, let us continue our communication in the private thread.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[John]

Were you guys able to come to a solution?  Alex, I also noticed in your previous example you posted there were no options to add/edit items in the popup editor's grid.  Of course, when I try to add them I get a javascript runtime error: "Invalid or unexpected token"...

[Alex Hajigeorgieva]

Hello, John,

I tested the project that I shared here and edited the main item as well as the child items. I recorded a video so you can see my steps and let me know in case I have missed anything:

https://www.screencast.com/t/MgGO7XSXN

As for the private thread with Brian, I responded to him but I have not heard back from him so I am unsure if the response was helpful. Nonetheless, I will share it with you:

===========================================================

1) The Foreign Key column should have a default value

.Model(model =>
{
    model.Id(p => p.equipmentUid);
    model.Field(p => p.equipmentUid).Editable(false);
    model.Field(p => p.equipmentAttributeTypeUid).DefaultValue(1);   // some default value which is the correct type   
})

2) It is not necessary to declare the foreign key editor again in the popup template as the values are already available. You can decorate the model with the [UIHint("GridForeignKey")] which should be located in /Views/Shared/EditorTemplates and contain the following

@model object
            
@(
 Html.Kendo().DropDownListFor(m => m)       
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

3) The field equipmentLoc does not bind correctly to its value because the Name() does not match the property name. And this is valid for all the properties that should be edited. 

https://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

Either use:

DropDownListFor(m=>m.equipmentLoc)
 
//OR:
 
 the DropDownList()
.Name("equipmentLoc")

5) The grid in the popup, I cannot tell what the model properties are, however if any of them are complex, you should provide a DefaultValue() for each of them When a new record is created, the grid data source adds a model with these values to its data source so a new row can be added

https://demos.telerik.com/aspnet-mvc/grid/editing-custom

Regards,
Alex Hajigeorgieva
Progress Telerik