Gridview grouping does not work with the remote data

[Dayakar Reddy Borampeta]

Dear team,

The grid group does note work with remote data we have attached sample remote data response.

this is our code below. we are using syncfusion angular 20.1.55 version npm packages

<ejs-grid [id]="gridName" #grid [height]='gridHeight' rowHeight='28' [dataSource]="jointDataManager"

[allowPaging]="false" [allowSorting]="true" [sortSettings]='sortOptions' [allowFiltering]="true"

[allowGrouping]="true" [pageSettings]="pageSettings" allowReordering="true" showColumnChooser="true"

[toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" (excelExportComplete)='excelExpComplete()'

[filterSettings]="filterSettings" [allowResizing]="true" [enablePersistence]="true" [showColumnMenu]='true'

[columnMenuItems]='columnMenuItems' (columnMenuClick)='columnMenuClick($event)'

(rowSelected)="selectionChanged($event)" (rowDeselected)="selectionChanged($event)"

(beforeDataBound)="onBeforeDataBound($event)" [selectionSettings]="selectOptions" [enableInfiniteScrolling]='true'

[infiniteScrollSettings]='infiniteOptions' [contextMenuItems]="contextMenuItems"

(contextMenuClick)="contextMenuClick($event)" (contextMenuOpen)="contextMenuOpen($event)" [allowExcelExport]='true'

(rowDataBound)="rowDB($event)" (dataBound)="dataBound()" [columns]="columns" [rowRenderingMode]="rowMode"

[enableAdaptiveUI]='enableAdaptiveUI' (recordDoubleClick)="recordDoubleClick($event)"

(queryCellInfo)="onTooltip($event)" [editSettings]="editSettings">

<ng-template #groupSettingsCaptionTemplate let-data>

<div *ngIf="rel='nofollow' hrefProperties.indexOf(data.field) < 0">

<span>{{data.headerText}}:- {{data.key}} Count:- {{data.count}} item(s)span>

div>

<div *ngIf="rel='nofollow' hrefProperties.indexOf(data.field) > -1">

<span>{{data.headerText}}:- <a rel='nofollow' href="javascript:void(0)"

(click)="loadGroupHeaderDocument(data)">{{data.key}}a>

Count:- {{data.count}} item(s)span>

div>

ng-template>

ejs-grid>

Attachment: group_issue_2_4e3e62a3.zip

[Rajapandiyan Settu]

Hi Dayakar,

Thanks for contacting Syncfusion support.

Before proceeding with your query, kindly share the below details to validate this further.

1. Please add the actionFailure event to your grid and let us know if you encounter any exceptions or errors in the console window.

 

[app.component.html]

<ejs-grid #grid (actionFailure)='actionFailure($event)' >

    ---

</ejs-grid>

[app.component.ts]

    actionFailure(args: any) {

        console.log(args);

    }

1. Please specify which type of adaptor you are using in your grid and provide more information about the jointDataManager and share its code details.
2. Please share the complete grid code files (app.component.html and app.component.ts) and the package.json file.
3. Can you please explain why you are returning groupDs in the response?

Regards, 

Rajapandiyan S 

[Ali]

We are using UrlAdaptor and this what gets return from server.

Server side we are on version 20.4.0.44 and client side 20.4.48.

This used to work before. Are there any breaking changes with latest pack

[Rajapandiyan Settu]

Hi Dayakar,

To better understand the issue you're facing with the Grid, we would appreciate it if you could provide us with the following information:

1. Complete code files for the grid, including the app.component.html and app.component.ts, and the package.json file.
2. Code used in the controller for performing the Grid operations.
3. Details on whether you're using the LazyLoad grouping feature in the Grid.

This information will help us replicate the issue and provide a solution.

Regards,

Rajapandiyan S

[Ali]

Hello,

Please see attached sample, it seems like it's not just the group, search and where operations are broken too.

Try Searching or grouping a column.

Ali

Attachment: SyncfusionSample_3e67d631.zip

[Rajapandiyan Settu]

Hi Ali,

When we perform searching, and grouping in the provided sample, the below-highlighted exception (System.NullReferenceException) is thrown on the controller side.

Screenshot:

By analyzing the issue, we confirmed that it may be raised because of some SerializerSettings. We have resolved this by using the below SerializerSettings in the program.cs file. Refer to the below documentation for more information.

UG: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/data-binding#troubleshoot-grid-render-rows-without-data

If the ASP.NET CORE version is 3.X then add the below code in program.cs file

 

[program.cs]

 

using Newtonsoft.Json.Serialization;

 

var builder = WebApplication.CreateBuilder(args);

 

builder.Services.AddMvc().AddNewtonsoftJson(options =>

{

    options.SerializerSettings.ContractResolver = new DefaultContractResolver();

});

 

Also, please provide proper field name (PascalCase) to the Grid Columns.

[fetch-data.component.html]

    <e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column>

    <e-column field='CustomerId' headerText='Customer Name' width='150'></e-column>

    <e-column field='OrderDate' headerText='Date' format="yMd" width='150'></e-column>

    <e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionSample-1046215553.zip

Regards,

Rajapandiyan S

[Ali]

This won't work for us. ASP.NET Core is returning camelCase format to follow industry standard.

Could you please provide me a sample that works with camelCase format.

Thanks

[Ali]

Hello, any updates to this issue??

[Rajapandiyan Settu]

Hi Ali,

In EJ2 Grid, we have to provide the Column field name as like in the dataSource. Since the OrdersDetail class contains the fields in PascalCase format. So, you should bind the field name in PascalCase format to the Grid Column. Else, the data are not shown in the grid and we cannot perform any actions on the columns.

 

[OrdersDetails.cs]

 

    public class OrdersDetails

    {

 

        public int OrderID { get; set; }

        public string CustomerId { get; set; }

        public int EmployeeId { get; set; }

        public double Freight { get; set; }

        public string ShipCity { get; set; }

        public bool Verified { get; set; }

        public DateTime OrderDate { get; set; }

        public string ShipName { get; set; }

        public string ShipCountry { get; set; }

        public DateTime ShippedDate { get; set; }

        public string ShipAddress { get; set; }

    }

 

 

[fetch-data.component.html]

<ejs-grid #grid [dataSource]='data'>

  <e-columns>

    <e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column>

    <e-column field='CustomerId' headerText='Customer Name' width='150'></e-column>

    <e-column field='OrderDate' headerText='Date' format="yMd" width='150'></e-column>

    <e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column>

  </e-columns>

</ejs-grid>

 

In ASP.NET Core, by default, the JSON results are returned in camelCase format. To avoid this problem, you need to add DefaultContractResolver in program.cs file.

https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/data-binding#troubleshoot-grid-render-rows-without-data

Regards,

Rajapandiyan S

[Ali]

This won't work for us. ASP.NET Core is returning camelCase format to follow industry standard.

Could you please provide me a sample that works with camelCase format.

Thanks

[Ali]

Hello, any updates to this issue??

[Rajapandiyan Settu]

Hi Ali,

As we said in the previous update, the Column field name should be provided as in the dataSource. If you want to bind camelCase format data, you should have the fields with camelCase format in your dataset.

 

[OrdersDetails.cs]

 

    public class OrdersDetails

    {

 

        public int orderID { get; set; }

        public string customerId { get; set; }

        public int employeeId { get; set; }

        public double freight { get; set; }

        public string shipCity { get; set; }

        public bool verified { get; set; }

        public DateTime orderDate { get; set; }

        public string shipName { get; set; }

        public string shipCountry { get; set; }

        public DateTime shippedDate { get; set; }

        public string shipAddress { get; set; }

    }

 

 

[fetch-data.component.html]

<ejs-grid #grid [dataSource]='data'>

  <e-columns>

    <e-column field='orderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column>

    <e-column field='customerId' headerText='Customer Name' width='150'></e-column>

    <e-column field='orderDate' headerText='Date' format="yMd" width='150'></e-column>

    <e-column field='shipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column>  </e-columns>

</ejs-grid>

 

https://stackoverflow.com/questions/38728200/how-to-turn-off-or-handle-camelcasing-in-json-response-asp-net-core
https://stackoverflow.com/questions/58476681/asp-net-core-3-0-system-text-json-camel-case-serialization

https://stackoverflow.com/questions/19445730/how-can-i-return-camelcase-json-serialized-by-json-net-from-asp-net-mvc-controll

Regards,

Rajapandiyan S

Attachment: SyncfusionSample_camelCase_field_5c754b20.zip

[Ali]

It's even broken in your attached sample, try grouping it with 'Order Date'.

[Rajapandiyan Settu]

Hi Ali,

We suggest you to return the data in result and count format to the Grid to resolve the reported problem.

 

[HomeControllers.cs]

 

        public dynamic UrlDatasource([FromBody] DataManagerRequest dm)

        {

            IEnumerable DataSource = OrdersDetails.GetAllRecords();

            DataOperations operation = new DataOperations();

            if (dm.Search != null && dm.Search.Count > 0)

            {

                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search

            }

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                DataSource = operation.PerformSorting(DataSource, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);

            }

 

            int count = DataSource.Cast<OrdersDetails>().Count();

            if (dm.Skip != 0)

            {

                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging

            }

            if (dm.Take != 0)

            {

                DataSource = operation.PerformTake(DataSource, dm.Take);

            }

 

            dynamic results = new ExpandoObject();

            results.result = DataSource;

            results.count = count;

 

            return dm.RequiresCounts ? results : DataSource;

        }

Also, we need to use the below ContractResolver to perform all the Grid operations at the server.

 

[program.cs]

builder.Services.AddMvc().AddNewtonsoftJson(options =>

{

    options.SerializerSettings.ContractResolver = new DefaultContractResolver();

});

 

Regards,

Rajapandiyan S

[Ali]

Above seems to be working for Pascal case properties. I am using camel case , how do I about it. Do you have a sample for me.

Thanks

[Ali]

Hello, any updates to this issue??

[Ali]

Could you please accept if this is a bug and will be resolve in next release. I have to report this to business to make appropriate decision.....

[Rajapandiyan Settu]

Hi Ali,

Sorry for the inconvenience caused.

We have confirmed that the reported requirement is an issue from our side and logged it as - “Provide support to render and perform data action without using ContractResolver in AspNet Core”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on Mar 29^th, 2023.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/41898/provide-support-to-render-and-perform-data-action-without-using-contractresolver

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,
Rajapandiyan S

[Ali]

Thank you for the acknowledgment, we are looking forward for the fix. 

Ali

[Joseph Christ Nithin Issack]

Ali,

We are unable to complete this improvement “Provide support to render and perform data action without using ContractResolver in AspNet Core” as planned. We will include this implementation in our Volume 1 SP release which is scheduled to be rolled out in May, 2023.

FB Link:  https://www.syncfusion.com/feedback/41898/provide-support-to-render-and-perform-data-action-without-using-contractresolver

[Hemanthkumar S]

Hi Dayakar Reddy Borampeta,

We are glad to announce that, we have included the fix for the issue “Provide support to render and perform data action without using ContractResolver in AspNet Core” in our 21.2.5 release.  So please upgrade to our latest version of the Syncfusion NuGet package to resolve the reported issue. For reference, please find the attached sample.

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards,

Hemanth Kumar S

Attachment: ContractResolverCheck_b1b8d85.zip