WebApiAdaptor and Grouping not working, no records found

[Laurin S]

Hi,

I'm using the WebApiAdaptor to fetch the data of my grid from a REST API. The data gets perfectly shown by my grid. Once I want to group the grid by a particular column, for example by the column "description" (by clicking on the respective action in the column header menu), the grid does not show any records anymore. Therefore, I have the following two questions:

1. Is my implementation to fetch data from a REST API and for allowing grouping correct?
2. In order to group my data on the API server, and using the WebApiAdaptor, how should the REST API url look like? Right now, when the grouping action get clicked in the grid, the REST API call looks like always, there is no change in the call visible, which tells the API server to group the records.

My data from the REST API looks like this:

{"result": [{"id": "763f848f-646d-4e4a-a940-987fe44c085b","description": "Clean room 2","done": true....

},....],"count": 3}

My current implementation looks like this:

constructor(props) {

      this.hostUrl = "https://localhost:44340/";

      this.tasks = new DataManager({

        url: this.hostUrl + "api/tasks",

        adaptor: new WebApiAdaptor(),

        crossDomain: true,

      });

    }

...

render() {

    return (

      <>

           <GridComponent

                  id="grid"

                  ref={(g) => (this.grid = g)}

                  dataSource={this.tasks}

                  allowGrouping={true}

               >

                <ColumnsDirective>

                    <ColumnDirective

                      field="id"

                      headerText="ID"

                      visible={false}

                      isPrimaryKey={true}

                      isIdentity={true}

                      showInColumnChooser={false}

                    ></ColumnDirective>

                    <ColumnDirective

                      field="done"

                      headerText="Done"

                      width="5%"

                      type="boolean"

                      editType="booleanEdit"

                    ></ColumnDirective>

                    <ColumnDirective

                      field="description"

                      headerText="Description"

                      width="30%"

                    ></ColumnDirective>

                    .....

               </ColumnsDirective>

                  <Inject

                    services={[

                      Toolbar,

                      Page,

                      Reorder,

                      Resize,

                      Sort,

                      Group,

                      ColumnMenu,

                      ForeignKey,

                      Edit,

                      PdfExport,

                      ExcelExport,

                    ]}

                  />

                </GridComponent>

          </>

)}

Attachment: Grid_Grouping_2aa75663.zip

[Manivel Sellamuthu]

Hi Laurin, 

 

Greetings from Syncfusion support. 

 

From the attached code example we could see that you have not returned the data in the form of Items and Count to the Grid component.  

So we suggest you to return the data from your service as an Items and Count pair to resolve the reported issue. Please refer the below  details for more information. 

 

Documentation : https://ej2.syncfusion.com/react/documentation/data/adaptors/#web-api-adaptor 

 

For your reference, we have shared a server-side code example of WebApi adaptor as given below. 

 

[OrdersController.cs] 

 

        public object Get() 

        { 

            var queryString = Request.Query; 

            var data = OrdersDetails.GetAllRecords().ToList();  

            int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 

        } 

 

For your reference, we have shared the screenshot with server return the data format. 

 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Manivel 

[Laurin S]

Ok, finally after x days i found out that this grid is case sensitive for data binding. is that boring... so i was changing and experimenting with the API for days and the grid never displayed the data when items: [], count: x, were returned in lower case. Well, when i just suddenly capitalized "Items" and "Count", it finally worked. But even more irritating was, that when i sent my data as result: [], count: x from the server to the client, it worked despite the lower case. the data was displayed in the grid, but the grouping never worked. annoying, some hints in the documentation would be nice ;-) thanks in the meantime

[Manivel Sellamuthu]

Hi Laurin, 

Thanks for your update. 

We are glad that your requirement has been resolved. 

we need to return the data as Items and Count for WebApi. We have already discussed about this in our documentation section. Please refer the below documentation link for more information. 

Documentation: https://ej2.syncfusion.com/react/documentation/data/adaptors/#web-api-adaptor 

 

Please let us know, if you need further assistance. 

Regards, 

Manivel