Unable to sort Blazor grid component

MartijnWoudstra · December 27, 2019, 2:25pm

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

enchev · December 27, 2019, 5:58pm

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

MartijnWoudstra · December 27, 2019, 7:57pm

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?

MartijnWoudstra · December 27, 2019, 8:27pm

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

enchev · December 27, 2019, 8:31pm

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

MartijnWoudstra · December 27, 2019, 9:09pm

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?

enchev · December 28, 2019, 3:43pm

We will try to handle it in our code!

darixidor · January 31, 2020, 10:46pm

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?

korchev · February 1, 2020, 7:18am

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.

Builderb · September 26, 2020, 3:38am

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.