Radzen dialog changes to update UI while editing

Radzen.Blazor Components
1

Hi,

I have a detail list which is displayed using RadzenRow and RadzenColumn and in that I show data.

Then user has an option to open dialog and see the same list in the dialog. When user removes 1 row from the list on dialog using delete button, the change is not occurring in the background page. But when I click close button the detail gets updated and the row gets removed.

I want to know is it possible to update the ui when editing on dialog ? Even before closing the dialog ?

2

Can I please get some advice on this ?

3

I'm afraid that I don't understand your case. Check our forum FAQ on how to improve your post.

4

Hi @enchev,

Apologies for asking question without explanation.

I have below code to call dialog box:

var parameters = new Dictionary<string, object>
{
    {"Transaction", Transaction_Model },
    {"Payment", null },
    {"Connection", conn },
    {"SqlTransaction", transaction }
};

var dialogResult = await DialogService.OpenAsync<PaymentDialog>("Payment", parameters, new DialogOptions { Width = "1100px", Height = "700px", Draggable = true, Resizable = true });

I have below dialog code that shows rows with product details. I have removed unnecessary code to make it to the point. The below code is inside Dialog box please note that.

@foreach (var item in templateData)
{
                <RadzenButton class="product-remove-button" Icon="remove" Size="ButtonSize.Small" Click=@(() => RemoveTransactionItem(item))>✖</RadzenButton>
            </span>
            <span class="quantity">@(item.Quantity) x</span>
            <span class="product-name">
                @{
                        @(item.Short_Name)
                }
            </span>
        </div>
    </div>
}

Now the remove button inside dialog box removes the item from TemplateData which is parameter and passed from page to dialog box.

When I close the dialog box the update of item list appears on the page in background but its not happening before closing dialog box.

Below is demonstration of what is happening and I what I want to acheive.

How to update before closing dialog

5

If you have reference to the DataGrid in the main page below all the dialogs you can call Reload(). If the variable assigned to Data property is updated the grid will be re rendered according to the new data.

6

@enchev I am not using datagrid is there any other way ?

Also, if I switch to datagrid calling Reload will not close dialog box or refresh dialog box ?

7

I’m afraid that I cannot provide much help by just looking at screenshots. Try to debug your application to check what variable should be updated in order UI to be refreshed.

8

Hello,
i would add a new parameter to the dialog component (PaymentDialog) of type Action (or a Func or a EventCallBack) that take a method to refresh the list (if is a grid just reload it, if is a custom cmp try with StateHasChanged). When u remove the item just invoke the Action parameter.

Declaration in the cmp PaymentDialog

[Parameter]
public Action? RefreshSource { get; set; }

Passing in your grid page

var parameters = new Dictionary<string, object>
{
    {"Transaction", Transaction_Model },
    {"Payment", null },
    {"Connection", conn },
    {"SqlTransaction", transaction },
    {"RefreshSource ", yourMethodToRefresh }
};

var dialogResult = await DialogService.OpenAsync<PaymentDialog>("Payment", parameters, new DialogOptions { Width = "1100px", Height = "700px", Draggable = true, Resizable = true });

Usage in the cmp PaymentDialog

if (RefreshSource != null)
{
	RefreshSource.Invoke();
}

Hope could be usefull.

9

@GodzSky Thank you very much for your input it worked like a charm.

If you don't mind can you please also suggest a resolution for this below ticket:

1 Like