How can I display data from a List of value tuples in a DataGrid

Radzen.Blazor Components
1

Hi,

I have a list of tuples and want to display the data. I stepped over Radzen and think its DataGrid will help and even looks great. So with the help of the getting started page, I implemented Radzen in Visual Studio. I copied the code from the DataGrid example to my project. The three using directives do not work but that shouldn't be a problem, since I do not want to get data from a database but from a simple list of value tuples:

public static readonly List<(int id, double one, double two)> foo = new() { };

filled with several

ClassName.foo.Add((id, item_one, item_two));

How can I display the list data in the DataGrid?

Many thanks

2

Hi,

is there anything I can do, to help you, understanding my problem, so that you can help me?

Thanks

3

Tuples are awkward - they don't use properties but fields (RadzenDataGrid prefers properties). Also you can't get a tuple member by its name via reflection. tupleType.GetField("one") does not work - it has to be tupleType.GetField("Item1").

Still you can display your tuple collection like this (with some limitations listed below the code):

    <RadzenDataGrid Data="@foo">
        <Columns>
            <RadzenDataGridColumn TItem="(int id, double one, double two)" Title="Id">
                <Template>
                    @context.id
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="(int id, double one, double two)" Title="One">
                <Template>
                    @context.one
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="(int id, double one, double two)" Title="Two">
                <Template>
                    @context.two
                </Template>
            </RadzenDataGridColumn>
        </Columns>
    </RadzenDataGrid>
@code {

    List<(int id, double one, double two)> foo = new() { };

    protected override void OnInitialized()
    {
        foo.Add((1, 2, 3));
    }
}

Here are a few RadzenDataGrid features which rely on properties and hence won't work with tuples:

  • Sorting (can be implement with custom code by handling the LoadData event)
  • Filtering (can be implemented as custom code too)
  • Editing (not sure if you need it)
4

Thanks korchev, that worked.
How would I use the LoadData event? Or: If I added

<RadzenButton Text="Update" @onclick="UpdateFoo"></RadzenButton>

and

private void UpdateFoo()
    {
        foo.Add((7, 8, 9));
    }

How can the DataGrid be updated?

5

I recommend checking the examples.

Call the Reload method of the RadzenDataGrid or update foo like foo = foo.ToList().

6

Thanks again.

I added

@ref="radzenDataGrid"

to the RadzenDataGrid and in the code

RadzenDataGrid<(int id, double one, double two)> radzenDataGrid;
private void UpdateFoo()
{
    foo.Clear();
    foo.Add((7, 8, 9));
    radzenDataGrid.Reload();
}

This does not work with the

<RadzenButton Text="Update" @onclick="UpdateFoo"></RadzenButton>

but with a "normal" button

<button @onclick="UpdateFoo">not radzen</button>

Why?

7

You should use Click event.

8

Perfect. Everything fine now.
Thanks.

9

Hm, I implemented the grid in my real project now and found out, that radzen's default.css file affects the layout of the rest of my page. Without the file the grid is just an ugly table. I see two solutions:

  1. Load default.css not in but only in . Is this possible?
  2. Delete everything in default.css, that is not needed for the grid. But what is needed for the grid?

Thanks again.

10

Try including the base version of the theme as per the documentation. You can also build your own theme from the source and exclude everything you don't need by modifying this file. After rebuilding the project the new themes should be in the wwwroot directory.

11

The base version delivers the same grid layout like without default.css.
I cloned the project, edited the _components.scss (on first try, I deleted everything but @import 'components/blazor/grid';) and tried to rebuild. I get the following three errors:

image
image1332×67 3.35 KB

What am I doing wrong?

Edit: Maybe important: On the very first try to rebuild, Radzen.Blazor.dll was missing, so I copied it from the nuget location to the repo location.

12

Try restoring from command line from the Radzen.Blazor directory. Run dotnet restore and then dotnet build.

13

There are the same errors but with more information that may help you.

Projects to be restored are determined...
All projects are up to date for recovery.
The "excubo.webcompiler" tool (version 2.6.0) has been restored. Available commands: webcompiler

The restore was successful.
EXEC : error : The target selector was not found. [C:\Users\<>\source\repos\radzen-blazor\Radzen.Blazor\Radzen.Blazor.csproj]
Use "@extend .rz-button-md !optional" to avoid this error.
on line 595 of themes/components/blazor/_grid.scss
>> @extend .rz-button-md;
------------^
The "excubo.webcompiler" tool (version 2.6.0) was restored. Available commands: webcompiler

The recovery was successful.
C:\Users\source\repos\radzen-blazor\Radzen.Blazor\Radzen.Blazor.csproj(68,5): error MSB3073: The command "dotnet tool run webcompiler -r themes -o wwwroot/css -z disable -m disable -p disable" was terminated with the code 1.
EXEC : error : [C:\Users\<>\source\repos\radzen-blazor\Radzen.Blazor\Radzen.Blazor.csproj]
An assembly specified in the application dependencies manifest (Excubo.WebCompiler.deps.json) was not found:
package: 'AutoprefixerHost', version: '3.0.3'.
path: 'lib/netstandard2.0/AutoprefixerHost.dll'.
C:\Users\source\repos\radzen-blazor\Radzen.Blazor\Radzen.Blazor.csproj(68,5): error MSB3073: The command "dotnet tool run webcompiler -r themes -o wwwroot/css -z disable -m disable -p disable" terminated with the code -2147450740.

Error during the build process.

EXEC : error : The target selector was not found. [C:\Users<>\source\repos\radzen-blazor\Radzen.Blazor\Radzen.Blazor.csproj]
C:\Users<>\source\repos\radzen-blazor\Radzen.Blazor\Radzen.Blazor.csproj(68,5): error MSB3073: The command "dotnet tool run webcompiler -r themes -o wwwroot/css -z disable -m disable -p disable" was terminated with the code 1.
EXEC : error : [C:\Users\<>\source\repos\radzen-blazor\Radzen.Blazor\Radzen.Blazor.csproj]
C:\Users<>\source\repos\radzen-blazor\Radzen.Blazor\Radzen.Blazor.csproj(68,5): error MSB3073: The command "dotnet tool run webcompiler -r themes -o wwwroot/css -z disable -m disable -p disable" was terminated with the code -2147450740.

14

You have excluded too many files from _components.scss. For example the grid uses buttons internally and a few other components.

15

I have undone the changes but it still did not work. So, I cloned again, did not touch anything and tried to build. That also did not work.
Here are my steps:

  1. Go to github and clone the project with click on "Code" -> "Open with Visual Studio".
  2. In Visual Studio set local location -> "Clone"
  3. Double click Radzen.sln
  4. "Build" -> "Build Solution"

Could the following describe the problem:
1>EXEC : error :
1> An assembly specified in the application dependencies manifest (Excubo.WebCompiler.deps.json) was not found:
1> package: 'AutoprefixerHost', version: '3.0.3'
1> path: 'lib/netstandard2.0/AutoprefixerHost.dll'

16

Unfortunately I don't know what is causing this problem. We are building the Radzen.Blazor project a few dozen times a day and this error has never happened. By the way you seem to have made it further by using command line. Try again with the command line.

17

OK, I am pretty sure, that my system is causing the problem. Unfortunately, I now only see the following option: Start app -> use browser dev tools to find out which radzen CSS classes are used -> copy these classes to my app.css (and modify if necessary) -> do not load radzen's default.css -> hope everything works.