How to save Form with generated grid.

Question

Hi, Does anyone encounters to save a form with more than one grid inside the form. I am trying to save a form

Function for NetProceedGrid:

Function for Amortization Grid: Please ignore the date :) I am still working on it.

Controller:

Appreciate any help. Thank you in advance!

Praveenkumar Gajendiran · Answer

Hi Joseph,Thanks for contacting Syncfusion support. 
Before proceeding with query, We would like to inform you that, by default, we have rendered the gird editor components inside the form element.If you have render the Grid inside the form element, then it will render be like- inside the form element have another form element. This structure may cause a conflict error. Because the form is automatically submitted when click any submit button. As same as it will destroy the element automatically when click any cancel button. 
 
So we need the following information to understand your requirement better at our end.  
 

Why did you want to render the Grid control inside the form element? Because form control elements are input, select, textarea… only, grid is not a form control element.
In case, if have using editing in the Grid. It may cause some conflict error. So please avoid this structure.
Please let us know, When you save the Grid inside the form control and what are you expecting to happen when saving the Grid?
Explain your exact scenario and workflow of your requirement with more details, if possible share a video demonstration to understand your requirement better.
 
RegardsPraveenkumar G

Joseph · Answer

Hi

Praveenkumar,Thank you for your feedback. I appreciate it.I am creating a Loan where there is a need to fill out the form elements but at the same time generate an Amortization in a Grid format and Net Proceed.

The Amortization grid is automatically generated based on the input value in the "Loanable Amount" field and "Term and Charges". The Net Proceed grid is also auto-generated but the user requires to input some value in the Debit or Credit rows. Please see my attached video and thank you very much in advance!Attachment: 20210719_112324_6a005cb8.zip

Praveenkumar Gajendiran · Answer

Hi Joseph,Thanks for your update. 
We checked your provided information and video demonstration, based on that we understand you have number of sub Grid’s inside the form and we suspect that you have using the batch editing feature for that sub Grid’s. Here we have some concerns, so we need the following information to validate and understand your requirement better at our end.  
 

Please let us know, When you save the batch changes in the sub Grid inside the form, Are you expecting to save that sub Grid batch changes when click the save button in the Main Grid edit dialog form?
Let us know, what type of data are you using for sub Grid’s which is inside the form - remote data or local data?
If you are using remote data, please let us know what type of adaptor are you used to bind the data in the Grid?.
 
RegardsPraveenkumar G

Joseph · Answer

Hi Praveenkumar, Thanks for helping.1. Please let us know, When you save the batch changes in the sub Grid inside the form, Are you expecting to save that sub Grid batch changes when click the save button in the Main Grid edit dialog form?=>Yes. You are correct. I am trying to save the Sub Grids by batch upon clicking on the Save button in the Main Grid dialog form.2. Let us know, what type of data are you using for sub Grid’s which is inside the form - remote data or local data?=>In SubGrid1, I think I am using Local Data. I am calling a reference table called 'dbo.LoanNetProceedType' to load in the SubGrid1. The user will fill out the Debit or Credit=>In the SubGrid2, It is also Local Data. I am calling a reference table called 'dbo.LoanFormType' and triggers to populate values in SubGrid2.3. If you are using remote data, please let us know what type of adaptor are you used to bind the data in the Grid?.On Save button the Dialog Form will save the values into dbo.

TxnTable1, dbo.

Txn

SubGrid1, dbo.TxnSubGrid2

Praveenkumar Gajendiran · Answer

Hi Joseph, 
  
Thanks for your update. 
  
Based on your confirmation, we have considered your requirement as a custom sample and we will update the further details on August 2,2021. 
We appreciate your patience until then.  
Regards,Praveenkumar G

Joseph · Answer

Thank you so much

Praveenkumar!Appreciate it very much! I am new to this technology.

Praveenkumar Gajendiran · Answer

Hi Joseph, 
Thanks for your update. 
We are preparing a custom sample to achieve your requirement. We will update the further details on August 2, 2021. 
We appreciate your patience until then.Regards,Praveenkumar G

Praveenkumar Gajendiran · Answer

Hi Joseph,Thanks for your patience.Based on your confirmation, we have prepared a custom sample, in that we have Grid component with dialog editing, in that editing dialog we have rendered custom input components with grid component, while pressing dialog save button, we prevent the master grid save action by using args.cancel property in the actionBegin event and then save the sub grids inside the dialog editing, after batch saving the grids inside the dialog editing, we call the endEdit method for the master grid to perform save action. Please check the below code example for more information,  
Code Example: 




var flag = true 
    function actionMaster(args) { // Master Grid’s actionBegin event 
        if (args.requestType === "save") { 
            // actionBegin event will be triggered each time when the grid save action performed, so flag variable is used so that this case is executed only while pressing dialog save button 
            if (flag == true) { 
                args.cancel = true; // we prevent the master grid save action by using args.cancel property 
                var egridInstance = document.getElementById("EGrid").ej2_instances[0] 
                var dgridInstance = document.getElementById("DGrid").ej2_instances[0]                //here we check the grids inside the dialog editing have the batch changes  
                if (egridInstance.editModule.getBatchChanges().changedRecords.length > 0) {                     // if yes, we call the endEdit method for that Grid to perform save action 
                    egridInstance.endEdit(); 
                } else if (egridInstance.editModule.getBatchChanges().changedRecords.length > 0) { 
                    dgridInstance.endEdit(); 
                } else { 
                    var gridInstance = document.getElementById("Grid").ej2_instances[0]; 
                    flag = false; 
                    gridInstance.endEdit(); 
                } 
 
            } 
        } 
    } 
    function beforeBatchSaveDetail1(args) { // Sub grid’s beforeBatchSave event-1 
        var dgridInstance = document.getElementById("DGrid").ej2_instances[0]; 
        if (dgridInstance.editModule.getBatchChanges().changedRecords.length > 0) { 
            dgridInstance.endEdit(); 
        } else { 
             
            setTimeout(function () { 
                var gridInstance = document.getElementById("Grid").ej2_instances[0] 
                flag = false; 
                gridInstance.endEdit(); 
            }, 50);    
        } 
    } 
    function beforeBatchSaveDetail2(args) { // Sub grid’s beforeBatchSave event-2 
        setTimeout(function () { 
            var gridInstance = document.getElementById("Grid").ej2_instances[0] 
            flag = false; 
            gridInstance.endEdit(); 
        }, 200); 
    } 
 
 
    function actionComplete(args) { 
        if (args.requestType === "save") { 
            flag = true;  
        }    } 
Sample: https://www.syncfusion.com/downloads/support/forum/167001/ze/core1294659919.zipAPI Links: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin                  https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete                  https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_BeforeBatchSave 
Please get back to us if you need further assistance.Regards,Praveenkumar G

Joseph · Answer

Hi

Praveenkumar,Got the sample. I will have a look at it. Thank you very much!

Praveenkumar Gajendiran · Answer

Hi Joseph,  

You are welcome. We will wait to hear from you. 

Regards, 
Praveenkumar G.

Lucian Calin · Answer

Hi,There is any update on the code following API changes? I cannot make the solution work on the latest version.Thanks and regards,Lucian

Rajapandi Ravi · Answer

Lucian,We have upgraded the same sample to the latest version
23.1.44 and it was working fine at our end. Please refer the below working
sample for your reference.Sample: Attachment: 167001Sample_ecd338a0.zip

Roberto · Answer

Hi,I have the same question.Could you update the exemple?I had have issue and I was not finding the issue.

InvalidOperationException: Cannot find reference assembly 'Microsoft.CSharp.dll' file for package Microsoft.CSharp.Reference

Rajapandi Ravi · Answer

Roberto,In our previous update, we have provided the working sample with
the 23.1.44 version. So, if you still face the issue please try to reproduce
the issue with our shared sample which was share in our previous update and
share your Syncfusion package version that would be helpful for us to provide
further validation of your reported problem.