Button Inline Editing

Sbl · June 11, 2021, 1:05pm

Hi,

I want to integrate a DataGrid via Radzen directly into my BLAZOR WASM application;

I have created my local database via the Shared & server project.
In the client project I created a component edit.razor and tab.razor

Structure of edit.razor :

@page "/developer/edit/{developerId:int}"
@inject HttpClient http
@inject NavigationManager uriHelper
@inject IJSRuntime js

<FormEdit ButtonText="Update" dev="dev" OnValidSubmit="@EditDeveloper" /``>

@code {
[Parameter] public int developerId { get; set; }
Developer dev = new Developer();

protected async override Task OnParametersSetAsync()
{
dev = await http.GetFromJsonAsync($"api/developer/{developerId}");
}
async Task EditDeveloper()
{
await http.PutAsJsonAsync("api/developer", dev);
await js.InvokeVoidAsync("alert", $"Updated Successfully!");
uriHelper.NavigateTo("developer");
}
}

Extract of tab.razor structure :

....

<RadzenDataGridColumn TItem="Developer" Property="Id" Filterable="false" Sortable="false"
TextAlign="TextAlign.Center" Width="100px">
<Template Context="developers">
<RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@EditDeveloper"
@onclick:stopPropagation="true">
</RadzenButton>
</Template>

...

The problem is that I can't give the route for edit page;
The route is : "/developer/edit/{developerId:int}"
When I click on edit the page Edit must be open!
Have you an idea?
Thanks in advance

Sbl · June 11, 2021, 2:13pm

I tried to otherwise in Tabd.razor I added

<Template Context="developers">
<RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(args => EditDeveloper(developers.Id))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
@code{
[Parameter] public int EditId { get; set; }
Developer dev = new Developer();
protected async override Task OnParametersSetAsync()
{
dev = await http.GetFromJsonAsync($"api/developer/@dev.Id");
}
async Task EditDeveloper(int EditId)
{
await http.PutAsJsonAsync("api/developer", dev);
await js.InvokeVoidAsync("alert", $"Updated Successfully!");
}
}

I've obtained the error message : An unhandled error has occurred. Reload
I didn't see the icon edit I only see delete icon. I've used the linked https://blazor.radzen.com/datagrid-inline-edit. In my side I don't want to modify the ligne but I want to open a page Edit. I don't know if I can do that with radzen. When I used a simple tab with href="developer/edit/@dev.Id" all things is OK!

I don't know how I can do that!

korchev · June 11, 2021, 4:41pm

Hi @Sbl,

I don't understand what you are trying to achieve. You mention inline editing but then want to open a separate page when the edit button is clicked (which isn't inline editing). To open a different page you can use the NavigationManager:

async Task EditDeveloper(int EditId)
{
     NavigationManager.NavigateTo($"/developer/edit/{EditId}");
}

Sbl · June 12, 2021, 5:14am

Hi, thanks to your answer.
sorry I've did a mistake in subject.
FYI, I begin with visual studio and blazor radzen also. I use blazor because I've lot used rshiny that is same tbat blazor WASM.

I will check your proposition a d I will come back.

Sbl · June 13, 2021, 9:45am

Hi, I've tried to put

async Task EditDeveloper(int EditId)
{
NavigationManager.NavigateTo($"/developer/edit/{EditId}");
}
It's the same thing!

I want to put the button in each line of the tab and open a separate page when I click the edit button.

I do not keep it a secret that I am a little lost!!
Have you an idea?

korchev · June 14, 2021, 4:54am

What tab are you referring to? I thought you were using the RadzenDataGrid. If you use the code I've shared clicking a button will navigate to the specified route.

Sbl · June 14, 2021, 9:14am

Hi,
Sure I used RadzenDataGrid.

...
<RadzenDataGridColumn TItem="Developer" Property="Id" Filterable="false" Sortable="false" >
TextAlign="TextAlign.Center" Width="100px">

<RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(args => >
EditDeveloper(developers.Id))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
</RadzenDataGridColumn>

You can see on the screenshot that it doesn't recognize NavigationManager and EditDeveloper, yet I injected @inject NavigationManager uriHelper
Capture

I really don't undersatnd what's happen!

korchev · June 14, 2021, 9:22am

If you injected the NavigationManager as uriHelper then you should use uriHelper. I strongly recommend reviewing how Blazor injection works.

Sbl · June 14, 2021, 9:39am

Thanks to your reply.
I will check it. So If I understand @inject NavigationManager uriHelper is not good. Can you tell me how I can do that?
thanks in advance

Sbl · June 14, 2021, 9:43am

@inject NavigationManager NavigationManager is better

So I ve always an issue with EditDeveloper
Capture

I added await
await js.InvokeVoidAsync("alert", $"Updated Successfully!"); for example

After that I have no more mistakes. But I still can't see my button edit!

korchev · June 14, 2021, 9:58am

What's the actual problem? What happens when you debug the EditDeveloper method?

Sbl · June 14, 2021, 11:54am

So I've changeg as you propose. I don't have any more problem in code.
When I launched the app I don't see the edit button in datagrid I only see the delete button.

korchev · June 14, 2021, 11:57am

Then check your column definition. If the column does not appear the button won't appear as well.

Sbl · June 14, 2021, 12:12pm

Grrrr... What's happen with this button !
I have expanded the column and I still don't see the famous edit button.

Any error in the code I take the same definition of the https://blazor.radzen.com/datagrid-inline-edit

This means that the route is not good.
However, I have to go to the page : @page "/developer/edit/{developerId:int}" where to find the
<FormEdit buttonText ButtonText="Update" dev="dev" OnValidSubmit="@EditDeveloper" >

korchev · June 14, 2021, 3:02pm

The route shouldn't cause the column not to be visible. You can try removing the other columns to see if it makes a difference. Also you can paste here the complete RadzenDataGrid declaration. Maybe there is something obvious.

Sbl · June 14, 2021, 3:48pm

You see below all columns of the table

Aftrer I follow up your advise I deleted all columns execpt edit column :
Capture

And I see the edit button in each line.

So How can I adjust all columms datagrid ? Is there an automatic adjust of the all columns?

korchev · June 14, 2021, 3:54pm

Our online demo uses the Width of the column.

<RadzenDataGridColumn TItem="Order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="100px">
    <Template Context="order">
       <RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(args => EditRow(order))" @onclick:stopPropagation="true">
       </RadzenButton>
    </Template>

Sbl · June 14, 2021, 4:10pm

Thanks to your help. I see the two buttons in the datagrid. Great!
Capture

The last question :

async Task EditDeveloper(int EditId)
{
NavigationManager.NavigateTo($"/developer/edit/{EditId}");
}

I have to add await in the function otherwise I get an error message