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.

Grouping in child grid not working

Thread ID:

Created:

Updated:

Platform:

Replies:

127349 Nov 9,2016 10:35 AM Nov 15,2016 10:50 AM ASP.NET Core 3
loading
Tags: Grid
Maurits van Beusekom
Asked On November 9, 2016 10:35 AM

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 [Syncfusion]
Replied On November 10, 2016 05:52 AM

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 { getset; }   
    public string name { getset; }   
}   
 
 
  // 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
Replied On November 14, 2016 05:42 AM

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 [Syncfusion]
Replied On November 15, 2016 10:50 AM

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. 


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.

;