Creating complex RadzenDataGrid Columns programatically

Radzen.Blazor Components
1

Before I start, I have read several other questions on this forum and, although they partly answer this question, I feel I need some further clarification.
I have quite a complicated RadzenDataGrid that display properties from a list of objects (not really relevant to this).
I've had a user request that they can re-order, resize and hide columns and save it to their profile. Reading other threads about this, it seems that I cannot just re-order existing columns by changing their index, they have to be declared programmatically at the start and then the order can be changed as the order they are created can be configured.
So code similar to:

foreach (var column in columnSettings.OrderBy(c => c.Index))
 {
   <RadzenDataGridColumn TItem="MyItem" Property=@column.Property Visible=@column.Visible />
 }

Now most the columns I have have custom filtering applied and therefore have and sections defined under the column. These often have other logic (such as if statements and sometimes calling functions) embedded in them

Short of doing a massive if statement within my for loop checking the name and then creating the appropriate and sections, is there an easy way to create these sections with my custom columns.

I.e.

foreach (var column in columnSettings.OrderBy(c => c.Index))
 {
   <RadzenDataGridColumn TItem="MyItem" Property=@column.Property Visible=@column.Visible>
	@if (column.FilterText != null)
	{
	<FilterTemplate>
		@column.FilterText
	</FilterTemplate>
	}
	.... same for <Template>
	</RazdenDataGridColumn>
 }

Where FilterText is something similar to:
<RadzenNumeric @bind-Value=idValue ShowUpDown=false Style="width:100%" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "filter by ID" }})" />

2

Hi @strangebeing,

I don't think you can define Blazor content as a string and output it via @column.FilterText. It should be parsed as a RenderFragment first.

3

Thanks, so something like:

RenderFragment render => @column.FilterText ;
@render
4

I don't think this works either. The content should be defined in the .razor file so it is parsed. Rendering the string will output it verbatim.

5

Ok, in which case I'm struggling to see what that looks like other than going back to the massive if statement I talked about, something like:


foreach (var column in columnSettings.OrderBy(c => c.Index))
{
   <RadzenDataGridColumn TItem="MyItem" Property=@column.Property Visible=@column.Visible>
	if (@column.Name = "MyColumn1")
	{
		<FilterTemplate>
			<RadzenNumeric @bind-Value=idValue ShowUpDown=false Style="width:100%" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "filter by ID" }})" />
		</FilterTemplate>
	}
....lots of else if statements (1 per column)...
	</RadzenDataGridColumn>
}
6

To be honest I am not aware of other solution - Blazor markup needs to parsed in order to render. You can use helper .razor files in order to avoid this statement becoming huge:

if (@column.Name = "MyColumn1")
{
	<FilterTemplate>
		<MyColumnFilterTemplate />
	</FilterTemplate>
}
7

Thanks @korchev, I figured this might be the answer but wanted to make sure before I went and did some massive code changes to make this work!

8

Hi @strangebeing

I can't see why not (unless I'm missing something).

See OrderIndex property DataGrid DataGrid Column Reorder on the demo site. Particularly the FirstName and LastName columns.

Paul

9

@Paul_Ruston - Thanks, I missed that one! The threads I had been reading did suggest that you could not change this value to re-order the columns.
But if I create a dictionary and populate it with the order, then that might work and make my life a lot easier.

Thanks again

1 Like
10

Follow up for anyone who reads this later, changing the OrderIndex on component initialisation didn't work, I ended up creating all the columns in a large if statement.

To make it easier, moved each column into its own Component (except single line columns) which made if statement much more readable!