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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

I want to create child gridwith with parent grid

Thread ID:





120510 Sep 22,2015 08:17 AM UTC Sep 23,2015 09:05 AM UTC JavaScript 1
Tags: ejGrid
Rakesh Advani
Asked On September 22, 2015 08:17 AM UTC

Technology must be angular js and mvc
I want to example of child grid with parent grid 

In parent gridview
1 column 
2 column 

so I when I click on 2 column of parent grid link 
I want to display its child gridview

child grid should be part of parent grid
so when I click on link its shows me child grid 

and in child grid I want three 

columns of child gridview
1 display data
2 button add
3 button edit 

So when I click on button of child gridview I want to perform action 

Balaji Marimuthu [Syncfusion]
Replied On September 23, 2015 09:05 AM UTC

Hi Rakesh, 

Thanks for contacting Syncfusion support.

Query 1: so I when I click on 2 column of parent grid link I want to display its child gridview 

Your requirement is achieved using the onclick event and we have displayed the child grid when the 2nd column of parent grid link clicked.

Please refer to the sample and code example as below, 

Sample: Sample-120510

<script type="text/x-jsrender" id="Template">

        <a rel='nofollow' href="#" onclick="expandcollapse(this)">{{:FirstName}}</a>


function expandcollapse(args) {

            var obj = $("#targetsGrid").data("ejGrid");

            var expand = $(args).parents('tr').find('.e-detailrowcollapse');

            var collapse =$(args).parents('tr').find('.e-detailrowexpand');

            if(expand.length > 0)

                obj.expandCollapse(expand);   //expand the childgrid


                obj.expandCollapse(collapse);   //collapse the childgrid


In above code example, we have triggered the expandCollapse method to display/ hide the child grid and refer to the following Help document, 

Query 2: and in child grid I want three columns of child gridview 1 display data, 2 button add, 3 button edit, so when I click on button of child gridview I want to perform action 

Using the template column property in Grid, we can render a Button to the particular column.

$scope.child = {

                dataSource: window.gridData,

                queryString: "EmployeeID",



                columns: [

                  { field: "OrderID", isPrimaryKey:true, headerText: 'Order ID', textAlign: ej.TextAlign.Right, width: 75 },

                  { headerText: 'Ship City', textAlign: ej.TextAlign.Left, width: 100, template:"#addbutton" },

                       . . . .



The templateRefresh event is triggered when refresh the template column elements in the Grid and we have rendered the Add button to the column in templateRefresh event.

Please refer to the below Help documents, 


<script type="text/ng-template" id="addbutton">

        <!--rendering button to the column using template-->

        <input class="btn" />


function templaterefresh(args) {


                text: "Add",




        function btnclick(args) {  //btnclick

            var child = this.element.closest('.e-grid').attr('id');

            var gridobj = $("#" + child).ejGrid("instance");

            gridobj._startAdd();//start add method triggered


In button click, we have triggered the startAdd method to perform the add operation in Grid.

3 button Edit: 

We have default support for Edit button in Grid which can be achieved by using the unbound columns. 

Please refer to the following online demo, 

$scope.child = {

                dataSource: window.gridData,


                columns: [


                 . . . .


                       headerText: "Manage Records",

                       commands: [

                           { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },

                           { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },

                           { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },

                           { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }


                       isUnbound: true, width: 130




Balaji Marimuthu


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