gustavnavar / grid.blazor

Grid component with CRUD for Blazor (client-side and server-side) and ASP.NET Core MVC

Grid.Blazor

GridBlazor is a Blazor component that shows data in a grid. It requires a back-end component that performs paging, sorting, filtering and others.

This back-end component can be one of the following:

• GridCore (v.5.0.0 or later), supporting ASP.Net Core 3.1, ASP.Net 5.0, ASP.Net 6.0 and ASP.Net 7.0. GridMvcCore, that it is a fork from https://gridmvc.codeplex.com/, was working for earlier versions. But GridMvcCore is only required for Blazor WASM (REST) and ASP.NET MVC projects now.
• an OData back-end. All samples are based on Microsoft.AspNetCore.OData library, but it can be any other OData provider.
• GridJavaCore back-end for Java JPA / Hibernate projects (https://github.com/gustavnavar/Grid.Java.Core)

It supports .NET Core 3.1 and 5.0, 6.0, 7.0 and 8.0, and Blazor WebAssembly 3.2.0, 5.0, 6.0, 7.0 and 8.0

Demo

• Blazor server-side: http://gridblazor.azurewebsites.net
• Blazor WASM with GridMvcCore back-end (REST API): http://gridblazorwasm.azurewebsites.net
• Blazor WASM with GridCore back-end (gRPC): http://gridblazorgrpc.azurewebsites.net
• Blazor WASM with OData back-end: http://gridblazorodata.azurewebsites.net
• Blazor WASM with data local in the client: http://gridblazorlocal.azurewebsites.net

Documentation

There are native C# Grid components for Blazor client-side and server-side, and for ASP.NET Core MVC.

You can find the specific documentation for each environment clicking the following links:

• Documentation for Blazor WASM with GridMvcCore back-end (REST API)
• Documentation for Blazor WASM with GridCore back-end (gRPC)
• Documentation for Blazor WASM with OData back-end
• Documentation for Blazor WASM with local data
• Documentation for Blazor server-side
• Documentation for ASP.NET Core MVC
• Using GridBlazor component for ASP.NET Core MVC

This is an example of a table of items using this component:

Migration to GridBlazor 3.5.0 and GridCore 5.5.0 from GridBlazor 3.0.0 and GridCore 5.0.0 for Blazor WASM projects with REST back-end

1. You have to remove the package GridCore and install the package GridMvcCore, and upgrade the GridBlazor package

2. You must replace all GridCore instances by GridServer ones

3. The Grid property of the GridServer object has an SGrid<T> type, instead of ISGrid<T> it was before. You should change any reference to this property to reflect this change.

4. Some classes have been moved from the GridCore package to the GridMvc one. Change all required using ... as needed.

Migration to GridBlazor 3.0.0 and GridCore 5.0.0 for all Blazor projects except Blazor WASM (REST) ones

1. You have to remove the package GridMvcCore and install the package GridCore, and upgrade the GridBlazor package

2. You must replace all GridServer instances by GridCore ones

3. The Grid property of the GridCore object has an ISGrid<T> type, instead of SGrid<T> it was before. You should change any reference to this property to reflect this change.

4. Some classes have been moved from the GridMvc package to the GridCore one. Change all required using ... as needed.

Migration to GridBlazor 3.0.0 and GridMvc 5.0.0 for Blazor WASM (REST) projects

1. You have to upgrade the GridMvcCore and GridBlazor packages

2. The Grid property of the GridServer object is of type ISGrid<T>, instead of SGrid<T> it was before. You should change any reference to this property to reflect this change.

3. Some classes have been moved from the GridMvc package to the GridCore one. Change all required using ... as needed.

Notes

• GridBlazor 3.4.1 supports the build-in InputFile component for columns of type "file" for .Net 6.0 and later projects. The old Agno.BlazorInputFile component is ussed for .Net Core 3.1 and .Net 5.x projects. See https://github.com/gustavnavar/Grid.Blazor/blob/master/docs/blazor_client/Crud.md#file-type-columns

• GridBlazor 3.0.0 supports .Net 6.0

• GridMvcCore has been split in 2 parts from version 5.0.0 on:

  • GridCore: it includes all code necessary for the back-end Blazor applications (data processing, filtering, sorting, etc.), excluding all MVC dependencies (Razor view and pages rendering).
  • GridMvcCore: it only includes all MVC dependencies required for rendering Razor views and pages.

• Sorting is implemented on GridBlazor 2.1.2, GridMvcCore 4.1.2 and newer versions following this sequence "no sort" -> "sort ascending" -> "sort descending" -> "no sort" and so on when a column title is clicked

• GridMvcCore 3.0.0 does not support .Net Core 2.x. It requires .NET Core 3.1

• GridBlazor 1.6.7 requires a change on the column definition when selecting rows with checkboxes using the SetCheckboxColumn method. It's mandatory to identify the columns that are primary keys for the grid. You must do it using the SetPrimaryKey(true) method for the primary key columns' definitions:

      c.Add("CheckboxColumn").SetCheckboxColumn(true, o => o.Customer.IsVip);
      c.Add(o => o.OrderID).SetPrimaryKey(true);

• GridBlazor 1.6.2 doesn't support the CheckedRows property anymore. CheckedRows only allowed to retrieve the checked values, but not to change them. Use the Checkboxes property instead of it.

• GridBlazor 1.5.0 supports OData server back-ends for Blazor WA applications. More info here

• Versions before GridBlazor 1.3.9 had the keyboard navigation enabled by default. This feature requires to focus on the grid element, but it can create problems when used on pages with 2 or more grids. As a consequence, starting with version 1.3.9 it has to be explicitly configured for each grid that requires keyboard navigation. Users can enable keyboard navigation between pages using the SetKeyboard method of the GridClient object:

      var client = new GridClient<Order>( ... ).SetKeyboard(true);

• Grid components have been moved to GridBlazor.Pages folder in GridBlazor 1.3.2. You must add a reference to this namespace in the _Imports.razor:

      @using GridBlazor.Pages

• Blazor Server App require these changes on to the _Host.cshtml file for .Net Core 3.1:

      <link href="_content/GridBlazor/css/gridblazor.min.css" rel="stylesheet" />
      <script src="_content/GridBlazor/js/gridblazor.js"></script>

• Blazor WebAssembly projects require these changes on to the wwwroot/index.html file for version 3.2.0 Preview 1:

      <link href="_content/GridBlazor/css/gridblazor.min.css" rel="stylesheet" />
      <script src="_content/GridBlazor/js/gridblazor.js"></script>

• Blazor WebAssembly projects require to use a new constructor of the GridClient object including an HttpClient object from Dependency Injection for .Net Core 3.1:

      @page "/..."
      @inject HttpClient httpClient
  
      ...
  
      protected override async Task OnParametersSetAsync()
      {
          ...
          var client = new GridClient<Order>(httpClient, url, query, false, "ordersGrid", Columns);
          ...
      }
  

• The button to clear all filters is disabled by default starting from GridBlazor version 1.3.6. You can enable it using the ClearFiltersButton method of the GridClient object:

      var client = new GridClient<Order>(httpClient, url, query, false, "ordersGrid", Columns).ClearFiltersButton(true);

Change Log

https://github.com/gustavnavar/Grid.Blazor/releases

Folder description

• GridBlazor: Library to build the GridBlazor package
• GridMvc: Library to build the GridMvcCore package
• GridCore: Library to build the GridCore package
• GridShared: Library to build the GridShared package
• GridBlazorClientSide.Client: Front-end project for the Blazor WebAssembly (REST API) demo
• GridBlazorClientSide.Server: Back-end project for the Blazor WebAssembly (REST API) demo
• GridBlazorClientSide.Shared: Shared project for the Blazor WebAssembly (REST API) demo
• GridBlazorGrpc.Client: Front-end project for the Blazor WebAssembly (gRPC) demo
• GridBlazorGrpc.Server: Back-end project for the Blazor WebAssembly (gRPC) demo
• GridBlazorGrpc.Shared: Shared project for the Blazor WebAssembly (gRPC) demo
• GridBlazorOData.Client: Front-end project for the Blazor WebAssembly with OData server demo
• GridBlazorOData.Server: Back-end project implementing an OData server for the Blazor WebAssembly demo
• GridBlazorOData.Shared: Shared project for the Blazor WebAssembly with OData server demo
• GridBlazorStandalone: Project for the Blazor WebAssembly with local data demo
• GridBlazorServerSide: Blazor Server App demo
• GridBlazorJava: Front-end project for the Blazor WebAssembly (REST API with Java JPA / Hibernate back-end projects) demo
• GridMvc.Demo: ASP.NET Core MVC demo
• GridBlazor.Tests: Unit tests for the GridBlazor library
• GridMvc.Tests: Unit tests for the GridMvcCore library
• docs: Documentation

The SQL Server database for all demos can be downloaded from here

Alternatively, if you prefer to install a fresh version of the database you can perform the following steps:

• run this script from Microsoft web to create a new database: https://github.com/microsoft/sql-server-samples/blob/master/samples/databases/northwind-pubs/instnwnd.sql
• add a column to the Customers table with the name IsVip of type bit (NOT NULL) and default value 0:

      USE Northwind;
      ALTER TABLE dbo.Customers ADD IsVip bit NOT NULL DEFAULT 0 WITH VALUES;
      GO

• change manually some values of the new IsVip column to True
• review the datetime columns. Any mismatch between EF Core model and database definitions will produce an exception and filtering will not work as expected. If database columns are defined as datetime you must modify the NorthwindDbContext class including:

      modelBuilder.Entity<Order>().Property(r => r.OrderDate).HasColumnType("datetime");

  for each datetime column. Or you can change all database columns' type to datetime2(7).

grid.blazor's Issues

Group by Column with Header Row

Great component, thanks for creating!

Is your feature request related to a problem? Please describe.
No

Describe the feature you'd like
Group by column. Developer can set a column with the table would sort then group by that column. Creating a column header row which the developer can customize each cell in the header row.

Describe alternatives you've considered
N/A

Additional context
Here is a good example of what I am describing: http://www.obout.com/grid/grid_grouping_initial.aspx

Checkbox not working

Checkbox is not working when show in front-end?
Click on checkbox - this checkbox not checked?

Passing Grid data type as generic object?

Is your feature request related to a problem? Please describe.
I am trying to create a generic button component, but I can not get it working with implementing ICustomGridComponent.
Below is my code, I would like to be able to use an interface or dynamic object instead of Person type, but doing that causes render error. Maybe there is a way to do it that I just don't realize yet...

@using GridBlazor
@using GridShared.Columns
@implements ICustomGridComponent<Person>
@inject NavigationManager navigationManager

<button class='btn btn-sm btn-primary' @onclick="MyClickHandler">Edit</button>

@code {
    [Parameter]
    public Person Item { get; set; }

    [Parameter]
    public CGrid<Person> Grid { get; set; }
    
    private void MyClickHandler(MouseEventArgs e)
    {
        navigationManager.NavigateTo($"/editorder/{ Item.Id.ToString() }");
    }
}

Describe the solution you'd like
I'd like to be able to create a razor component for Grid that I can use a generic type.

Additional context
https://github.com/gustavnavar/Grid.Blazor/blob/master/docs/blazor_server/Passing_grid_state_as_parameter.md

Add keyboard navigation of the grid

Many of our users are very keyboard orientated and have mentioned that it would be nice to be able to use the up and down arrows to navigate the grid. Is that possible?

Groupable: Issue when collapsing a group

Using .net core 3.1 and having added the js and min.css lines in _Host.cshtml, when I try grouping by column, it works, but collapsing the group only works for a flash until the table reopens it. My current configuration on both client and server is:

.Sortable()
.Groupable()
.WithPaging(100)
.Searchable()
.Filterable()
.WithMultipleFilters()
.SetStriped(true);

Screenshots

Desktop:

• OS: Windows
• Browser: Both Chrome and Firefox

Unable to focus on any element inside grid cell

Describe the bug
It is not possible anymore to focus on any element inside the grid cell, the focus is immediately reset. This is a clear regression, it worked without issues in previous versions. The issue is not browser dependent.

To Reproduce
Steps to reproduce the behavior:

1. Have a <input type="text"> inside a grid cell.
2. Click on that input.
3. Notice that the focus is immediately reset, making it almost impossible to type anything in that input. Also, the viewport is scrolled to focus the entire grid.

Expected behavior
Focus should not reset without a good reason.

Screenshots
I repeatedly click on the text input, focus gets immediately reset.

Additional context
The focus is reset because of the call to GridComponent<T>.SetFocus() that originates from GridComponent<T>.GridComponentClick(). Commenting GridComponent<T>.SetFocus() seems to fix the issue completely.

General improvements to filtering

Following are a few ideas for improving the column filtering function:

• Filtering Type: I would suggest that "Contains" is more useful than "Equals" (for strings) because it allows users to type in just a partial string.
• Filtering Type: To help with keyboard navigation, when the Filter component displays, the cursor should be within this field, allowing the user to Tab from one control to another.
• [Esc]: Having expanded the filter, the "Escape" button should minimise it (currently, one has to click back on the filtering icon).
• Clear all: There should be a mechanism to clear all existing filters applied to the table. Again, this should be accessible to keyboard users as well as mouse users.

Spacing between rows

How do I narrow the spacing between rows on the grid? I would like less white space. I am new to web development and Blazor so I could us any help.

improve logging when UpdateGrid doesn't get a valid response

Is your feature request related to a problem? Please describe.
The endpoint for my GridClient was a faked .json, but it didn't contain the right data format for the ItemsDto, which caused a null response (could also be a null value for Pager or Items). Would have been nice if there was some logging, because currently its a pain to debug Blazor (or am i missing something?)

When calling UpdateGrid the response could be checked or appropriate logging should be in place to easily detect what is going wrong (instead of a stacktrace without even line information)

Thanks for this library by the way, great example!

Errors when using Grouping

Navigate to the Groupable demo.

On a Windows 10 64bit computer

• Microsoft's Edge: I can't drag the column headings to enable grouping
• Firefox: I can't drag the column headings to enable grouping

Chrome

1. Drag the column "Company"
2. Drag the column "Contact" (grouping with both)
3. Drag the column "Freight" (Grouping with all three)
4. Click the [X] to remove "Company" (the first added)
5. Click the [X] to remove "Contract" (the second)

This last step consistently fails for me with:

Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions in 'CircuitOptions.DetailedErrors'.

Extending Sorting

Is it possible to provide a custom c# code while doing the sorting on a column - for ex: if column contains nulls, then sort only the not-null rows and then add null rows at the end in the grid. Similarly for blank strings as well as for null dates etc.

Doc for json format

Hi, I'm trying to run blazor client without the server. What is the json format expected from the url? I can't decipher from the docs.

Redimension Column width during runtime

**Feature Request, Column width: **
Allow the user to re-dimension the width of each of the columns individually.

GridMVC and GridShared nuget packages appear to be out of sync with code

CGrid and GridClient objects do not appear to be in the nuget packages when trying to compile sample code in my project, Yet the sample application works fine as it links to GridMVC and gridShared directly.

Did source code diverge from nuget?

GridBlazor leaks bundleconfig.json into dependent project

Describe the bug
GridBlazor 1.0.0 leaks bundleconfig.json into dependent project

To Reproduce

• Create new Blazor Project
• Add GridBlazor 1.0.0 Nuget package
• "bundleconfig.json" will now be visible in the project

Expected behavior
"bundconfig.json" shouldn't be added to the depended project

Screenshots

Call Razor Method from Button

Is it possible to call a code-behind method from rendered html in a grid cell? Something like:

column.Add().Encoded(false).Sanitized(false).RenderValueAs(o => $"<button onclick=\"@MyClickHandler({o.Id})\">...</button>");

Join two columns in DB to one columns on Grid

Hi,
How I can join two columns on database (exp: FirstName and LastName) to one columns on grid (exp: FullName). And When this Grid filter via FullName => filter via FirstName or LastName ??

[Enter] executes the search within the grid

When you have set the grid to be searchable, it would be great to type in the search term and then hit [Enter] to execute the search. The more we can reduce using the mouse and control behaviour usign the keyboard, the more user-friendly this would be.
Thanks

Grid not rendering html inside cells

Describe the bug
The html code used with the 'rendervalueas' method shows up as a string instead of as html code.

To Reproduce
In the razor page define a grid data collection as:

public static Action<IGridColumnCollection<Node>> Columns = c =>
    {
        c.Add(o => o.NodeName).RenderValueAs(o => $"<b><a href='api/node/getnodedetail/{o.NodeName}'>Detail</a></b>");
        c.Add(o => o.IP);
        c.Add(o => o.Status);
        c.Add(o => o.CName);
        c.Add(o => o.CCount);
    };

Actual behavior

<td class=" grid-cell" style="" data-name="NodeName"><!--!-->
    <!--!-->&lt;b&gt;&lt;a href='api/node/getnodedetail/node1'&gt;Detail&lt;/a&gt;&lt;/b&gt;<!--!-->
</td>

Expected behavior
The cell value should be bold and should be a link.

Desktop (please complete the following information):

• OS: windows 10 - 1903 update
• Browser chrome
• Version 74.0.3729.169

Additional context
Thank you for making this project. Works great and nice documentation too :) !

Multiple locales affecting filtering by date

Describe the bug
I get an error when the locale of my webserver is different to the locale of the SQL Server when filtering by date. It seems to be based on the string format of the date.

To Reproduce
This is a Blazor Server application. SQL Server is on a machine whose locale is "en-US" and the webserver is on a machine whose locale is "en-GB".

I have a table where one column (DateCreated) has the datatype of DateTime. The filter recognizes the type and asks for my filter value in the format "dd/mm/yyyy". This is the normal format for the en-GB locale: since this is Blazor Server, I guess that this is determined by the locale of my webserver rather than the locale of my browser (both of which are en-GB).

I fill in the value as "20/10/2015" (20th October 2015) and hit apply. When this hits the method in the service I see that the query contains:

DateCreated__1__2015-10-20

So, this is in the format 'yyyy-mm-dd' which is great. However, when it calls 'server.ItemsToDisplay' I then get an exception:

Microsoft.Data.SqlClient.SqlException: 'Conversion failed when converting date and/or time from character string.'

I happen to use a ViewModel and expose that rather than my EF entity. When setting it's property, I changed it from:
vm.DateCreated = e.DateCreated
to
vm.DateCreated = new DateTime(e.DateCreated.Ticks, DateTimeKind.Local),

And now the error is:

Message=The LINQ expression 'Where(
source: OrderBy<Destination, string>(
source: DbSet,
keySelector: (d) => d.DestinationName),
predicate: (d) => new DateTime(
d.DateCreated.Ticks,
Local
) == 20/10/2015 00:00:00)' could not be translated.

So you can see from '== 20/10/2015 00:00:00' that the 'en-GB' locale being used here rather than an ISO format. I'm not sure if this is a problem with the Blazor Grid, or with EF itself.

Expected behavior
Would expect the date time to be locale-independant in the query.

Desktop (please complete the following information):

• OS: Windows
• Chrome
• Latest

Norwegian translation

Hi.

Here is Norwegian bokmål (nb-NO) translation for your component:

There are no items to display | Ingen elementer å vise
Filter this column | Filtrer denne kolonnen
Type | Type
Value | Verdi
Apply | Aktiver
Clear filter | Tøm filter
Equals | Er lik
Starts with | Starter med
Contains | Inneholder
Ends with | Slutter med
Greater than | Større enn
Less than | Mindre enn
Greater than or equals | Større eller lik
Less than or equals | Mindre eller lik
Yes | Ja
No | Nei
Items | Elementer
Search for ... | Søk etter…
Sum | Sum
Average | Gjennomsnitt
Max | Maks
Min | Min

GridClient to support async dataservice calls

On a Blazor Server app (3.1), when instantiating the GridClient, it expects a data service with a synchronous call to retrieve data as first method parameter. Can you allow async method call in the lamba?

Server-side paging?

I see how you are doing paging when doing client-side blazor, but do you have an example of how to get paging working with server-side? On your demo your paging buttons all trigger Ajax calls but the same Ajax calls don't exist in your server side sample code.

Currently I am able to get a grid to render using server-side blazor, but clicking any of the paging buttons does nothing. How should I hook into the individual paging buttons?

Groupable: Issue when grouping color

**Issue: **
when grouping a property of type System.Drawing.Color it sometimes crashes, other times only gives a warning/exception: System.ArgumentException: 'At least one object must implement IComparable.'
Other properties (of the same class) are working properly: string, DateTimeOffset, int, decimal.

**To Reproduce: **
Steps to reproduce the behavior:

1. Create a new class, that has a property with System.Drawing.Color.
2. New Grid.Blazor, (tested in server side)
3. Add .Groupable()
4. Run, group the Color Column
5. System.ArgumentException triggers on server side.

**Expected behavior: **
No Exception should be triggered and it should never crash.

Desktop:

• OS: WIndows
• Browser: chrome

Additional context
I wanted to make a test of it, but I don't know how to group programatically.

Tooltip

Is it possible to add a tooltip to a column value?

Add CSS classes override options

Is your feature request related to a problem? Please describe.
The CSS classes of the grid are mostly hardcoded, there is no way to change them without modifying the source. In particularly, the <table> class itself is hardcoded as table grid-table:
https://github.com/gustavnavar/Grid.Blazor/blob/master/GridBlazor/GridComponent.razor#L140

However, when working with Boostrap templates or just customizing the look of the table, it is mandatory to make changes to the classes., for example:
<table id="user-list" class="table table-striped table-bordered table-td-valign-middle table-sticky-first-column text-nowrap m-0">

All other grid-* classes should be overridable too.

Describe the solution you'd like
Instead of hardcoding CSS classes, use parameters: TableCssClass, GridHeaderCssClass, GridCellCssClass, GridSubGridCssClass, GridRowCssClass etc.

Additional context
Same goes for being able to customize the <table> HTML id.

Mouse clicks causing re-render?

Currently, if you are viewing a page with the grid on it and you click anywhere in the grid, it is forcing a re-render through the gridblazor.js file. See the following output:

[14:36:33 0HLS5GDUE84OI:00000001 DBG] <Microsoft.AspNetCore.SignalR.Internal.DefaultHubDispatcher> Received hub invocation: InvocationMessage { InvocationId: "", Target: "DispatchBrowserEvent", Arguments: [ {"browserRendererId":0,"eventHandlerId":12,"eventArgsType":"mouse","eventFieldInfo":null}, {"type":"click","detail":1,"screenX":2417,"screenY":427,"clientX":497,"clientY":324,"button":0,"buttons":0,"ctrlKey":false,"shiftKey":false,"altKey":false,"metaKey":false} ], StreamIds: [  ] }.
[14:36:33 0HLS5GDUE84OI:00000001 DBG] <Microsoft.AspNetCore.Components.RenderTree.Renderer> Handling event {"Id": 5, "Name": "HandlingEvent"} of type 'MouseEventArgs'
[14:36:34 0HLS5GDUE84OI:00000001 DBG] <Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime> Begin invoke JS interop '22': 'gridJsFunctions.focusElement'
[14:36:34 0HLS5GDUE84OI:00000001 DBG] <Microsoft.AspNetCore.Components.RenderTree.Renderer> Rendering component 16 of type GridBlazor.Pages.GridComponent`1[EventNotification]
[14:36:34 0HLS5GDUE84OI:00000001 DBG] <Microsoft.AspNetCore.Components.RenderTree.Renderer> Rendering component 17 of type Microsoft.AspNetCore.Components.CascadingValue`1[GridBlazor.Pages.GridComponent`1[EventNotification]]
[14:36:34 0HLS5GDUE84OI:00000001 DBG] <Microsoft.AspNetCore.Components.RenderTree.Renderer> Rendering component 29 of type GridBlazor.Pages.GridExtSortHeaderComponent`1[EventNotification]
[14:36:34 0HLS5GDUE84OI:00000001 DBG] <Microsoft.AspNetCore.Components.RenderTree.Renderer> Rendering component 18 of type Microsoft.AspNetCore.Components.CascadingValue`1[GridBlazor.Pages.GridComponent`1[EventNotification]]

This means that when you want to click into the search bar? Re-render. Open the filters box? Re-render, etc. Can this be disabled somewhere? I dont think we want every mouse event to trigger a re-render.

Provide overloaded RenderComponentAs() with async callbacks

Hi,

is there a reason why you don't allow
new List<Func<object, Task>>
in RenderComponentAs(..) method in columns definition?

ItemsCount incorrect when enabled

Describe the bug
When using client.WithGridItemsCount(); the count always shows -1.

Additional context
I think the bug is in CGrid.cs the ItemCount is never updated and is kept at -1.

Database-side sorting/filtering

How would one implement database-side filtering/sorting? In your example, would we have to parse the query values and then pass it them to the repository? Obviously repository.GetAll wouldn't scale if that's a table containing a lot of rows.

Can't c.Add().RenderComponentAs<ButtonCell>(actions); to SubGrid

I am trying to add an edit button to a subgrid so I can work on the row.

To Reproduce
Add c.Add().RenderComponentAs(actions); to SubGrid definition
Expected behavior
The SubGrid should render with a edit button in one of the columns

I am using Blazor (latest preview) ServerSide

The SubGrid Fails in code and does nothing once that line is added to its definition.

Take that line away and all works as expected.

Can SubGrids have actions?

Love your work.

Show alternate row colours

I think that tables with many rows do benefit from having alternate row colour.

I know that there is SetRowCssClasses, but I've not been able to get that to work (maybe it's documented?). If not, I think this would be a useful feature.

Stacking CSS

Is it possible to add multiple CSS to a given column in a stacking manner?

CRUD

Hola Gustau,
Antes que nada muy buen trabajo!
Podrias implementar opción de añadir registro y borrar?
Asi tendriamos un CRUD implementado.
Gràcies
Josep

Question - when not using an IQueryable DataSource

I'm looking to implement a Grid where the query operations are sent to the backend (asp.net core api) for processing.

However on the backend, I need to formulate a call to a REST service to get the data - i'm not querying a local database.

Is it possible to use this grid in such a mannor? I guess I am interested in recieving data sent from the front end, but rather than having it expressed as an IQueryable, I realy need to access the raw data model sent form the client, so I can build my own rest calls to the data provider.

Many Thanks

Guid foreign keys with CRUD feature

Trying out the new CRUD feature, I noticed using int foreign keys are working fine, but Guid foreign keys does not seem to render a select input. Consider this simplified example:

Models:

public class Car
{
    public Guid Id { get; set; }
    public string Name { get; set; }
 }
public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public Guid CarId { get; set; }
}

TestPage.razor:

protected override async Task OnInitializedAsync()
{
    void Columns(IGridColumnCollection<Person> c)
    {
        c.Add(x => x.Id).SetPrimaryKey(true);
        c.Add(x => x.Name);
        c.Add(x => x.CarId).SetSelectField(true, a => a.CarId.ToString(), SelectItemService.GetCarsAsSelectItems);
    }
    var query = new QueryDictionary<StringValues>();
    var client = new GridClient<Person>(q => GridDataService.GetPersons(Columns, q), query, true, "personGrid", Columns)
        .Crud(true, PersonCrudDataService);
    grid = client.Grid;
    task = client.UpdateGrid();
    await task;
}

GridDataService.cs

public ItemsDTO<Person> GetPersons(Action<IGridColumnCollection<Person>> columns, QueryDictionary<StringValues> query)
{
    var p1 = new Person
    {
        Id = 1,
        Name = "Person1",
        CarId = new Guid("77ace259-133f-4285-a659-9dcfc226e3fa")
    };
    var persons = new List<Person> { p1 };
    var server = new GridServer<Person>(persons, new QueryCollection(query), true, "personGrid");
    return server.ItemsToDisplay;
}

Get SelectItems:

public IEnumerable<SelectItem> GetCarsAsSelectItems()
{
    var cars = new List<Car>
    {
        new Car { Id = new Guid("77ace259-133f-4285-a659-9dcfc226e3fa"), Name = "Toyota" },
        new Car { Id = new Guid("c19b05da-c4a4-4e43-afb3-0f8d9238aa82"), Name = "Audi" }
    };
    return cars.Select(c => new SelectItem(c.Id.ToString(), c.Name));
}

ICrudDataService:

public class PersonCrudDataService : ICrudDataService<Person>
{
    public async Task<Person> Get(params object[] keys)
    {
        var p1 = new Person
        {
            Id = 1,
            Name = "Person1",
            CarId = new Guid("77ace259-133f-4285-a659-9dcfc226e3fa")
        };
        return await Task.FromResult(p1);
    }
}

The result is this:

But when I change Car.Id from Guid to int, and make according changes, the result is this:

Conditional CSS for columns

Is your feature request related to a problem? Please describe.
It would be great to conditionally assign a css class to a column so that we can set different classes based on the column or cell value.

Describe the solution you'd like
lets say i have a column named "Status" .
This column column can have a value of "success" or "failure"
In code we should be able to do something like this

if ( c.status == "success")
{
    cssClass = "green"
}
Else
{
   cssClass = "red"
}

Describe alternatives you've considered
setting a css class for row works but i think it is too distracting to consider.

What is the best way to "access" grid components such as the Search text box, and page-size control?

What is the recommended way to "access" components in the grid? For my purposes, I am thinking about the "Search" textbox, and the "Page Size" text box? I am also specifically interested in Blazor Server architecture.

Why?

• To put keyboard focus in the element. Many of our users prefer keyboard-entry over using their mouse, so for us it is important that when a page first loads, the cursor is placed in the most appropriate control for any given scenario: we may choose to focus the page-size control, or the search control on a specific grid, or some other control on the page.

• To access text in the element. We may choose to use any data that the user has entered in the search box elsewhere on the page.

My first thought would be to generate a Grid and assign it an 'ElementReference', see Capture references to elements. We may pass that to JS-interop and get JS to crawl through the DOM to find the appropriate item. An alternative approach may be for the Grid to expose an 'ElementReference' for each of these sub-components, but I think this would require this functionality to be written.

What is likely to be the best approach?

Group by property, then sort groups by expression.

Currently if we try to group by an arbitrary property, we do something like this:

var client = new GridClient<IDWEventNotification>(q => ens.GetEventGridRows(columns, q, ReqDate).Result, query, false, "eventGrid", columns).Groupable();

Where one of the columns is, for example, an int field called LoadId. Since the client is Groupable we are able to drag LoadId into the filter bar and it will group all items by LoadId. However, it also forces a sort on the value of LoadId at the same time.

Instead, we want to be able to sort by an expression over the members of that group. For example:

c.Add(o=>o.LoadId).Filterable(true).GroupSort(x=> x.Max(y=> y.EventDate));

This would group by LoadId and then sort the groups by the GroupSort expression, which in this case would sort the groups by the most recent EventDate. Rows within the groups would continue to be sorted as specified by the other basic Filterable calls. Think of this as being a computed column at the group level.

Is this doable?

Filtering and sorting are always active

Even when in class ColumnCollections a column is defined as not filterable nor searchable e.g.:

c.Add(o => o.QuantityPerUnit).Sortable(false).Filterable(false);

the UI always allows sort and filter.
I followed the code, and during the execution of .Filterable(false) the Column property 'FilterEnabled' is set to false, but in class GridHeaderComponentBase this prop is both ignored and set (by who?) to true.

PS:
I like your project very much and I would like to use it as a component for a Open Source CRUD framework I'll try to develop, based on Blazor .NET core 3.0+
I have a lot of questions (the doc and the sample do not cover many of the features) an possibly I would like to partecipate in this project, please let me know!

Edit doesn't seem to do anything

Describe the bug
On the demo page "All features", if you click Edit on the right, nothing becomes editable.

To Reproduce
Steps to reproduce the behavior:

1. Go to http://gridblazor.azurewebsites.net/gridsample
2. Click on Edit
3. Observe nothing happen

Expected behavior
I expected some text boxes to appear, prefilled with the previous information.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 75

Button on Grid with selectable row causing threading problems for Entity Framework

This probably isn't a bug, more likely to be a hole in my understanding..

I am using the Blazor Server architecture, .NET Core 3.1 (currently still beta).
Setup

I have my EntityFramework's Context, and configure this in my startup using:
services.AddDbContext<MyContext>();

I have a Service, which contains all my EF queries. This is configured in my startup using:
services.AddScoped<MyService>();

I rely on the Blazor framework to DI the MyContext into my MyService, and MyService into my razor page:

public class MyService
{
    public MyService(MyContext context)
    {
        this.Context = context;
    }

    private MyContext Context { get; }

and "@Inject MyService Service" in the razor page.

When I create my Grid, I set it to be searchable and have a column that includes an edit button:

c.Add().RenderComponentAs<GridButton>(new List<Action<object>> { this.ShowModalEdit }, new GridButtonParams { ButtonClass = "btn btn-sm btn-primary", ButtonText = "Edit" });

So, what happens?

When the user clicks a row, then the OnRowClick event is fired, this calls an 'async void' event handler that makes an awaited call to the Service. The Service returns full details of the item and displays it in a component to the right of the grid. Very similar to an example in the help docs provided.

Now, if the user clicks the [Edit] button on the row, then this opens a Modal window which is a Razor component, which has access to the same service. It makes an awaited call to the same service to pull the item to be edited.

So the problem is that clicking on the button also selects the row, so I'm making 2 calls through to the same Service and then I get an error from the Entity Framework complaining that two threads are accessing the Context at the same time:

A second operation started on this context before a previous operation completed

I can see various ways to fix this (have separate contexts, add locking around the call, etc, etc). What's considered the "best practice"?

Grid selected row

I am unable to see on documentation the way one can get a selected row.

How can this be done?

Thank you for your understanding.

Search Grid

Describe the solution you'd like
Would it be possible to implement a Search feature on the grid, searching all entries much like how DataTables does it?

Partial data display on Grid

I would like to limit the records visualized by GridComponent:
e.g. in NorthWind db I want to display only the Products supplied by a specific Supplier, let's say the supplier with ID=1.

I want to use a method to do this dynamically, NOT using .SetInitialFilter during column collection definition (that is working).

I try to set a filter SupplierID = 1 in Products on the code section of a .razor page, but cannot found how to do (Columns are private in _items, methods like AddQueryParameter etc seem to be not suitable for this, ...)

How can I do? Thank you

rename IGridAnnotaionsProvider -> IGridAnnotationsProvider

there is only a little mispelling, you may want to rename the file/class in Grid.Blazor\GridBlazor\DataAnnotations and in Grid.Blazor\GridShared\DataAnnotations from IGridAnnotaionsProvider to IGridAnnotationsProvider

GridColumn should have a ResourceType property (for title localization)

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Provide ability to change the page size

In DataTables.net, there's a convenient drop-down next to the grid search functionality that allows the user to change the number or records displayed.

I think that this would be a great addition to the grid functionality.

Demo is broken

Describe the bug
The demo page seems to be broken, as no interaction (e.g. navigating to different page, filtering, sorting or even opening the menu on smaller screens) work. (Tested with different browsers and devices)

To Reproduce
Steps to reproduce the behavior:
go to the demo page: gridblazor.azurewebsites.net
Click anywhere and see that nothing happens.
Also trying to resize the screen will give message the following message: Could not reconnect to the server. Reload the page to restore functionality.

Incorrect HttpClient usage

See this commit:
6bf353c#diff-f373f8e72b8bbfc8c8f7236251b4081fR700

Creating new instances of HttpClient is a big NO-NO, don't do this, use IHttpClientFactory instead:
https://aspnetmonsters.com/2016/08/2016-08-27-httpclientwrong/