We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dialog grid calling another dialog grid via button with parameter

Thread ID:

Created:

Updated:

Platform:

Replies:

143002 Feb 28,2019 08:00 AM UTC Mar 20,2019 10:27 AM UTC ASP.NET Core - EJ 2 9
loading
Tags: DataGrid
Mohd Mohaimin Zakaria
Asked On February 28, 2019 08:00 AM UTC

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 [Syncfusion]
Replied On March 2, 2019 04:55 PM UTC

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 
    } 
 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Pavithra S. 
 


Mohd Mohaimin Zakaria
Replied On March 4, 2019 09:09 AM UTC

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 [Syncfusion]
Replied On March 5, 2019 03:45 AM UTC

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({ 
                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
Replied On March 6, 2019 08:31 AM UTC

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 [Syncfusion]
Replied On March 7, 2019 11:45 AM UTC

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
Replied On March 8, 2019 09:31 AM UTC

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 [Syncfusion]
Replied On March 11, 2019 06:31 AM UTC

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));    } 


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

Regards, 
Madhu Sudhanan P 


Mohd Mohaimin Zakaria
Replied On March 20, 2019 07:45 AM UTC

Thanks. Working smoothly.
Sorry for the late reply.

Madhu Sudhanan P [Syncfusion]
Replied On March 20, 2019 10:27 AM UTC

Hi Mohd, 
  
Thanks for the update. 
  
Regards, 
Madhu 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon