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.
Unfortunately, activation email could not send to your email. Please try again.

An array within an array data source

Thread ID:

Created:

Updated:

Platform:

Replies:

120668 Oct 1,2015 03:39 PM Oct 9,2015 01:58 AM JavaScript 3
loading
Tags: ejGrid
Lory
Asked On October 1, 2015 03:39 PM

Hi Team,

I have a data source that is an array within array. I want the array to be the data source of the parent grid and the inner array to the data source of the child grid. Is that possible to do?


Thanks.

Ragavee U S [Syncfusion]
Replied On October 2, 2015 06:35 AM

Hi Lory,

We can achieve your requirement using the detailsExpand event of the parent grid.

In the detailsExpand event of the grid, we can get the inner array object corresponding to the parent record and assign that data to the childGrid in the create event of the childgrid.

Please refer to the following code example.

    <script type="text/javascript">

        var data = [

             { OrderID: 1, EmployeeName: 'James', Details: [{ "CustomerName": "Sam", CustomerID: 1 }, { "CustomerName": "Nancy", CustomerID: 2 }] },

          . . .

        ]

        $(function () {

            $("#Grid").ejGrid({

                dataSource: data,

                . . . .

                detailsExpand: expandDetails,

                childGrid: {

                    dataSource: [],

                    queryString: "EmployeeID",

                    allowPaging: true,

                    create: 'childCreate',

                    . . . .

                },

            });


        });

//detail expand event of the parent grid

        function expandDetails(args) {

            window.childData = args.masterData.Details; //get the inner array object and store in a variable

        }


//create event of the childgrid

        function childCreate(args) {

            this.dataSource(window.childData); //assigning the child grid dataSource using the dataSource method of the grid

        }


    </script>


For your convenience, we have created a sample with the above solution, which can be downloaded from the below location.

Sample Link: http://jsplayground.syncfusion.com/05l5riis

Regards,
Ragavee U S.

Lory
Replied On October 8, 2015 12:54 PM

That's great. It is exactly what I required! Follow up question, how do I disable or remove the expansion of a row if the inner array is empty?

Thanks.


Sellappandi Ramu [Syncfusion]
Replied On October 9, 2015 01:58 AM

Hi Lorry,

Thanks for the update.

We have created a sample to hide the details row if it has the empty array by using detailsExpand event.

Please refer to the below document for detailsExpand event, 

http://help.syncfusion.com/js/api/ejgrid#events:detailsexpand

Please find the code example and sample.

        $(function () {

            $("#Grid").ejGrid({

                dataSource: data,

                allowSorting: true,

                columns: [

                       ….

                ],

                detailsExpand: expandDetails,

                childGrid: {

                    dataSource: [],

                    queryString: "EmployeeID",

                    allowPaging: true,

                    create: 'childCreate',

                    columns: [

                                ….


                    ]

                },


            });


        });

        function expandDetails(args) {

            window.childData = args.masterData.Details;

            if (window.childData.length == 0) {

                args.cancel = true;

                args.detailsRow.hide();

                if ($(args.masterRow.context).hasClass("e-icon"))

                    args.masterRow.context.remove();

            }

        }

                ….


    </script>


Sample Link: http://jsplayground.syncfusion.com/wmbyiu1s

Regards,
Sellappandi R

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.

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.

;