Grouping in child grid not working

[Maurits van Beusekom]

Hello,

I have implemented a hierachical grid (parent and child grid). In these case I would like to allow the end-user to use the grouping functionality on the child grid. However it looks like it is not working correctly. The column moves to the grouping bar, however the records will not be grouped and looks like they all move one column to the left (see attached screenshots).

Am I doing something wrong or is it just not possible to group a child grid?

Here is my code (TypeScript):

/// <reference path="../tsfiles/jquery.d.ts" />

/// <reference path="../tsfiles/ej.web.all.d.ts" />

class CustomerService {

    private content: HTMLElement;

    private grid: ej.Grid;

    constructor(content: HTMLElement) {

        this.content = content;

    }

    initGrid() {

        const customerDataManager = new ej.DataManager({

            url: "api/Customers",

            adaptor: new ej.WebApiAdaptor()

        });

        const subscriptionDataManager = new ej.DataManager({

            url: "api/Subscriptions",

            adaptor: new ej.WebApiAdaptor()

        });

        this.grid = new ej.Grid(this.content,

            {

                dataSource: customerDataManager,

                childGrid: {

                    dataSource: subscriptionDataManager,

                    queryString: "id",

                    allowSorting: true,

                    allowGrouping: true,

                    groupSettings: { showToggleButton: true },

                    columns: [

                        { field: "entitlement_id", headerText: "Subscription ID" },

                        { field: "meter_category", headerText: "Category"},

                        { field: "meter_name", headerText: "Naam" },

                        { field: "usage_start_time", headerText: "Start verbruik" },

                        { field: "usage_end_time", headerText: "Einde verbruik" },

                        { headerText: "Verbruik", template: "{{:quantity}} ({{:unit}})" }

                    ]

                },

                allowFiltering: true,

                allowSorting: true,

                columns: [

                    { field: "id", isPrimaryKey: true, visible: false },

                    { field: "companyProfile.companyName", headerText: "Naam" },

                    { field: "companyProfile.domain", headerText: "Domein"},

                    { field: "companyProfile.tenantId", headerText: "Tenant" },

                    { field: "relationshipToPartner", headerText: "Relatie" }

                ]

            });

    }

}

 

Attachment: grouping_screenshots_e6fd9735.zip

[Venkatesh Ayothi Raman]

Hi Maurits, 

Thanks for contacting Syncfusion support. 

If we enable the Grouping, then we have to handle the Grouping in server side. Please refer to the following code example,  

Code example: 

// create a Sorting class 

public class Sort   

{   

    public string direction { get; set; }   

    public string name { get; set; }   

}   

 

 

  // here we can pass the paremeter  

         [HttpPost, Route("api/Subscriptions")] 

         public async Task<object> Subscriptions(int skip, int take, List<Sort> sorted, List<string> group) 

         { 

             //we can get the child query string filter value from filter parameters  

             // for paging we can also get the skip and take value from ski and take paramete 

             // Code something 

 

             return new { result = subscriptions, count = subscriptions.Count }; 

         } 

 

  

We went through your screenshot that you have shared for us and we suspect script error thrown in console window while we grouping the column. If so, provide the following details?  

1)      Screenshot of the script error. 

2)      Issue replication procedure. 

3)      Provide a sample if possible. 

Regards, 

Venkatesh Ayothiraman. 

[Maurits van Beusekom]

Hello support,

I am not seeing any errors in the console (see attached screenshot). Also I noticed that you mentioned I should handle an HttpPost on the server-side; however the console shows that a HttpGet request is issued (see screenshot, second line in the console).

So the console window in the screenshot contains two lines:

- first line is the HTTP GET request which is issued when I expand the row of the parent grid (here it will fetch the data used to populate the child grid);

- second line is the HTTP GET request which is issued when I group on the first column in the child grid.

Steps to replicate the problem:

1. Open the page which contains the grid;
2. After the (parent) grid is loaded, expand one of the rows;
3. When the child grid is loaded, click the group button in one of the child grids column headers;
4. When the child grid finishes with loading it is showing as shown in the previous screenshots.

When I try setting the datamanager controls to "offline: true" (since I don't need any callbacks to the server), I receive the following error in the console:

ej.web.all.min.js:10 Uncaught TypeError: n.dataSource.json.slice is not a function(…)

Here is my server-side code (client-side code hasn't been changed since previous post):

        [HttpGet, Route("api/Customers")]

        public async Task<object> Customers()

        {

            var customers = await _customerService

                .GetCustomersAsync();

            return new { result = customers, count = customers.Count };

        }

        [HttpGet, Route("api/Subscriptions")]

        public async Task<object> Subscriptions()

        {

            var filter = HttpContext.Request.Query["$filter"];

            if (string.IsNullOrEmpty(filter)) return NoContent();

            var filterArray = filter.ToString().Split(' ');

            if (filterArray.Length < 3) return NoContent();

            var tenantId = filterArray[2].TrimStart("guid'".ToCharArray()).TrimEnd("'}".ToCharArray());

            var subscriptions = await _subscriptionService

                .GetSubscriptionsForCustomerAsync(tenantId);

            var saToken = await _authenticationService.GetCrestAccessToken(User);

            var totalUsageRecords = new List<UsageRecord>();

            foreach (var subscription in subscriptions)

            {

                var usageRecords = await _usageService.GetUsageRecordsForSubscription(

                    subscription.Id,

                    DateTime.Today.AddDays(-7),

                    DateTime.Today,

                    saToken);

                totalUsageRecords.AddRange(usageRecords);

            }

            return new { result = totalUsageRecords, count = totalUsageRecords.Count };

        }

Attachment: Screenshot__Grouping__Console_e770a37a.zip

[Venkatesh Ayothi Raman]

Hi Maurits, 

Thanks for the update. 

Query #1:” Grouping is not working” 

Please provide the expanded data source screenshot after the Grouping the Child Grid like as follows 

 

 It would be helpful for us to find the problem and provide the better solution as earliest.  

Query #2:” When I try setting the datamanager controls to "offline: true" (since I don't need any callbacks to the server), I receive the following error in the console: 

ej.web.all.min.js:10 Uncaught TypeError: n.dataSource.json.slice is not a function(…) ” 

This issue happens, the result data is an object when RequiresCounts as false in DataManager. In such case, we need to send the data as result and count. Please refer to the below code example, 

Code example: 

[HttpGet, Route("api/Customers")] 

        public async Task<object> Customers( Boolean requiresCounts) 

        { 

            var customers = await _customerService 

                .GetCustomersAsync(); 

 

            return requiresCounts ? new { result = customers, count = customers.Count }: customers as Object; 

        } 

Regards, 

Venkatesh Ayothiraman.