Load/Save DataGridSettings not working on datagrids within Steps component

Starvision · March 16, 2023, 7:57pm

Hello,
applying the code from this example Blazor DataGrid save/load settings (radzen.com) on a datagrid placed in the second step of a Steps component.
When I test the code in debug mode, trying to change sort or filter on the datagrid, the app freezes, but does not give an error.
It enters into an eternal loop in the following method:

private async Task SaveStateAsync()
        {
            await Task.CompletedTask;

            await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('Settings', '{JsonSerializer.Serialize<DataGridSettings>(Settings)}')");
        }

It jumps back and forth between the two lines, but never completes the SaveStateAsync method.
Instead when I apply the same code to a page with a single datagrid and no Steps component, everything works perfectly.

Any idea why it fails when the datagrid is placed within a Steps component?

Thank you very much for your help.

enchev · March 17, 2023, 8:54am

I'm unable to reproduce such problem:

Starvision · March 19, 2023, 7:51pm

Hi Enchev,
In your example you have only a datagrid in the second step.
I have one in each step and the content of the second depends on the first.
I have used this example for building the page:
Blazor Steps component (radzen.com)
I am trying to add the save/load datagrid settings functionality on both grids.
This is the code used to manage the datagrid settings:

DataGridSettings _settings;
DataGridSettings _settings2;
public DataGridSettings ItemGridSettings
        {
            get
            {
                return _settings;
            }
            set
            {
                if (_settings != value)
                {
                    _settings = value;
                    InvokeAsync(SaveStateAsync);
                }
            }
        }

        public DataGridSettings AopCustomerGridSettings
        {
            get
            {
                return _settings2;
            }
            set
            {
                if (_settings2 != value)
                {
                    _settings2 = value;
                    InvokeAsync(SaveStateAsync);
                }
            }
        }

        private async Task LoadStateAsync()
        {
            await Task.CompletedTask;

            var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "ItemGridSettings");
            if (!string.IsNullOrEmpty(result))
            {
                _settings = JsonSerializer.Deserialize<DataGridSettings>(result);
            }

            var result2 = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "AopCustomerGridSettings");
            if (!string.IsNullOrEmpty(result2))
            {
                _settings2 = JsonSerializer.Deserialize<DataGridSettings>(result2);
            }
        }

        private async Task SaveStateAsync()
        {
            await Task.CompletedTask;

            await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('ItemGridSettings', '{JsonSerializer.Serialize<DataGridSettings>(ItemGridSettings)}')");

            await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('AopCustomerGridSettings', '{JsonSerializer.Serialize<DataGridSettings>(AopCustomerGridSettings)}')");
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await LoadStateAsync();
                StateHasChanged();
            }
        }

I hope that explains it better.

enchev · March 20, 2023, 5:10am

Well, this is what I had as information from your post. You can attach Radzen.Blazor source code to your project to debug further your case.

Starvision · March 20, 2023, 7:00am

Razor page:

<PageTitle>Aop Data Entry</PageTitle>
<div class="row">
    <div class="col-md-12">
        <RadzenSteps>
            <Steps>
                <RadzenStepsItem Text="Customers">
                    <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3" Class="my-4">1. Select a Customer to continue</RadzenText>
                    <RadzenHeading Size="H2" Text="Customers">
                    </RadzenHeading>
                    @if (customers == null)
                    {
                        <div class="spinner"></div>
                    }
                    else
                    {
                        <RadzenDataGrid @bind-Settings="@AopCustomerGridSettings" AllowFiltering="true" AllowPaging="true" AllowSorting="true" AllowVirtualization="true" Data="@customers" FilterMode="FilterMode.Advanced" PageSize="15" TItem="CustomerDto" @bind-Value="@selectedCustomers" IsLoading="@isLoading">
                            <Columns>
                                <RadzenDataGridColumn TItem="CustomerDto" Property="Plant" Title="Selling Plant">
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="CustomerDto" Property="TopGroup" Title="Top Group">
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="CustomerDto" Property="CustomerERPCode" Title="Customer ERP Code">
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="CustomerDto" Property="CustomerName" Title="Customer">
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="CustomerDto" Property="City" Title="City">
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="CustomerDto" Property="SaleskUSD2022" Title="Sales kUSD 2022" SortOrder="SortOrder.Descending" />
                                <RadzenDataGridColumn TItem="CustomerDto" Property="SalesTonnes2022" Title="Sales Tonnes 2022" />
                            </Columns>
                        </RadzenDataGrid>
                    }
                </RadzenStepsItem>
                <RadzenStepsItem Text="Items" Disabled="@(selectedCustomers == null || selectedCustomers != null && !selectedCustomers.Any())">
                    <div class="row">
                        <div class="col-md-12">
                            <RadzenHeading Size="H5" Text="@selectedCustomers[0].CustomerName" Style="color: rgb(0, 87, 148)">
                            </RadzenHeading>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <RadzenHeading Size="H5" Text="@selectedCustomers[0].Plant" Style="color: rgb(0, 87, 148)">
                            </RadzenHeading>
                        </div>
                    </div>
                    <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3" Class="my-4">2. Select an Item to continue</RadzenText>
                    <RadzenDataGrid @bind-Settings="@ItemGridSettings" AllowFiltering="true" AllowColumnPicking="true" AllowPaging="true" PageSize="15"
                                    AllowSorting="true" AllowMultiColumnSorting="true" ShowMultiColumnSortingIndex="true"
                                    AllowColumnResize="true" AllowColumnReorder="true" ColumnWidth="200px" AllowVirtualization="true"
                                    FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                                    Data="(selectedCustomers != null && selectedCustomers.Any() ? customerItems.Where(o => o.CustomerBillToID == selectedCustomers[0].CustomerID) : Enumerable.Empty<CustomerItemsDto>())" TItem="CustomerItemsDto" @bind-Value="@selectedItems" IsLoading="@isLoading">
                        <Columns>
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="CustomerBillToName" Title="Customer BillTo" />
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="CustomerShipToName" Title="Customer ShipTo" />
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="SizeStyleCode" Title="Size & Style" />
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="SizeStyleDescription" Title="Size & Style Desc" />
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="ItemErpCode" Title="Item ERP Code" />
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="ItemDescription1" Title="Description" />
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="SaleskUSD2022" Title="Sales kUSD 2022" SortOrder="SortOrder.Descending" TextAlign="TextAlign.Right" />
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="SalesTonnes2022" Title="Sales Tonnes 2022" TextAlign="TextAlign.Right" />
                            <RadzenDataGridColumn TItem="CustomerItemsDto" Property="Completed" Title="Completion Status" TextAlign="TextAlign.Center">
                                <Template Context="data">
                                    @if (data.Completed == true)
                                    {
                                        <RadzenIcon Icon="check_box">
                                        </RadzenIcon>
                                    }
                                    else
                                    {
                                        <RadzenIcon Icon="check_box_outline_blank">
                                        </RadzenIcon>
                                    }
                                </Template>
                            </RadzenDataGridColumn>
                        </Columns>
                    </RadzenDataGrid>
                </RadzenStepsItem>
            </Steps>
        </RadzenSteps>
    </div>

Code Behind:

using System;
using System.Text.Json;
using BerryAOP2024.Application.Common.Models;
using BerryAOP2024.Application.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Radzen;

namespace BerryAOP2024.WebUI.Pages
{
	public partial class AopDataEntry2
	{
        [Inject]
        Blazored.SessionStorage.ISessionStorageService sessionStorage { get; set; }

        [Inject]
        protected IJSRuntime JSRuntime { get; set; }

        [Inject]
        protected NavigationManager NavigationManager { get; set; }

        [Inject]
        protected DialogService DialogService { get; set; }

        [Inject]
        protected TooltipService TooltipService { get; set; }

        [Inject]
        protected ContextMenuService ContextMenuService { get; set; }

        [Inject]
        protected NotificationService NotificationService { get; set; }

        [Inject]
        public IBerryAopService DataService { get; set; }

        protected IEnumerable<CustomerDto> customers;
        protected IList<CustomerDto> selectedCustomers;
        protected IEnumerable<CustomerItemsDto> customerItems;
        protected IList<CustomerItemsDto> selectedItems;
        protected IEnumerable<AopTickerDto> customerTicker;
        protected int userId;
        protected bool isLoading;
        protected bool isSaving;
        DataGridSettings _settings;
        DataGridSettings _settings2;

        protected override async Task OnInitializedAsync()
        {
            isSaving = true;
            isLoading = true;

            userId = await sessionStorage.GetItemAsync<int>("id");

            customers = await DataService.GetSalesRepCustomers(userId);
            customers = customers.ToList();

            customerItems = await DataService.GetSalesRepCustomerItems(userId);
            customerItems = customerItems.ToList();

            isLoading = false;
            isSaving = false;
        }

        public DataGridSettings ItemGridSettings
        {
            get
            {
                return _settings;
            }
            set
            {
                if (_settings != value)
                {
                    _settings = value;
                    InvokeAsync(SaveStateAsync);
                }
            }
        }

        public DataGridSettings AopCustomerGridSettings
        {
            get
            {
                return _settings2;
            }
            set
            {
                if (_settings2 != value)
                {
                    _settings2 = value;
                    InvokeAsync(SaveStateAsync);
                }
            }
        }

        private async Task LoadStateAsync()
        {
            await Task.CompletedTask;

            var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "ItemGridSettings");
            if (!string.IsNullOrEmpty(result))
            {
                _settings = JsonSerializer.Deserialize<DataGridSettings>(result);
            }

            var result2 = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "AopCustomerGridSettings");
            if (!string.IsNullOrEmpty(result2))
            {
                _settings2 = JsonSerializer.Deserialize<DataGridSettings>(result2);
            }
        }

        private async Task SaveStateAsync()
        {
            await Task.CompletedTask;

            await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('ItemGridSettings', '{JsonSerializer.Serialize<DataGridSettings>(ItemGridSettings)}')");

            await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('AopCustomerGridSettings', '{JsonSerializer.Serialize<DataGridSettings>(AopCustomerGridSettings)}')");
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await LoadStateAsync();
                StateHasChanged();
            }
        }

        protected override void OnInitialized()
        {
            DialogService.OnOpen += Open;
            DialogService.OnClose += Close;
        }

        public void Dispose()
        {
            // The DialogService is a singleton so it is advisable to unsubscribe.
            DialogService.OnOpen -= Open;
            DialogService.OnClose -= Close;
        }

        void Open(string title, Type type, Dictionary<string, object> parameters, DialogOptions options)
        {

        }

        async void Close(dynamic result)
        {
            if (result != "Cancel")
            {
                isLoading = true;
                //customerItems = await DataService.GetSalesRepCustomerItems(userId);
                //customerItems = customerItems.ToList();

                //customerTicker = await DataService.GetCustomerTicker(selectedCustomers[0].CustomerID);

                isLoading = false;
                StateHasChanged();
            }

        }

        void ShowNotification(NotificationMessage message)
        {
            NotificationService.Notify(message);
        }
    }
}

enchev · March 20, 2023, 7:06am

Not sure you understood my reply. What I’ve suggested is to debug your case using our source code. I'll try to reproduce the problem with the code provided and I'll post my findings here.

enchev · March 20, 2023, 7:29am

I'm unable to reproduce the described problem. Please send us runnable example where we can reproduce and debug the issue.

Starvision · March 20, 2023, 8:12am

Hi Enchev,
I have combined the two examples from your website in the below code.
I can't run it as I don't have access to your datasource, but you should be able to do that.

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@using Radzen

@inherits DbContextPage


<RadzenSteps Change=@OnChange>
    <Steps>
        <RadzenStepsItem Text="Customers">
            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3" class="rz-my-6">1. Select a Customer to continue</RadzenText>
            <RadzenDataGrid ColumnWidth="200px" AllowFiltering="true" AllowPaging="true" AllowSorting="true" @bind-Settings="@Settings" Data="@customers" TItem="Customer" @bind-Value="@selectedCustomers">
                <Columns>
                    <RadzenDataGridColumn TItem="Customer" Property="CustomerID" Title="Customer ID" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="CompanyName" Title="Company Name" />
                    <RadzenDataGridColumn TItem="Customer" Property="ContactName" Title="Contact Name" />
                    <RadzenDataGridColumn TItem="Customer" Property="ContactTitle" Title="Contact Title" />
                    <RadzenDataGridColumn TItem="Customer" Property="Address" Title="Address" />
                    <RadzenDataGridColumn TItem="Customer" Property="City" Title="City" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="Region" Title="Region" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="PostalCode" Title="Postal Code" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="Country" Title="Country" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="Phone" Title="Phone" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="Fax" Title="Fax" Width="140px" />
                </Columns>
            </RadzenDataGrid>
        </RadzenStepsItem>
        <RadzenStepsItem Text="Orders" Disabled="@(selectedCustomers == null || selectedCustomers != null && !selectedCustomers.Any())">
            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3" class="rz-my-6">2. Select an Order to continue</RadzenText>
            <RadzenDataGrid ColumnWidth="150px" PageSize="5" AllowFiltering="true" AllowPaging="true" AllowSorting="true"
                            @bind-Settings="@Settings2" Data="@(selectedCustomers != null && selectedCustomers.Any() ? orders.Where(o => o.CustomerID == selectedCustomers[0].CustomerID) : Enumerable.Empty<Order>())" TItem="Order" @bind-Value="@selectedOrders">
                <Columns>
                    <RadzenDataGridColumn Width="120px" TItem="Order" Property="OrderID" Title="Order ID" />
                    <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
                    <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
                        <Template Context="order">
                            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                                <RadzenImage Path="@order.Employee?.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                                <span>@order.Employee?.LastName</span>
                            </RadzenStack>
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
                        <Template Context="order">
                            @String.Format("{0:d}", order.OrderDate)
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="RequiredDate" Title="Required Date">
                        <Template Context="order">
                            @String.Format("{0:d}", order.RequiredDate)
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date">
                        <Template Context="order">
                            @String.Format("{0:d}", order.ShippedDate)
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
                        <Template Context="order">
                            @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipAddress" Title="Address" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipCity" Title="City" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipRegion" Title="Region" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipPostalCode" Title="Postal Code" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipCountry" Title="Country" />
                </Columns>
            </RadzenDataGrid>
        </RadzenStepsItem>
        <RadzenStepsItem Text="Order Details" Disabled="@(selectedOrders == null || selectedOrders != null && !selectedOrders.Any())">
            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3" class="rz-my-6">Order Details</RadzenText>
            <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true"
                            Data="@(selectedOrders != null && selectedOrders.Any() ? orderDetails.Where(o => o.OrderID == selectedOrders[0].OrderID) : Enumerable.Empty<OrderDetail>())" TItem="OrderDetail" ColumnWidth="200px">
                <Columns>
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
                </Columns>
            </RadzenDataGrid>
        </RadzenStepsItem>
    </Steps>
</RadzenSteps>

<EventConsole @ref=@console />

@code {
    EventConsole console;
    IEnumerable<Customer> customers;
    IEnumerable<Order> orders;
    IEnumerable<OrderDetail> orderDetails;

    IList<Customer> selectedCustomers;
    IList<Order> selectedOrders;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        customers = dbContext.Customers.ToList();
        orders = dbContext.Orders.Include("Customer").Include("Employee").ToList();
        orderDetails = dbContext.OrderDetails.Include("Product").ToList();
    }
    void OnChange(int index)
    {
        console.Log($"Step with index {index} was selected.");
    }

    DataGridSettings _settings;
    public DataGridSettings Settings
    {
        get
        {
            return _settings;
        }
        set
        {
            if (_settings != value)
            {
                _settings = value;
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    DataGridSettings _settings2;
    public DataGridSettings Settings2
    {
        get
        {
            return _settings2;
        }
        set
        {
            if (_settings2 != value)
            {
                _settings2 = value;
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    private async Task LoadStateAsync()
    {
        await Task.CompletedTask;

        var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "Settings");
        if (!string.IsNullOrEmpty(result))
        {
            _settings = JsonSerializer.Deserialize<DataGridSettings>(result);
        }

        var result2 = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "Settings2");
        if (!string.IsNullOrEmpty(result2))
        {
            _settings2 = JsonSerializer.Deserialize<DataGridSettings>(result2);
        }

    }

    private async Task SaveStateAsync()
    {
        await Task.CompletedTask;

        await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('Settings', '{JsonSerializer.Serialize<DataGridSettings>(Settings)}')");

        await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('Settings2', '{JsonSerializer.Serialize<DataGridSettings>(Settings2)}')");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await LoadStateAsync();
            StateHasChanged();
        }
    }
}

enchev · March 20, 2023, 8:33am

Radzen Blazor is open source and the entire source code is here:

Starvision · March 20, 2023, 8:53am

I get this error when trying to run the demos:

Severity	Code	Description	Project	File	Line	Suppression State
Error	MSB3073	The command dotnet C:\Users\torbennielsen.nuget\packages\libsassbuilder\2.0.1\build../tool/LibSassBuilder.dll files \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\dark-base.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\dark.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\default-base.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\default.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\humanistic-base.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\humanistic.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\material-base.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\material.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\software-base.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\software.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\standard-base.scss \Mac\Home\Downloads\radzen-blazor-master\Radzen.Blazor\themes\standard.scss --outputstyle expanded --level default exited with code -532462766.	Radzen.Blazor	C:\Users\torbennielsen.nuget\packages\libsassbuilder\2.0.1\build\LibSassBuilder.targets	95

enchev · March 20, 2023, 8:54am

I’m afraid I don’t know what this error means.

korchev · March 20, 2023, 9:01am

Why is this location looking like that? Did you pull the source on a different (network or mapped) drive? Can you try pulling the source on the same drive as your project? It seems the SASS compiler cannot build the sass files because of the location.

Starvision · March 20, 2023, 9:10am

Moved it to the local disk, but still get the same error:

Severity	Code	Description	Project	File	Line	Suppression State
Error	MSB3073	The command dotnet C:\Users\torbennielsen.nuget\packages\libsassbuilder\2.0.1\build../tool/LibSassBuilder.dll files C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\dark-base.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\dark.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\default-base.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\default.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\humanistic-base.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\humanistic.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\material-base.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\material.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\software-base.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\software.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\standard-base.scss C:\Users\torbennielsen\source\repos\radzen-blazor-master\Radzen.Blazor\themes\standard.scss --outputstyle expanded --level default exited with code -532462766.	Radzen.Blazor	C:\Users\torbennielsen.nuget\packages\libsassbuilder\2.0.1\build\LibSassBuilder.targets	95
I am running Windows 11 and Visual Studio 2022.

korchev · March 20, 2023, 9:25am

You can try deleting this line from RadzenBlazorDemos.csproj

 <ProjectReference Include="..\Radzen.Blazor\Radzen.Blazor.csproj" Condition="'$(Configuration)' != 'Release'" />

And remove Condition from this:

 <PackageReference Include="Radzen.Blazor" Version="*" Condition="'$(Configuration)' == 'Release'"/>

Then you would be able to build the solution.

The code you have pasted currently doesn't compile. The errors are:

error CS1503: Argument 2: cannot convert from 'string' to 'object?[]?'
error CS0103: The name 'JsonSerializer' does not exist in the current context ```

Starvision · March 20, 2023, 10:08am

It now builds, but I get error 404 no matter which page I try to open.

regarding the errors in the pasted code, the second is a missing: @using System.Text.Json.
The second one I am not sure about without knowing which line.

Starvision · March 20, 2023, 10:10am

for the first one, I need to know the line

enchev · March 20, 2023, 11:14am

The problem is caused by the expression used for Data property in the second DataGrid. You can change that as follows. Same should be used for the third DataGrid binding as well:

@using Radzen
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@using RadzenBlazorDemos.Services
@using Microsoft.JSInterop
@using System.Text.Json

@inherits DbContextPage
@inject IJSRuntime JSRuntime

<RadzenSteps Change=@OnChange>
    <Steps>
        <RadzenStepsItem Text="Customers">
            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3" class="rz-my-6">1. Select a Customer to continue</RadzenText>
            <RadzenDataGrid ColumnWidth="200px" AllowFiltering="true" AllowPaging="true" AllowSorting="true" @bind-Settings="@Settings" Data="@customers" TItem="Customer" @bind-Value="@selectedCustomers">
                <Columns>
                    <RadzenDataGridColumn TItem="Customer" Property="CustomerID" Title="Customer ID" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="CompanyName" Title="Company Name" />
                    <RadzenDataGridColumn TItem="Customer" Property="ContactName" Title="Contact Name" />
                    <RadzenDataGridColumn TItem="Customer" Property="ContactTitle" Title="Contact Title" />
                    <RadzenDataGridColumn TItem="Customer" Property="Address" Title="Address" />
                    <RadzenDataGridColumn TItem="Customer" Property="City" Title="City" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="Region" Title="Region" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="PostalCode" Title="Postal Code" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="Country" Title="Country" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="Phone" Title="Phone" Width="140px" />
                    <RadzenDataGridColumn TItem="Customer" Property="Fax" Title="Fax" Width="140px" />
                </Columns>
            </RadzenDataGrid>
        </RadzenStepsItem>
        <RadzenStepsItem Text="Orders" Disabled="@(selectedCustomers == null || selectedCustomers != null && !selectedCustomers.Any())">
            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3" class="rz-my-6">2. Select an Order to continue</RadzenText>
            <RadzenDataGrid ColumnWidth="150px" PageSize="5" AllowFiltering="true" AllowPaging="true" AllowSorting="true"
            @bind-Settings="@Settings2" Data="@ordersByCustomers" TItem="Order" @bind-Value="@selectedOrders">
                <Columns>
                    <RadzenDataGridColumn Width="120px" TItem="Order" Property="OrderID" Title="Order ID" />
                    <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
                    <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
                        <Template Context="order">
                            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                                <RadzenImage Path="@order.Employee?.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                                <span>@order.Employee?.LastName</span>
                            </RadzenStack>
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
                        <Template Context="order">
                            @String.Format("{0:d}", order.OrderDate)
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="RequiredDate" Title="Required Date">
                        <Template Context="order">
                            @String.Format("{0:d}", order.RequiredDate)
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date">
                        <Template Context="order">
                            @String.Format("{0:d}", order.ShippedDate)
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
                        <Template Context="order">
                            @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipAddress" Title="Address" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipCity" Title="City" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipRegion" Title="Region" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipPostalCode" Title="Postal Code" />
                    <RadzenDataGridColumn TItem="Order" Property="ShipCountry" Title="Country" />
                </Columns>
            </RadzenDataGrid>
        </RadzenStepsItem>
        <RadzenStepsItem Text="Order Details" Disabled="@(selectedOrders == null || selectedOrders != null && !selectedOrders.Any())">
            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3" class="rz-my-6">Order Details</RadzenText>
            <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true"
                            Data="@(selectedOrders != null && selectedOrders.Any() ? orderDetails.Where(o => o.OrderID == selectedOrders[0].OrderID) : Enumerable.Empty<OrderDetail>())" TItem="OrderDetail" ColumnWidth="200px">
                <Columns>
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
                </Columns>
            </RadzenDataGrid>
        </RadzenStepsItem>
    </Steps>
</RadzenSteps>

<EventConsole @ref=@console />

@code {
    EventConsole console;
    IEnumerable<Customer> customers;
    IEnumerable<Order> orders;
    IEnumerable<OrderDetail> orderDetails;

    IList<Customer> selectedCustomers;
    IList<Order> selectedOrders;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        customers = dbContext.Customers.ToList();
        orders = dbContext.Orders.Include("Customer").Include("Employee").ToList();
        orderDetails = dbContext.OrderDetails.Include("Product").ToList();
    }

    IEnumerable<Order> ordersByCustomers;
    void OnChange(int index)
    {
        console.Log($"Step with index {index} was selected.");

        ordersByCustomers = selectedCustomers != null && selectedCustomers.Any() ? orders.Where(o => o.CustomerID == selectedCustomers[0].CustomerID) : Enumerable.Empty<Order>();
    }

    DataGridSettings _settings;
    public DataGridSettings Settings
    {
        get
        {
            return _settings;
        }
        set
        {
            if (_settings != value)
            {
                _settings = value;
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    DataGridSettings _settings2;
    public DataGridSettings Settings2
    {
        get
        {
            return _settings2;
        }
        set
        {
            if (_settings2 != value)
            {
                _settings2 = value;
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    private async Task LoadStateAsync()
    {
        await Task.CompletedTask;

        var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "Settings");
        if (!string.IsNullOrEmpty(result))
        {
            _settings = JsonSerializer.Deserialize<DataGridSettings>(result);
        }

        var result2 = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "Settings2");
        if (!string.IsNullOrEmpty(result2))
        {
            _settings2 = JsonSerializer.Deserialize<DataGridSettings>(result2);
        }

    }

    private async Task SaveStateAsync()
    {
        await Task.CompletedTask;

        await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('Settings', '{JsonSerializer.Serialize<DataGridSettings>(Settings)}')");

        await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('Settings2', '{JsonSerializer.Serialize<DataGridSettings>(Settings2)}')");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await LoadStateAsync();
            StateHasChanged();
        }
    }
}

Starvision · March 20, 2023, 11:40am

Doing that will have the second grid showing up with the wrong information as it will not be filtered by the selection in the first grid.

enchev · March 20, 2023, 11:41am

This is the code that will perform the filtering, not sure what is wrong?

Starvision · March 20, 2023, 11:42am

Sorry my mistake.
Thank you for the help.