Update list when doing Create, Update or Delete from Modal/Dialog

Radzen.Blazor Components
1

As you can see in the following code, I'm adding a new User. Upon successful completion, I want to update the Grid without refreshing the entire Page. When I do this in Xamarin, I use an ObservableCollection and it works great. In the following code, I parse the dialogResult as User. I then Append the User to grid0. This all seems to work. The problem is that grid0 does not contain the new User until I refresh the Page.

protected async System.Threading.Tasks.Task Button0Click(MouseEventArgs args)
        {
            var dialogResult = await DialogService.OpenAsync<AddUser>("Add User", null);
            //var content = (IEnumerable<string>)dialogResult;
            var content = (User)dialogResult;
            grid0.Data = grid0.Data.Append(content);
            grid0.Reload();

            await InvokeAsync(() => { StateHasChanged(); });
        }

Is there a way to update a Grid with either new, edited or deleted content without refreshing the entire Page? Do I need to use an ObservableCollection?

Thanks in advance!

2

Assigning component properties via code won't work as it is against the Blazor declarative nature.

You should update field/property which your data grid is bound to.

Check our online editing demo for tips.

3

Thanks for the quick reply. Something like this works.

Replace this line: grid0.Data = grid0.Data.Append(content);

With this line: Items = Items.Append(content);

Might want to also check for null just in case someone cancels the modal. You don't want to add a null item to the grid.

if (content != null)
            {
                Items = Items.Append(content);
            }

The only problem now is that dialogResult does not contain the new User. All it contains is the data that I have entered into the form. I would expect to get back the User.Id, User.Created etc... Is there a way to get the new User without making another API / Database call?

4

I finally got this working. The key to passing the actual result from the API or Database back to the dialogService is using the Close method.

DialogService.Close(createUserResult);

protected async System.Threading.Tasks.Task FormAddSubmit(User args)
        {
            try
            {
                
                var createUserResult = await UsersService.CreateUser(args);

                if (createUserResult.Id != Guid.Empty)
                {
                    NotificationService.Notify(NotificationSeverity.Success, $"Success", $"Created new User!");
                    DialogService.Close(createUserResult);
                }
                else
                {
                    NotificationService.Notify(NotificationSeverity.Error, $"Error", $"Unable to create new User!");
                    DialogService.Close(model);
                }
                
            }
            catch (System.Exception crmCreateContactException)
            {
                NotificationService.Notify(NotificationSeverity.Error, $"Error", $"Unable to create new User!");
                DialogService.Close(model);
            }
        }