Sorting datagrid dynamic data on the client side (not server side)

Radzen.Blazor Components
1

Sorting in this example is performed on the server.
https://blazor.radzen.com/datagrid-dynamic

We are using WebAssembly hosting model. Is sorting supported on client side for dynamic data. In the above example sorting is performed on the server. Is it possible to have it working on the client side.

Our situation is similar. Our models are dynamic which means at compile time we do not know the names/types of columns. All this is determined at runtime. We tried implementing client side sorting with dynamic data, but we get the following error.

No property or field 'PropertyName' exists in type 'TheTypeTheGridBindsTo' (at index 0)

Radzen grid expects the property (PropertyName) by which we are sorting to be available as a public property on the model class (TheTypeTheGridBindsTo) the grid is bound to.

After the data is loaded and rendered by the grid, we want the grid to be able to perform sorting and filtering on the client side just like how it works with static models. Syncfusion Grid supports this out of the box, just wondering if Radzen grid supports it too.

At the moment we are evaluating which component library to use. An answer or an example for sorting and filtering dynamic data on the client side will help us make this decision.

<RadzenDataGrid @ref="dataGridInstance" AllowSorting="true" Data="@GridData" TItem="Row"
                IsLoading="@isLoading">
    <Columns>
        @foreach (Tuple<string, Type> column in ColumnTypes)
        {
            string colName = column.Item1;
            Type colType = column.Item2;

            <RadzenDataGridColumn TItem="Row" Property="@colName" Type="@colType" Sortable="true">
                <Template>
                    <span>@(context.GetMember(colName))</span>
                </Template>
            </RadzenDataGridColumn>
        }
    </Columns>
</RadzenDataGrid>
@code {
    bool isLoading;
    RadzenDataGrid<Row> dataGridInstance;
    ViewModelContainer container;
    private List<Row> GridData;
    public List<Tuple<string, Type>> ColumnTypes { get; set; }

    protected override async Task OnInitializedAsync()
    {
        isLoading = true;
        container = new ViewModelContainer();

        GridData = container.GetAllRows();

        Row firstRow = GridData.First();
        ColumnTypes = firstRow.GetAllColumnTypes();
        
        isLoading = false;
    } 
}
2

You can use LoadData event to apply sorting, filtering and paging to your collection client side similar to this demo:
https://blazor.radzen.com/datagrid-loaddata

In the demo we’ve used LINQ to apply sorting, filtering and paging on in memory collection of objects.

3

Thank you enchev. Appreciate the quick turnaround.

While what you have mentioned is an option, just want to quickly check if sorting, paging and filtering work out of the box without having to implement any custom code. The reason for this is, on a given page we have many dynamic models and grids. To reduce complexity and for ease of maintainability we want to avoid writing any custom code where we can.

With the Syncfusion Grid, Sorting, Paging and Filering work out of the box with our dynamic models, so just wondering if Radzen grid supports the same.

Just like Radzen grid, the following is the code we have for Syncfusion grid. As you can see no additional custom code is required for sorting to work.

<SfGrid DataSource="@GridData" AllowSorting="true"@ref="Grid">
	  <GridColumns>	
					
			@foreach (Tuple<string, Type> column in ColumnTypes)
			{
				string colName = column.Item1;
				ColumnType colType = GetSyncFusionColumnType(column.Item2);
				bool isPrimaryKey = false;
				if (colName == "ID") isPrimaryKey = true;
					
				<GridColumn Field="@colName" HeaderText="@colName" Type="@colType" IsPrimaryKey ="@isPrimaryKey" >
				</GridColumn>
			}
		</GridColumns>
 </SfGrid>

@code {
	ViewModelContainer container;
	private List<Row> GridData;
	public List<Tuple<string, Type>> ColumnTypes { get; set; }
	SfGrid<Row> Grid;

	protected override async Task OnInitializedAsync()
	{
		container = new ViewModelContainer();

		GridData = container.GetAllRows();

		Row firstRow = GridData[0];
		ColumnTypes = firstRow.GetAllColumnTypes();
	}

	public ColumnType GetSyncFusionColumnType( Type type )
	{
		if(type == typeof(string))
		{
			return ColumnType.String;
		}
		else if (type == typeof(DateTime))
		{
			return ColumnType.Date;
		}
		else if (type == typeof(int) || type == typeof(decimal)  || type == typeof(double) )
		{
			return ColumnType.Number;
		}
		else if (type == typeof(bool))
		{
			return ColumnType.Boolean;
		}
		else
		{
			return ColumnType.None;	
		}
	}
}