Skip to content

LazyTableDataSet Client Side Blazor

Jaroslav Surala edited this page Jul 27, 2019 · 2 revisions

Filtering

To the server side are sended FilterDefinitions. For proper receiving FilterDefinitions you have to create enum which use Blazor.FlexGrid (You can also use types from FlexGrid nuget).

[Flags]
public enum FilterOperation
{
	None = 0,
	Equal = 1,
	LessThan = 2,
	LessThanOrEqual = 4,
	GreaterThan = 8,
	GreaterThanOrEqual = 16,
	NotEqual = 32,
	Contains = 64,
	StartsWith = 128,
	EndsWith = 256
}

Next you need create FilterDefinition object

public class FilterDefinition
{
  public string ColumnName { get; set; }
  public object Value { get; set; }
  public FilterOperation FilterOperation { get; set; }
}

And last thing you must create proper action methond in controller in server. Because LazyTableDataSet use for paging and sorting params GET method, you must use POST method for paging and sorting params with FilterDefinitions param In Controller you can use for query paramters DTO object provided by FlexGrid FlexGridQueryDto which contains every query parameter which can be sended to the server.

[HttpPost("[action]")]
public IActionResult WeatherForecasts(FlexGridQueryDto queryParams, [FromBody] IEnumerable<FilterDefinition> filters)
{
	var items = staticRepositoryCollections.Forecasts.Values.AsQueryable();

	var sortExp = queryParams.SortExpression;
	if (!string.IsNullOrEmpty(sortExp))
	{
		if (queryParams.SortDescending)
		{
			sortExp += " descending";
		}
		items = items.OrderBy(sortExp);
	}

	return Ok(new
	{
		Items = items.Skip(queryParams.PageSize * queryParams.PageNumber).Take(queryParams.PageSize).ToList(),
		TotalCount = staticRepositoryCollections.Forecasts.Count
	});
}

Both methods must have same name.

Grouping

To the server side is send query parameter GroupExpression which contain property name which is used for grouping. In Controller you can use for query paramters DTO object provided by FlexGrid FlexGridQueryDto which contains every query parameter which can be sended to the server. Server response must have property Items and type must be Dictionary where the Key is value of the group key and Value is list of group items.

Example:

[HttpGet("[action]")]
public IActionResult WeatherForecasts([FromQuery] FlexGridQueryDto queryParams)
{
	var items = staticRepositoryCollections.Forecasts.Values.AsQueryable();
	if (!string.IsNullOrEmpty(queryParams.GroupExpression))
	{
		var groupedItems = items.GroupBy(queryParams.GroupExpression, "it")
		 .Select<GroupItem<WeatherForecast>>(ParsingConfig.Default, "new (it.Key as Key, it as Items)");

		return Ok(new
		{
			Items = groupedItems.ToDictionary(g => g.Key, g => g.Items),
			TotalCount = groupedItems.Count()
		});
	}	
	// Rest of code
}
Clone this wiki locally