Data Query helper function { process } sorting problem

2 Answers 127 Views
Data Query Grid
SHING SHUN
Top achievements
Rank 1
Iron
SHING SHUN asked on 23 Jun 2021, 03:25 PM

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?

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 24 Jun 2021, 08:06 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
SHING SHUN
Top achievements
Rank 1
Iron
answered on 29 Jun 2021, 02:54 AM

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
Telerik team
commented on 29 Jun 2021, 07:05 AM

If sharing a sample JSON is possible, I will be happy to prepare an example showcasing a possible approach.
SHING SHUN
Top achievements
Rank 1
Iron
commented on 29 Jun 2021, 07:36 AM

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
Telerik team
commented on 30 Jun 2021, 11:58 AM

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
Top achievements
Rank 1
Iron
commented on 06 Jul 2021, 07:39 AM

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
Telerik team
commented on 07 Jul 2021, 09:51 AM

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.

Tags
Data Query Grid
Asked by
SHING SHUN
Top achievements
Rank 1
Iron
Answers by
Stefan
Telerik team
SHING SHUN
Top achievements
Rank 1
Iron
Share this question
or