Unable to sort Blazor grid component

I am using Blazor Serverside, and want to make an editable datagrid.
So far, so good. However, when trying to sort the data, an error is thrown, and i have no idea how to debug or fix it:

[2019-12-27T14:05:47.397Z] Error: There was an error applying batch 6. blazor.server.js:15:27309
[2019-12-27T14:05:47.397Z] TypeError: i.parentNode is null blazor.server.js:8:27210

The code looks like this

    <RadzenGrid @ref="SkillsGridK" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
		AllowPaging="true" PageSize="4" AllowSorting="true" Data="@Skills.Where(skill => skill.Kind.Enum == KindEnum.KV)"
		Value="@skill" TItem="Skill" ColumnWidth="200px">
	<Columns>

		<RadzenGridColumn TItem="Skill" Property="Name" Title="Name" />
		<RadzenGridColumn TItem="Skill" Property="Level" Title="Level" Width="100px">
			<Template Context="skill">
				@skill.Level
			</Template>
			<EditTemplate Context="skill">
				<RadzenNumeric Min="1" Max="4" @bind-Value="skill.Level" Style="width:100%" />
			</EditTemplate>
		</RadzenGridColumn>
	</Columns>
</RadzenGrid>


///In the initialized
public RadzenGrid<Skill> SkillsGridK { get; set; }
List<Skill> Skills = [GET FROM DB CONTEXT] <-- This is filled correctly
Skill skill = Skills.First();

Data is filled nicely and editing/saving works as intended (omitted in this case).
Any idea why my parent node would be null?

Edit:
Updating from List to IQueriable gives the same error

Hi @MartijnWoudstra,

Not sure what can cause this - Iā€™m unable to reproduce it on our example:
https://blazor.radzen.com/datagrid-inline-edit

Make sure you have latest Radzen Blazor JavaScript:
https://blazor.radzen.com/get-started

I was aware of the example, and I tried to follow that to debug the problem, but no such luck.
Indeed i have the latest version

Any idea how to debug or where to look? Is there an issue page perhaps where I can report this?

After some more digging and setting up a bare project I found this. Does this ring any bell? Left is working, right is not

The right DataGrid header is not with the default look, is it customized? Maybe you have some template defined?

If anyone ever has this problem:

_Host.cs:

If you have font awesome in there (like I had), remove it.:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>

Perhaps this is a bug for the dev team to solve?

We will try to handle it in our code!

Is there any way we can switch out the icons in Radzen blazor with Font Awesome? That's our standard icon lib and having a different set of icons for things is not quite how we want to move forward? Can we create an override css for Radzens icons?

There is no built-in way to replace the icons - every icon font has its own specific and icon names.

You can override the selectors that specify icons for the components that you use. Just use a CSS rule with higher specificity.

I found a fix for this issue!
The font awesome javascript seems to be doing some really funny stuff with javascript and node.parentNode that is causing the error so i patched out Radzens blazor grid from this function by adding the part in green to fontawesome.js.
image

2 Likes