Grid inside Popup editor of grid

11 posts, 0 answers
  1. Marek
    Marek avatar
    11 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2013 Link to this post

    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?
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 28 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Manikanth
    Manikanth avatar
    3 posts
    Member since:
    Nov 2018

    Posted 11 Feb 2019 in reply to Vladimir Iliev Link to this post

    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?.

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 13 Feb 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Manikanth
    Manikanth avatar
    3 posts
    Member since:
    Nov 2018

    Posted 13 Feb 2019 in reply to Alex Hajigeorgieva Link to this post

    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.

  6. Angel Petrov
    Admin
    Angel Petrov avatar
    1154 posts

    Posted 15 Feb 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Brian
    Brian avatar
    2 posts
    Member since:
    Nov 2014

    Posted 18 May 2019 Link to this post

    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?

  8. Brian
    Brian avatar
    2 posts
    Member since:
    Nov 2014

    Posted 18 May 2019 in reply to Brian Link to this post

    err i meant to address this to the admin... Angel.
  9. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 21 May 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. John
    John avatar
    8 posts
    Member since:
    May 2014

    Posted 03 Apr 2020 in reply to Alex Hajigeorgieva Link to this post

    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"...
  11. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 07 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top