Data Query helper function { process } sorting problem

[SHING SHUN]

I am using the helper function process, like this example

https://www.telerik.com/kendo-react-ui/components/dataquery/bulk-operations/ 

const data = [
    { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Cajun Seasoning", "unitPrice": 22, "unitsInStock": 53, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
      "category": { "categoryName": "Condiments" }
    }
];

const result = process(data, {
    group: [{
        field: 'category.categoryName',
        aggregates: [
            { aggregate: "sum", field: "unitPrice" },
            { aggregate: "sum", field: "unitsInStock" }
        ]
    }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
            { field: "discontinued", operator: "eq", value: true },
            { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

 

I am expecting the result like the example

{
  "data": [
    { "aggregates": {
        "unitPrice": { "sum": 53.35 },
        "unitsInStock": { "sum": 66 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
          "category": { "categoryName": "Condiments" }
        },
        { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
          "category": { "categoryName": "Condiments" }
        }
      ],
      "value": "Condiments"
    },
    {
      "aggregates": {
        "unitPrice": { "sum": 37 },
        "unitsInStock": { "sum": 56 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        },
        { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        }
      ],
      "value": "Beverages"
    }
  ],
  "total": 4
}

 

But I actually got this, which is not ordering by the product name, but order by the category name and then product name

{
  data: [
    {
      aggregates: {
        unitPrice: {
          sum: 37,
        },
        unitsInStock: {
          sum: 56,
        },
      },
      field: "category.categoryName",
      items: [
        {
          productName: "Chang",
          unitPrice: 19,
          unitsInStock: 17,
          discontinued: false,
          category: {
            categoryName: "Beverages",
          },
        },
        {
          productName: "Chai",
          unitPrice: 18,
          unitsInStock: 39,
          discontinued: false,
          category: {
            categoryName: "Beverages",
          },
        },
      ],
      value: "Beverages",
    },
    {
      aggregates: {
        unitPrice: {
          sum: 31.35,
        },
        unitsInStock: {
          sum: 13,
        },
      },
      field: "category.categoryName",
      items: [
        {
          productName: "Gumbo Mix",
          unitPrice: 21.35,
          unitsInStock: 0,
          discontinued: true,
          category: {
            categoryName: "Condiments",
          },
        },
        {
          productName: "Aniseed Syrup",
          unitPrice: 10,
          unitsInStock: 13,
          discontinued: false,
          category: {
            categoryName: "Condiments",
          },
        },
      ],
      value: "Condiments",
    },
  ],
  total: 4,
}

 

How can I achieve the result in the example?

[Stefan]

Hello, 

Thank you for bringing this to our attention.

After different tests, we can confirm that there is an issue with the example output in the documentation.

The sort will only sort the item inside the group, not the groups themselves. The group can be sorted as well using the dir field of the group:

https://www.telerik.com/kendo-react-ui/components/dataquery/api/GroupDescriptor/#toc-dir

If you share more details about the required representation, we can provide more to-the-point suggestions.

I have also added Telerik points to your account from sharing this issue with us.

Regards,
Stefan
Progress Telerik

[SHING SHUN]

I would like to have this representation in kendo react grid:

Which is order by the Date, and group by the type and sequence.

In telerik report I can easily achieve this by grouping

Is there any way to show this representation in kendo react grid, to align with the representation with the report?

[Stefan]

If sharing a sample JSON is possible, I will be happy to prepare an example showcasing a possible approach.

[SHING SHUN]

Here is a sample json:

[
{
"Date": "2012-04-13 12:43:00",
"Class": {
"description": "1st",
"ClassType": {
"description": "Eng",
}
}
},
{
"Date": "2012-05-14 15:18:00",
"Class": {
"description": "2nd",
"ClassType": {
"description": "Eng"
}
}
},
{
"Date": "2012-10-16 12:08:00",
"Class": {
"description": "3rd",
"ClassType": {
"description": "Eng",
},
},
},
{
"Date": "2012-12-07 17:48:00",
"Class": {
"description": "ABC",
"ClassType": {
"description": "HIJ",
},
},
},
{
"Date": "2014-01-20 10:01:00",
"Class": {
"description": "ABC",
"ClassType": {
"description": "HIJ",
},
},
},
{
"Date": "2014-12-08 15:57:00",
"Class": {
"description": "ABC",
"ClassType": {
"description": "HIJ",
},
},
}
]

[Stefan]

Thank you for the JSON.

Based on the provided information I was able to create an example:

https://stackblitz.com/edit/react-jac5ql?file=app/main.jsx

Please take a look at the example and share if there are any differences and what are they. This will allow us to see how they can be addressed.

[SHING SHUN]

I hope to achieve this: 

I use :

const initialGroup = [
        { field: 'Class.ClassType.description' },
        { field: 'Class.description' }
  ];

      const initialSort = [
        {field: 'Date', dir: 'desc' }
      ]

 

               <Grid
                    style={{
                        height: '600px'
                    }}
                    data={process(data, { group: initialGroup, sort: initialSort })}
                    group={initialGroup}
                    sort={initialSort}
                    >
                    <Column field="Class.description" title="Class Description" />
                    <Column
                        field="Class.ClassType.description"
                        title="Class ClassType description"
                    />
                    <Column field="Date" title="Date" />
                  </Grid>      

But the result is: 

[Stefan]

Thank you for the extra details.

Indeed, this will require extra modifications over the data as we currently sort the groups and the date sort is only inside the group.

To ensure we can provide more accurate suggestions please clarify if the current grouping UX will converting the requirements as the sample image looks a little different in terms of UX compare to the Grid?

Also, if sharing a report generated by the report server is possible, please share a sample one, as this will help us see how it looks in the report. This is because it may be another component that will represent this data better.