Grid sorting with editing and complex data

1 Answer 416 Views
Grid
Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
Bernd asked on 23 May 2022, 04:21 PM

Hi.

I would like to sort my data in a Grid using a complex data type and also using editing with the grid. The issue is that the field I want to sort by is in a nested object like this:

[
	{
		id: 123,
		channel: {
			id: 1,
			label: "test1"
		},
		...
	},
...
]

So I would like to sort by channel.label. The issue is that I also use the edit capabilities of the Grid with this data and for editing the channel I use a dropdown which uses the id as key and the label as text of the dropdown but this is not the issue and editing works fine.

I have forked one of your Grid examples to demo my sorting issues with the Grid. As you can see there, I created my own sorting function but it does not work as expected. If you hit the column header multiple times, it only gets sorted once or twice and then not anymore. I guess there is something wrong in my sorting function, so if you could please let me know what I'm doing wrong there it would be great.

https://stackblitz.com/edit/react-qlfk8k-eqxmru

Thanks,

Bernd

1 Answer, 1 is accepted

Sort by
1
Accepted
Konstantin Dikov
Telerik team
answered on 25 May 2022, 11:55 AM

Hello Bernd,

The issue that you are facing is due to the fact that the sort expression created by the Grid will always be the same, because the column field is set to "Category" and since you are removing the default sort expression, the Grid will create the "asc" sort expression for the Category field every time. One way of handling this would be to check the existing sort expression and manually change the direction if the same expression is applied.

Another solution, which is the recommended one, is to set the field of the column to "Category.CategoryName" directly:

The "field" property of the columns should be set to the field over which the data operations will be applied. As for the editing, since you are using custom editor, you can still bind the DropDownList to the object from the dataItem.

Hope this helps.

 

Regards,
Konstantin Dikov
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/.

Tags
Grid
Asked by
Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
Answers by
Konstantin Dikov
Telerik team
Share this question
or