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

I want to create child gridwith with parent grid

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 

1 Reply

BM Balaji Marimuthu Syncfusion Team 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

Live Chat Icon For mobile
Up arrow icon