akinzekeel/blazorgrid

A simple, light weight data grid component for Blazor, focused on displaying remote data. Supports sorting and row highlighting, dynamic column changes and custom cell markup.

BlazorGrid

BlazorGrid is yet another grid component for Blazor. I was inspired to write this because I've been using jQuery.DataTables for a long time and felt that incorporating more than 15,000 lines of JavaScript into my Blazor application probably wasn't the best approach.

The primary goals of this component are:

• Displaying remote data by utilizing virtualization
• Sorting and searching of remote data (backend support required)
• Require as little markup as possible to define the grid
• Use custom RenderFragments for the cells
• Highly customizable UI by providing SCSS
• Using a delegate to provide the data (which can pull the data via JSON, gRPC or anything else)
• High performance by intelligently preventing unnecessary render events

Check out the website for more information & demos:

blazorgrid.majidcodes.net

blazorgrid's Issues

Localization

The grid currently supports English and German.

If you happen to know any language other than those two, feel free to add a Resource file to BlazorGrid/Resources with the corresponding translations and issue a PR.

Initial "No data" message is not rendered

Probably missing a StateHasChanged() call in the ItemsProvider

Add responsive styling for the docs

Make the total count publicly accessible

In some scenarios it can be very useful to know the total number of rows in a grid (based on what the provider returned).

The component already has this property. Make it publicly readable.

Pass custom ViewModel to CustomProvider

I am planning to use this Grid control to fetch data from a Service
Can i use reference to a Service inside the CustomProvider rather than the HttpClient instance as in the example
https://github.com/Akinzekeel/BlazorGrid/blob/master/BlazorGrid.Demo/Providers/CustomProvider.cs

Is it possible to pass an extra filtering object along with the BlazorGridRequest request to the GetAsync method . In my case the custom FilterViewModel object holds different set of filtering criterias like 'Name' 'Email' 'List CountryIDs' 'List CompanyIDs' etc

I already created a Service to Provide the data inside my Infrastructure project IContactService and in Startup.cs i am injecting it like below
services.AddTransient<IContactService, ContactService>();

Then from my blazor pages can i call the function ContactService.GetFilteredDataAsyc(FilterViewModel, BlazorGridRequest )
as my data source?

I can see that a page @page "/examples/filters"
https://github.com/Akinzekeel/BlazorGrid/blob/cdb15bca684b848f61c59ff6146213357ef3a934/BlazorGrid.Demo/Pages/Examples/Filters.razor
Feeling that this is something i have to follow But looks like its not available in front end to see in action / the page is showing some syntax errors

Implement the filter builder

• Test the serialization and deserialization of the filter descriptor
• Consider providing a ready-made filter builder UI
• Add an example to the demo

No loading indication

Loading data from the ItemsProvider is currently not visually indicated.

There should be some kind of overlay to show that the component is busy.

Improve landing page

Improve the landing page of the demo project

• Mention the types of projects which are supported
• List the NuGet packages along with their current version
• Add a link to the getting started page
• Size information
• List of prominent features

Update the <title> when navigating the docs

Add a reload button to the error overlay

When loading data from the provider throws an exception, the exception is displayed instead of the data.

Consider adding a "Reload" or "Retry" button below the message.

Sorting icons are not aligned properly

BadRequest response in provider call may not trigger re-render

If the provider call throws an exception due to a BadRequest response, the exception will be set properly but no re-rendering seems to occur, meaning the error overlay only appears after a random re-render of the parent component or page.

Use LibSassBuilder instead of gulp

SourceUrl="weatherforecast" from the getting started sample is not working

Consider using flexbox or table instead of grid

We're currently using a CSS grid and a wrapper with display: content to style the grid. This worked in .net 5, however the virtualize component in .net 6 is known to behave in unexpected ways with this particular CSS property, and it is unclear whether this will be fixed by the dotnet team as this has never been officially supported in the first place.

Feature requests

This control looks interesting, it seems very responsive. There are a few things missing, however, that I would require before considering switching. I hope you can implement some of these in the future.

• Paging - virtualization is great, but sometimes a pager is preferable
• Per-column filtering
• Column drag and drop to rearrange
• Column selection, so columns can be shown/hidden
• The ability to read/set the column statue (column order, visible status, sort order, filters)
• Toolbar for top of grid, and button columns that work with the context of the row they appear on

Add text-overflow to column headers

Long text in column headers are currently flowing outside of the container.

Use overflow, white-space and text-overflow to improve this behavior.

Row selection using checkboxes

Hi,
It would be very useful to be able to select rows using a checkbox in each column and select all rows using a checkbox in the header.

How to use ReloadAsync()

Hi there,

nice grid.
Unfortunately I'm not yet deep into Blazor and ASP.NET, so I was asking myself, how can I trigger the ReloadAsync() method manually? I can't find an example in the docs.
I have a use case where I have additional filter parameters that I want to apply to the result set of the blazorgrid. Using only the QueryInput would not solve my scenario.

Thank you.

Finish getting started sections

• With Azure functions backend
• Blazor server-side
• Blazor WASM

Virtualize placeholder loading animation

Placeholder animation seems a bit janky. Do more testing & improve it

[Demo] Dynamic layout example grid header scrolls out of view

Must apply align-self: flex-start to the col element

getting-startet

unfortunately I have a few problems getting the software to fly.
As stated in https://blazorgrid.z6.web.core.windows.net/getting-started
I wrote

using BlazorGrid.Providers;
...
builder.Services.AddBlazorGrid<DefaultHttpProvider>();

but there is no namespace provider in Blazorgrid. and

I can't find
AddBlazorGrid<type>
in the software either.

Search query does not trigger render

When entering a search query, the provider is called properly with the query after the debounce, however no render happens when the provider returns the filtered data. Therefore search results are only visible after the next render.

Sticky header might disappear when scrolling

In certain scenarios - depending on the properties of the parent container - the grid header might scroll out of view when scrolling more than 100% of the parent's height.

See if this can be improved by either applying certain styles to the .blazorgrid container or by using a different solution for making the header sticky altogether.

Add guidance on how to use the grid with gRPC

Upgrade to .NET 6

Investigate Task cancellation handling

It appears that the grid might not always behave correctly if the client cancels the request via the CancellationToken. The issue can be triggered on purpose by scrolling down and up (typically by large distances) and then clicking on a column header to change the sorting.

• Write tests to ensure that the behavior is as expected
• Fix any bugs that surface during the tests

Write documentation

Technical documentation needs to be added in the Demo project.

• List of components and their parameters
• Configuration & DI
• Advanced scenarios
• Extensions / helpers

Add some code samples to the readme

It would probably be helpful to see what the markup of the grid looks like before diving into the getting started section and examples on the website.

Column header background turns transparent on hover

When the scroll position is > 0 and the use hovers over a sortable column header while using the default bootstrap theme, the header turns transparent, revealing the rows that are underneath it.

The header hover color should be a solid color.

Make grid rows selectable

Challenge for this feature is that all rows are within a Virtualize component and it's difficult to keep track of something like a row index.

This could perhaps be done with an addon however which will require the developer to provide some type of row-id expression.

Error overlay does not clear after retrying

If the grid encounters an error while loading data, it will show an error overlay with a retry button.

Clicking the retry button and retrieving data successfully will not clear the error overlay however.

[Demo] Virtualization example sets the delay globally

After visiting this example, the delay will also apply to all other examples until the page is reloaded or the delay is reduced back to 0 ms. The delay should be reset automatically when leaving this particular example page.

Consider replacing the IGridProvider with a delegate

The provider works fine for using different paths on a common REST API, however it is complicated to set it up for other scenarios like gRPC.

Since the provider has already been reduced to a single method at this point, we might as well use a delegate as the provider (similar to how the Virtualize component does)

Linked content files might be insufficient to build Scss

The linked content files do not appear to include the necessary default variables (which may vary based on the UI framework).

For a straight forward css build from source, those files should be included as well.

VirtualItemSize should be float

EmployeeController Server Side

Is it possible to get copy of EmployeeController (on server side) that is used for all demo pages?