Dialog grid calling another dialog grid via button with parameter

[Mohd Mohaimin Zakaria]

Hi,

I have a dialog grid with several column and one of the column is a button to show a details of the row via another dialog grid.

How can I set the datasource of the second dialog grid based on the parameter(AuditTrailID) of selected row.

1st dialog grid

                    <ejs-dialog id="createAuditTrailByScreenDialog" width="1000px" open="dialogOpen" isModal="true"

                                close="dialogClose" showCloseIcon="true" visible="false" created="onLoadconfirm" header="Audit Trail By Screen" zIndex="1100">

                        <e-content-template>

                            <div id="AuditDetailsByScreen">

                                <ejs-grid id="AuditTrailByScreenGrid"

                                          created="createAuditTrailScreen">

                                    <e-grid-columns>

                                        <e-grid-column field="AuditTrailID" headerText="Audit Trail ID" textAlign="Center" isPrimaryKey="true" isIdentity="true" visible="false" showInColumnChooser="false"></e-grid-column>

                                        <e-grid-column field="LoggedDate" headerText="Date" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="LoggedByName" headerText="Logged By" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="Action" headerText="Action" textAlign="Center" width="150"></e-grid-column>

                                        <e-grid-column field="AuditTrailID" headerText="Details" textAlign="Center" width="150"

                                                       isPrimaryKey="true" validationRules="@(new { required = false })"

                                                       template="#auditTrailHistory"

                                                       defaultValue="@ViewBag.Guid" allowEditing="false" showInColumnChooser="false" isIdentity="true"></e-grid-column>

                                    </e-grid-columns>

                                </ejs-grid>

                            </div>

                        </e-content-template>

                    </ejs-dialog>

2nd dialog grid

                    <ejs-dialog id="createAuditTrailHistoryDialog" width="1000px" open="dialogOpen3" isModal="true"

                                close="dialogClose3" showCloseIcon="true" visible="false" created="onLoadconfirm3" header="Audit Trail History" zIndex="1100">

                        <e-content-template>

                            <div id="AuditTrailHistory">

                                <ejs-grid id="AuditTrailHistoryGrid"

                                          created="createAuditTrailHistory">

                                    <e-grid-columns>

                                        <e-grid-column field="Caption" headerText="Caption"></e-grid-column>

                                        <e-grid-column field="OldValue" headerText="OldValue"></e-grid-column>

                                        <e-grid-column field="NewValue" headerText="NewValue"></e-grid-column>

                                    </e-grid-columns>

                                </ejs-grid>

                            </div>

                        </e-content-template>

                    </ejs-dialog>

<script id="auditTrailHistory" type="text/x-template">

    <div class="image">

        <button type="button" id="btnTrailHistory2" onclick="clickTrailHistory()">Details</button>

    </div>

</script>

<script>

    function clickTrailHistory() {

        var dialogObj = document.getElementById('createAuditTrailHistoryDialog').ej2_instances[0];

        dialogObj.show();

    }

</script>

Thank you.

[Pavithra Subramaniyam]

Hi Mohd, 

 

Query : How can I set the data source of the second dialog grid based on the parameter(OrderID) of selected row? 

 

We have validated your query and we have created a sample with your requirement in Grid component. You can achieve the Essential JavaScript 2 Dialog rendered by Essential JavaScript 2 Grid(parentGrid) with one of the column has button and that click action based to open another Dialog with Grid(ChildGrid).  In this case you can bind the data source on the Child Grid from the parent Grid row selected record basis. Please refer the below code example for more information. 

 

[index.cshtml] 

<div class="col-lg-12 control-section" id="target" style="height:600px; width:700px"> 

        <ejs-dialog id="parentDialog" width="500px" animationSettings="defaultanimation" visible="true" height="400px" target="#target" 

                    showCloseIcon="true" header="First Dialog"> 

            <e-content-template> 

                <ejs-grid id="parentGrid" dataSource="ViewBag.DataSource" allowPaging="true"> 

                    <e-grid-columns> 

                       .   .   .   . 

                        <e-grid-column headerText="CustomButton" type="string" template="#template" width="120"></e-grid-column> 

                    </e-grid-columns> 

                </ejs-grid> 

            </e-content-template> 

        </ejs-dialog>         

        <ejs-dialog id="childDialog" width="300px" animationSettings="defaultanimation" visible="false" height="500px" target="#target" 

                    showCloseIcon="true" > 

            <e-content-template> 

                <ejs-grid id="childGrid" dataSource="ViewBag.DataSource" allowPaging="true" >                     

                  .   .   .   . 

                </ejs-grid> 

            </e-content-template> 

        </ejs-dialog> 

    </div> 

</div> 

 

<script id="template" type="text/x-template"> 

    <button id="customBtn" onclick="parentBtnClick.apply(this,arguments)">ClickMe</button> 

</script>  

 

<script> 

    function parentBtnClick(e) {  // Trigger grid button column click action     

        var dialogObj = document.getElementById('childDialog').ej2_instances[0]; 

        dialogObj.show(); 

 

        var parentGrid = document.getElementById("parentGrid").ej2_instances[0]; 

        var parentGridSelectedRow = ej.grids.parentsUntil(e.target, "e-row"); 

        var parentGridSelectedData = parentGrid.getRowObjectFromUID(parentGridSelectedRow.getAttribute("data-uid")).data; 

        var childGrid = document.getElementById("childGrid").ej2_instances[0]; 

        childGrid.dataSource = [parentGridSelectedData]; 

        console.log(parentGridSelectedData.OrderID); // Show primaryKey column value in console window 

    } 

 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/#childgrid  

 

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

 

Regards, 

Pavithra S. 

 

[Mohd Mohaimin Zakaria]

Hi,

Thank for the reply.

As per example that you provided, the parent n child grid is sharing a same datasource.

How about if i want a different datasource/query for the childgrid based on the selected id from the row in parent grid.

Because the parent and child grid have different column/data to be shown in the grid.

Thank you.

[Thavasianand Sankaranarayanan]

Hi Mohd , 

 

Query: How about if i want a different datasource/query for the childgrid based on the selected id from the row in parent grid. Because the parent and child grid have different column/data to be shown in the grid. 

 

We have validated your query and you can also set different datasource for parent and child grid. The Child Grid dataSource will load based on the childGrid->queryString property. By default, Parent and child grid relation will be maintained by queryString property. We should use the same field name to map both parent and child grid.  

 

[code example] 

<div class="container"> 

        <ejs-grid id="Grid" allowPaging=true load='load'> 

            <e-grid-pagesettings pageSize="4"> </e-grid-pagesettings> 

            <e-datamanager url='http://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Employees/' adaptor="ODataAdaptor" crossdomain="true"></e-datamanager> 

            <e-grid-columns> 

                <e-grid-column field="EmployeeID" headerText="Employee ID" width="110"></e-grid-column> 

                <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

    </div> 

    

<script> 

     function load(args) {   

           

        this.childGrid = { 

            dataSource: new ej.data.DataManager({ 

                url: "http://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Orders/", 

                adaptor: new ej.data.ODataAdaptor(), 

                crossDomain: true 

            }), 

            queryString: 'EmployeeID',       //queryString value will be same in both parent and child grid 

            allowPaging: true, 

            pageSettings: {pageSize: 5}, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

                { field: 'ShipCity', headerText: 'Ship City', width: 150 }, 

                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 

            ], 

        }; 

    } 

     

</script>. . . 

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Mohd Mohaimin Zakaria]

I have try, but it not works and there are error 

The <e-datamanager> tag is not allowed by parent <ejs-grid> tag helper. Only child tags with name(s) 'e-grid-columns, e-grid-aggregates, e-grid-filtersettings, e-grid-sortsettings, e-grid-groupsettings, e-grid-editsettings, e-grid-pagesettings, e-grid-rowdropsettings, e-grid-searchsettings, e-grid-selectionsettings, e-grid-textwrapsettings, e-data-manager' are allowed.

<ejs-dialog id="parentDialog" width="1000px" visible="false" target="#target" showCloseIcon="true" header="Audit Trail by Screen" zIndex="500" created="onLoadconfirm2">

<e-content-template>

 <ejs-grid id="parentGrid" dataSource="ViewBag.AuditTrail" allowPaging="true" load="load">

<e-grid-pagesettings pageCount="5" pageSize="10" pageSizes="@(new string[] { "5", "10", "20", "All"}) "></e-grid-pagesettings>

<e-datamanager adaptor="ODataAdaptor" crossdomain="true"></e-datamanager> 

<e-grid-columns>

<e-grid-column field="AuditTrailID" headerText="Audit Trail ID" textAlign="Center" isPrimaryKey="true" isIdentity="true" visible="false" showInColumnChooser="false"></e-grid-column>

<e-grid-column field="LoggedDate" headerText="Date" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="LoggedByName" headerText="Logged By" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="LoggedByNRIC" headerText="IC Number" textAlign="Center"></e-grid-column>

                                        <e-grid-column field="Action" headerText="Action" textAlign="Center" width="150"></e-grid-column>

                                        <e-grid-column field="UserID" headerText="User" visible="false" showInColumnChooser="false" textAlign="Center"></e-grid-column>

                                        <e-grid-column headerText="CustomButton" type="string" template="#template2" width="120"></e-grid-column>

                                    </e-grid-columns>

                                </ejs-grid>

                            </e-content-template>

                        </ejs-dialog>

<script>

    function load(args) {

        this.childGrid = {

            dataSource: new ej.data.DataManager({

                url: "Audit/AuditTrailHistory2",

                adaptor: new ej.data.ODataAdaptor(),

                crossDomain: true

            }),

            queryString: 'UserID', 'AuditTrailID',       //queryString value will be same in both parent and child grid

            allowPaging: true,

            pageSettings: { pageSize: 5 },

            columns: [

                { field: 'Caption', headerText: 'Caption', textAlign: 'Right', width: 120 },

                { field: 'OldValue', headerText: 'OldValue', width: 150 },

                { field: 'NewValue', headerText: 'NewValue', width: 150 }

            ],

        };

    }

</script>

[Thavasianand Sankaranarayanan]

Hi Mohd, 

Sorry for the inconvenience caused. 

Query: I have try, but it not works and there are error The <e-datamanager> tag is not allowed by parent <ejs-grid> tag helper. Only child tags with name(s) 'e-grid-columns, e-grid-aggregates, e-grid-filtersettings, e-grid-sortsettings, e-grid-groupsettings, e-grid-editsettings, e-grid-pagesettings, e-grid-rowdropsettings, e-grid-searchsettings, e-grid-selectionsettings, e-grid-textwrapsettings, e-data-manager' are allowed. 

  

The <e-datamanager> tag is supported in older version of syncfusion nuget packages. We have changed the <e-datamanager> tag to <e-data-manager>. So, Please modify the <e-data-manager> tag to overcome this problem. 

[code example] 

 

<e-data-manager url="/Home/UrlDatasource/" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor" crossdomain="true"></e-data-manager> 

 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Mohd Mohaimin Zakaria]

Thanks for the reply.

My concern is to change the datasource of the grid in the child dialog.

Once the button in the parent dialog is click, the child dialog will shown but with different datasource based on id in the parent dialog grid.

[Madhu Sudhanan P]

Hi Mohd, 

Thanks for contacting the Sycfusion support. 

As per your suggestion we have prepared a sample with bound dataSource to child dialog’s Grid based on we click the button(OrderID value) in a  row, which is in the parent dialog’s Grid. Please refer the below code example and sample for more information. 

[index.cshtml] 

 

    <div class="col-lg-12 control-section" id="target" style="height:600px; width:700px"> 

        <ejs-dialog id="parentDialog" width="500px" animationSettings="defaultanimation" visible="true" height="400px" target="#target" 

                    showCloseIcon="true" header="First Dialog"> 

            <e-content-template> 

                <ejs-grid id="parentGrid" dataSource="ViewBag.DataSource" allowPaging="true"> 

                    <e-grid-columns> 

                        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="150"></e-grid-column> 

                        <e-grid-column field="CustomerID" headerText="CustomerID" width="150"></e-grid-column> 

                        <e-grid-column headerText="Custom Button" type="string" template="#template" width="120"></e-grid-column> 

                    </e-grid-columns> 

                </ejs-grid> 

            </e-content-template> 

        </ejs-dialog> 

       .     .     .     .  

 

<script id="template" type="text/x-template"> 

    <button id="customBtn" onclick="parentBtnClick.apply(this,arguments)">ClickMe</button> 

</script>  

 

<script> 

 

    function parentBtnClick(e) {   

         

        var dialogObj = document.getElementById('childDialog').ej2_instances[0]; 

        dialogObj.show(); 

        var parentGrid = document.getElementById("parentGrid").ej2_instances[0]; 

        var parentGridSelectedRow = ej.grids.parentsUntil(e.target, "e-row"); 

        var parentGridSelectedData = parentGrid.getRowObjectFromUID(parentGridSelectedRow.getAttribute("data-uid")).data; 

        var childGrid = document.getElementById("childGrid").ej2_instances[0]; 

        var childGridData = @Html.Raw(Json.Serialize(ViewBag.Employees)); 

        // Parent dialog’s Grid, selected data value based to filter childGrid datasource and bind filtered data to child dialog’s Grid 

        childGrid.dataSource = new ej.data.DataManager(childGridData).executeLocal(new ej.data.Query().where("OrderID", 'equal', parentGridSelectedData.OrderID));    } 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-dialog-grid-110320191027267653.zip 

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

Regards, 

Madhu Sudhanan P 

[Mohd Mohaimin Zakaria]

Thanks. Working smoothly.

Sorry for the late reply.

[Madhu Sudhanan P]

Hi Mohd, 

  

Thanks for the update. 

  

Regards, 

Madhu