Open Add Dialog of N Childgrid

[Mark]

We are working with a grid that has a childgrid that has a childgrid.  We are trying to create a workflow where when you edit a record on the main grid, it then opens the add dialog of the child grid and the same would happen after that record is saved, it would open the add dialog for the grandchild grid - if that makes sense.

So far we have tried:

function actionComplete(args) {
    switch(args.requestType){
        case "save":
            console.log(resolveReferences(args));
            ej.popups.DialogUtility.confirm({
                title: 'Add Applications?',
                content: "Do you wish to add applications to this user?",
                okButton: {  text: 'Yes', click: function(){grid.childGrid.startEdit();} },
                cancelButton: {  text: 'No' },
                showCloseIcon: false,
                closeOnEscape: true,
                animationSettings: { effect: 'Zoom' }
            });
            break;
    }
}

But this does not work as it generates this error:

Uncaught TypeError: grid.childGrid.startEdit is not a function

What is the best way to do this?

Also, after saving a new record in a grid, how do you automatically select it?  grid.selectedIndex = grid.length??? or such?

[Magesh Sabapathi]

Hi Mark, 

Before proceeding your query, we need some more details from this, 

1. In your snippet you are using DialogUtility in pop ups . So please confirm what type of editing you are done ( Dialog or Inline).
2. Share code snippet of Full Grid sample.
3. Clearly explain your exact requirement.
4. By default, Grid will automatically select the saved records. Please explain if we misunderstood this.

Regards 

Magesh 

[Mark]

Apologies, I though it was clearer than it was apparently.

1.  The confirm is there solely to see if they want to continue with the workflow.  As stated, it is dialog edit mode.

2.  Here is grid code:

var grid = new ej.grids.Grid({
    dataSource:dataManager,
    allowGrouping: false,
    allowSorting: true,
    allowFiltering: true,
    allowPaging: true,
    allowSelection: true,
    pageSettings: {pageCount: 3, pageSizes: true},
    filterSettings: {type: 'Menu'},
    allowExcelExport: true,
    allowPdfExport: true,
    locale: 'users',
    printMode: 'CurrentPage',
    editSettings: {allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Dialog',showDeleteConfirmDialog: true},
    searchSettings: {fields: ['last_name','first_name','middle_name','email']},
    contextMenuClick: contextMenuClick,
    actionFailure: actionFailure,
    actionComplete: actionComplete,
    toolbarClick: toolbarClick,
    actionBegin: actionBeginEdit,
    toolbar: [
        @can('create',Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())
            'Add',
        @endcan
             'ExcelExport', 'PdfExport', 'Search'],
    columns: [
        { field: 'id', headerText: 'ID', isPrimaryKey: true, visible: false,
            validationRules: { required: true, number:true }},
        { field: 'last_name', headerText: 'Last Name', allowGrouping: false,
            validationRules: { required: true } },
        { field: 'first_name', headerText: 'First Name', allowGrouping: false,
            validationRules: { required: true} },
        { field: 'middle_name', headerText: 'Middle Name', allowGrouping: false,
            validationRules: { required: false} },
        { field: 'email', headerText: 'Email', allowGrouping: false,
            validationRules: { required: true, email:true } },
        { field: 'password', headerText: 'Password', allowGrouping: false, visible: false},
        { field: 'email_verified_at', headerText: 'Email Verified', allowGrouping: false, allowEditing:false, visible: false},
        { headerText: 'Manage Users',
            commands: [
                @can('update',Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())
                    { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
                @endcan
                @can('delete', Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())
                    { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } }
                @endcan }]
        }
    ],
    contextMenuItems: ['SortAscending', 'SortDescending',
        @can('update',Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())'Edit',@endcan
        @can('delete', Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())'Delete',@endcan
],
    childGrid: applicationsGrid
});
grid.appendTo('#Grid');

var applicationsGrid = {
    dataSource: childDataManager,
    queryString: 'user_id',
    allowSorting: true,
    allowPaging: true,
    allowSelection: true,
    pageSettings: {pageCount: 3, pageSizes: true},
    editSettings: {allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Dialog', showDeleteConfirmDialog: true},
    locale: 'applications',
    toolbar: [
        @can('create',Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())
            'Add',
        @endcan
    ],
    columns: [
        { field: 'id', headerText: 'ID', isPrimaryKey: true, visible: false,
            validationRules: { required: true, number:true },},
        { field: 'user_id', headerText: 'U_ID', visible: false,
            validationRules: { required: true, number:true },},
        { field: 'application_id', headerText: 'Application', allowGrouping: false,
            validationRules: { required: true },
            dataSource: applications, foreignKeyField:'id',foreignKeyValue:'name'},
        { field: 'create', headerText: 'Create Data', allowGrouping: false,
            type:'boolean', displayAsCheckBox: true, editType: 'booleanedit' },
        { field: 'read', headerText: 'View Data', allowGrouping: false,
            type:'boolean', displayAsCheckBox: true, editType: 'booleanedit' },
        { field: 'update', headerText: 'Edit Data', allowGrouping: false,
            type:'boolean', displayAsCheckBox: true, editType: 'booleanedit' },
        { field: 'delete', headerText: 'Delete Access', allowGrouping: false,
            type:'boolean', displayAsCheckBox: true, editType: 'booleanedit' },
        { field: 'grant', headerText: 'Grant Access', allowGrouping: false,
            type:'boolean', displayAsCheckBox: true, editType: 'booleanedit' },
        { field: 'share', headerText: 'Share', allowGrouping: false,
            type:'boolean', displayAsCheckBox: true, editType: 'booleanedit'},
        { headerText: 'Applications',
            commands: [
                    @can('update', Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())
                { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
                    @endcan
                    @can('delete', Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())
                { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } }
                @endcan
            ]
        }
    ],
    contextMenuItems: ['SortAscending', 'SortDescending',
        @can('update',Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())'Edit',@endcan
        @can('delete', Auth::User()->applications()->where('application_id',  Auth::User()->getCurrentApplication())->first())'Delete',@endcan
        'PdfExport', 'ExcelExport',
        'FirstPage', 'PrevPage', 'LastPage', 'NextPage'],
    load: loadChild,
    actionComplete: actionCompleteChild,
    actionBegin: actionBeginChild,
    rowDataBound:rowDataBoundChild,
    childGrid: portsGrid
};

3.  The requirement is, when in the main grid, after save, prompt user if they want to go to child grid for that user.  I want to then display the appropriate add dialog for that child grid.  Specifically, this work flow:   user clicks Add New User ->  Add dialog for grid shows -> User Saves -> Prompt "Do you want to add applications to this user? -> Yes -> Add dialog for applicationsGrid appears -> User saves -> Prompt "Do you want to add authorizations to this application? -> Yes -> Add dialog for portsGrid appears, etc.

In short, how do you make the dialog box appear for a N child grid as we have multiple nested grids?

4.  Awesome.

[Magesh Sabapathi]

Hi Mark, 

We have logged your requirement as a Custom sample. Before proceeding we need a confirmation for this. The working behavior of the sample is below, 

1. When you click the Add button the edit Dialog will open for data adding and after save button clicked the pop-up dialog will open for confirmation.
2. Once you confirm that, the data will save as child Grid and open the Add dialog for that instantly.
3. After you enter the required details this will save as a nested child grid, And this will open the Add dialog for the nested Child Grid.
4. This will be the behavior for N number of child Grid as your need

Please confirm this from your side for us to proceed further 

Regards 

Magesh 

[Mark]

Yes that is correct.

[Magesh Sabapathi]

Hi Mark, 

Thanks for the confirmation 

Based on your confirmation we have created an sample and in this sample when you click the Add button in parent Grid that will open a dialog for adding and the confirmation will open as pop-up dialog.  

On the selection of “yes” in the pop-up, the data will save into the Grid and the Adding dialog will open for child Grid. This behavior will work same for N child Grid. Please refer the code snippet for more reference. 

Index.js 

var grid = new ej.grids.Grid({ 

        dataSource: employeeData, 

        toolbar: [ 'Add', 'Edit',"Delete","Update","Cancel"], 

        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true,mode:"Dialog" }, 

        columns: [ 

            { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', isPrimaryKey: true, width: 125 }, 

            { field: 'FirstName', headerText: 'Name', width: 125 }, 

            { field: 'Title', headerText: 'Title', width: 180 }, 

            { field: 'City', headerText: 'City', width: 110 } 

        ], 

        actionComplete: function (args) { 

        if ((args.requestType === 'save')) { 

           ej.popups.DialogUtility.confirm({        //confirmation dialog opens 

                title: 'Add Applications?', 

                content: "Do you wish to add applications to this user?", 

                okButton: {  text: 'Yes', click: function(){         // execute on yes button click 

                  this.close(); 

                  grid = document.getElementById("Grid").ej2_instances[0]; 

                  grid.detailRowModule.expand(0); 

                  id = grid.getRowByIndex(0).nextElementSibling.querySelector(".e-control.e-grid .e-lib .e-gridhover").id; 

                  child = document.getElementById(id).ej2_instances[0];   

                    setTimeout(function () { 

child.addRecord();                           // This will call the addRecord for new data 

      }, 100);          

                } }, 

                cancelButton: {  text: 'No' }, 

                showCloseIcon: false, 

                closeOnEscape: true, 

                animationSettings: { effect: 'Zoom' }, 

        

            }); 

        }, 

        childGrid: { 

            … 

    }); 

    grid.appendTo('#Grid'); 

Sample : https://stackblitz.com/edit/abt1r8-ba5pyq?file=index.js 

Please get back to us if you need further assistance 

Regards 

Magesh 

[Mark]

This works great except it always expands the first row of the grid and now the last row which I solved by doing:

okButton: {  text: 'Yes', click: function(){
        this.close();
        var grid = document.getElementById("Grid").ej2_instances[0];
        var ndx = 0;
        if(args.action=='edit'){
            ndx = args.rowIndex;
        } else if (args.action=='add'){
            ndx = args.rows.length-1;
        }
        grid.detailRowModule.expand(ndx);
        var id = grid.getRowByIndex(ndx).nextElementSibling.querySelector(".e-control.e-grid .e-lib .e-gridhover").id;
        var child = document.getElementById(id).ej2_instances[0];
        setTimeout(function () {
            child.addRecord();                           // This will call the addRecord for new data
        }, 100);

    } },

[Magesh Sabapathi]

Hi Mark, 

We are happy to hear that you have found the solution. 

Please get back to us if you need further assistance 

Regards 

Magesh