I want to create child gridwith with parent grid

[Rakesh Advani]

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]

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>

 </script>

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

            else

                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, 
http://help.syncfusion.com/js/api/ejgrid#methods:expandcollapse

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",

               

                templateRefresh:"templaterefresh",

                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, 

http://help.syncfusion.com/js/api/ejgrid#events:templaterefresh
http://help.syncfusion.com/js/api/ejgrid#members:columns-template

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

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

        <input class="btn" />

    </script>

function templaterefresh(args) {

            $(args.cell).find('input').ejButton({

                text: "Add",

                click:"btnclick"

            })

        }

        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, 
http://js.syncfusion.com/demos/web/#!/azure/grid/Editing/CommandColumn

$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

                   }

                ]

            }

Regards,
Balaji Marimuthu