Grid inside gird edit dialog

[Mantas Parfionovas]

Hello,

Iam trying to add grid component inside grid edit dialog to be able to add/remove child elements of list. When i try to edit, dialog freezes on spinner:

If I comment spinner code then it kinda works, but i can see css problems and data not changing related to actions

Iam adding my code as .rar

Attachment: EJ2Grid_13359c20.rar

[Vignesh Sivagnanam]

Hi Mantas  

Thanks for contacting Syncfusion support. 

Based on your query you have faced issue while using the grid inside the Edit Dialog Template form in the grid. By default in EJ2 Grid we have rendered the edit elements inside the form element. If we use the Input as a grid editor component, then it will render like inside the form element have another form element. This structure may cause a conflict error. 

In the reported case the two Spinners are created separately for the both dialog and the Grid. After rendering the dialog spinner is not close due to conflict. If you must want to use the Grid inside the Edit dialog form, please explain the exact requirement that you want to achieve using the grid inside the form element. 

In your update you also mentioned that you faced some CSS problems and data not changed related to actions. We checked your sample and we did not find any face any CSS problems. So, please share the video demonstration of an issue that you are facing at your end. 

Regards 

Vignesh Sivagnanam 

[Mantas Parfionovas]

 If you must want to use the Grid inside the Edit dialog form, please explain the exact requirement that you want to achieve using the grid inside the form element. 

So i have class: 

        public class Order

        {

            public string SeqNumber { get; set; }

            public string OrderNumber { get; set; }

            public List<LoadCarrier> LoadCarriers { get; set; }

        }

In edit dialog form i want to CRUD items in LoadCarriers. For that I tried to use Grid. Is it possible to use any other approach for that?

[Vignesh Sivagnanam]

Hi Mantas 

Thanks for the update 

Query : In edit dialog form i want to CRUD items in LoadCarriers 

Based on your query you want to edit the complex data, so we have prepared sample to edit the Complex data in the Edit Dialog Template in the Grid. Please refer the below Code Example And Sample For your reference 

HomeController.cs 

public class Customer 

        { 

            public static List<Customer> order1 = new List<Customer>(); 

            public Customer() 

            { 

            } 

            public int? CustomerId { get; set; } 

            public string Name { get; set; } 

        } 

_DialogEditPartial.cshtml 

<div class="form-row"> 

      <div class="form-group col-md-6"> 

        <div class="e-float-input e-control-wrapper"> 

          @Html.TextBox("Customer___CustomerId", Model.Customer.CustomerId) 

          <span class="e-float-line"></span> 

          @Html.Label("Customer___CustomerId", "Customer CustomerId", new { @class = "e-float-text e-label-top" }) 

        </div> 

      </div> 

      <div class="form-group col-md-6"> 

        <div class="e-float-input e-control-wrapper"> 

          @Html.TextBox("Customer___Name", Model.Customer.Name) 

          <span class="e-float-line"></span> 

          @Html.Label("Customer___Name", "Customer Name", new { @class = "e-float-text e-label-top" }) 

        </div> 

      </div> 

    </div> 

Sample : https://www.syncfusion.com/downloads/support/forum/161380/ze/Sample1623941430.zip 

Please get back to us, if you need any further assistance. 

Regards, 

Vignesh Sivagnanam. 

[Mantas Parfionovas]

Hello,

Thanks for your response, but its still not I want to do.

In your provided example i can edit one Customer.

So lets pretend that Customer => List<Customer>()

How to edit it now? If its not a single record, but list of them? I want to be able to add, edit,remove Customer(in your example) while iam in dialog edit mode.

Thanks!

[Sujith Kumar Rajkumar]

Hi Mantas, 

 

Sorry for the delay in providing the response. 

 

Based on the provided information, we could understand that your requirement is to edit all the complex data bound to the Grid using the dialog template. You can achieve the same by using a foreach loop in the edit partial page(used for defining custom edit controls for dialog template editing) to render the controls based on the total list items. 

 

This is demonstrated in the below code snippet, 

 

<div class="form-row"> 

    // A forEach is executed to render controls based on the list data items 

    @foreach (var x in Model.Customer) 

    { 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                // Proper naming based on complex data index values is provided here in order to properly retrieve the value on save 

                @Html.TextBox("Customer___" + @Model.Customer.IndexOf(x) + "___CustomerId", @x.CustomerId) 

                <span class="e-float-line"></span> 

                @Html.Label("Customer___" + @Model.Customer.IndexOf(x) + "___CustomerId", "Customer ID " + @Model.Customer.IndexOf(x), new { @class = "e-float-text e-label-top" }) 

            </div> 

        </div> 

    } 

</div> 

 

We have modified the previously provided sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161380/ze/ComplexDataDialogTemplateEditing1252068209  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R