Update row on column change

[daveg1466]

Hi, I am using a datagrid, a .net 8 blazor web app auto, to load data from my task table. the table contains a series of booleans. I am trying to put switches (or checkboxes..it doesn't matter) so that I can change the value from true to false and vice versa. What I am trying to do is update the row as soon as the value in any of the switched/checkboxes change. I have tried several ways to do this, but can't get the row to update. The DataGrid Column looks like this

                <RadzenDataGridColumn TItem="Ignite.Server.Models.Ignitedb.OpportunityTask">
                    <Template Context="switch1">
                            <RadzenRow>
                                <RadzenColumn Style="text-align: center">
                                    <RadzenFormField Text="@getSteps.Value.FirstOrDefault().Step1Desc1" Variant="Radzen.Variant.Text" Style="width: 85px; min-width: 85px" Visible="@getSteps.Value.FirstOrDefault().Step1Active1">
                                        <RadzenRow Style="margin-top: 7px; margin-bottom: 7px">
                                            <RadzenColumn Style="text-align: center">
                                                <RadzenSwitch Style="width: 45px; min-width: 45px; height: 25px" @bind-Value="@switch1.IsCompleteStep1" Change="@((args) => OnSwitchChange(args, switch1))"></RadzenSwitch>
                                            </RadzenColumn>
                                        </RadzenRow>
                                    </RadzenFormField>
                                </RadzenColumn>
                            </RadzenRow>
                    </Template>
                </RadzenDataGridColumn>

and the OnSwitchChange Method looks like this...

    protected async Task OnSwitchChange(bool args, Ignite.Server.Models.Ignitedb.OpportunityTask data)
    {
        await grid0.UpdateRow(data);
    }

It will not update the row.

In a similar project done in just server, I handled it like this...

                                                <RadzenRow Style="width: 100%">
                                                    <RadzenColumn>
                                                        <RadzenText Text="@task.Step1Description" Style="font-size: 10px; margin-bottom: 0px" />
                                                    </RadzenColumn>
                                                </RadzenRow>
                                                <RadzenRow Style="width: 100%">
                                                    <RadzenColumn>
                                                        <RadzenSwitch @bind-Value="@task.Step1Select" Change=@(args => SwitchChange(args, task)) />
                                                    </RadzenColumn>
                                                </RadzenRow>

With SwitchChange like this...

    protected async Task  SwitchChange(bool args, Accelerate.Models.AccelerateData.OpportunityTask data)
    {
         await AccelerateDataService.UpdateOpportunityTask(data.TaskID, data);
    }

and it worked perfectly.

Just looking for the right direction to go in on this...I have tried similar code to this. I also tried re loading the orginal table, filter for the TaskID and try to update that, but can't get anything to work...please help point me in the right direction....

[enchev]

@daveg1466

@bind-Value

This is enough to update the data item associated with this row.

@daveg1466

grid0.UpdateRow(data);

This method will raise the needed events only, you might need to call Reload() if you want the grid to rerender.

[daveg1466]

Yes, and that works fine if I am using an inline edit with a save button, but I am trying to accomplish something different. When the switch triggers the change event, I want it to update the row then, not update the control then click a save button. I was able to accomplish this in Server, but in this new .net 8 model, it doesn't work the same way.

[enchev]

@daveg1466

I was able to accomplish this in Server

Server side EF entities will react immediately after change and you will see the updated values in the DataGrid. Client side you will need to call Reload() for the entire grid.

[daveg1466]

I'm definitely missing something then. Created a basic test Blazor 8 web app auto. Create a 3 column table in ms sql with a description and one boolean non nullable. Created a Crud form in Radzen. When to the Main page with the datagrid. Changed the boolean column to a Switch and created the following code.

            <RadzenDataGridColumn TItem="SwitchTest.Server.Models.Ignitedb.Account" Property="AccountActive" Title="Account Active">
                <Template>
                    <RadzenRow>
                        <RadzenColumn>
                            <RadzenSwitch @bind-Value="@context.AccountActive" Change="@((args) => Switch0Change(context))"></RadzenSwitch>
                        </RadzenColumn>
                    </RadzenRow>
                </Template>
            </RadzenDataGridColumn>

Then I created the SwitchChange even (Switch0Change).

    protected async System.Threading.Tasks.Task Switch0Change(SwitchTest.Server.Models.Ignitedb.Account data)
    {
        await grid0.UpdateRow(data);
        await grid0.Reload();
    }

The rest of the Code Behind is not changed from the original code create by the Page Creator.

Still doesn't work....what am I missing

[enchev]

Can you post how the DataGrid is bound? What is assigned to Data?

[daveg1466]

I created a table with just 3 columns, a primary key, a name and a bool. Here is the entire code behind.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Radzen;
using Radzen.Blazor;

namespace SwitchTest.Client.Pages
{
public partial class Accounts
{
[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 IgnitedbService IgnitedbService { get; set; }

    protected IEnumerable<SwitchTest.Server.Models.Ignitedb.Account> accounts;

    protected RadzenDataGrid<SwitchTest.Server.Models.Ignitedb.Account> grid0;
    protected int count;

    protected async Task Grid0LoadData(LoadDataArgs args)
    {
        try
        {
            var result = await IgnitedbService.GetAccounts(filter: $"{args.Filter}", orderby: $"{args.OrderBy}", top: args.Top, skip: args.Skip, count:args.Top != null && args.Skip != null);
            accounts = result.Value.AsODataEnumerable();
            count = result.Count;
        }
        catch (System.Exception ex)
        {
            NotificationService.Notify(new NotificationMessage(){ Severity = NotificationSeverity.Error, Summary = $"Error", Detail = $"Unable to load Accounts" });
        }
    }

    protected async Task AddButtonClick(MouseEventArgs args)
    {
        await DialogService.OpenAsync<AddAccount>("Add Account", null);
        await grid0.Reload();
    }

    protected async Task EditRow(SwitchTest.Server.Models.Ignitedb.Account args)
    {
        await DialogService.OpenAsync<EditAccount>("Edit Account", new Dictionary<string, object> { {"AccountId", args.AccountId} });
        await grid0.Reload();
    }

    protected async Task GridDeleteButtonClick(MouseEventArgs args, SwitchTest.Server.Models.Ignitedb.Account account)
    {
        try
        {
            if (await DialogService.Confirm("Are you sure you want to delete this record?") == true)
            {
                var deleteResult = await IgnitedbService.DeleteAccount(accountId:account.AccountId);

                if (deleteResult != null)
                {
                    await grid0.Reload();
                }
            }
        }
        catch (Exception ex)
        {
            NotificationService.Notify(new NotificationMessage
            {
                Severity = NotificationSeverity.Error,
                Summary = $"Error",
                Detail = $"Unable to delete Account"
            });
        }
    }

    protected async System.Threading.Tasks.Task Switch0Change(SwitchTest.Server.Models.Ignitedb.Account data)
    {
        await grid0.UpdateRow(data);
        await grid0.Reload();
    }
}

}

and the razor page

@page "/accounts"

Accounts













<RadzenDataGrid @ref="grid0" ColumnWidth="200px" AllowFiltering="true" FilterMode="FilterMode.Advanced" AllowPaging="true" AllowSorting="true" ShowPagingSummary="true" PageSizeOptions=@(new int{5, 10, 20, 30})
Data="@accounts" LoadData="@Grid0LoadData" Count="@count" TItem="SwitchTest.Server.Models.Ignitedb.Account">









<RadzenSwitch @bind-Value="@context.AccountActive" Change="@((args) => Switch0Change(context))">

                    <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Size="ButtonSize.Medium"
                        Shade="Shade.Lighter" Variant="Variant.Flat"
                        Click=@(args => GridDeleteButtonClick(args, account)) @onclick:stopPropagation="true" />
                </Template>
            </RadzenDataGridColumn>
        </Columns>

    </RadzenDataGrid>

</RadzenColumn>

[daveg1466]

don't know why that won't format properly...

[daveg1466]

I changed nothing from the defaults created except what pertains to that datagrid column...

[daveg1466]

Curious if you could recreate this?

[korchev]

Hi @daveg1466,

I am not sure what you are trying to achieve to be honest. The UpdateRow method of RadzenDataGrid will not update your database for sure. It will only trigger the RowUpdate event. You need to handle it and update the database there. You can use the inline edit page template as a start.

[daveg1466]

After a few experiments, I have found the issue. In my task table, there is a column for an image for each task. The task table is linked to a Task Type table via the TaskTypeID. It seems that when I insert an image into the Task table,(not sure if its the link), I am no longer able to save any updates to the Task Table. I even when back and created nothing more than a standard crud page for the task table and even that would not save. If I removed the image and replaced it with some random text...it saved fine....Just an FYI, that is what I have found.

Having me look at the inline edit examples helped me tremendously.

So now I an only storing the file location for use instead of the whole image file.

Now just trying to wrap my head around how to get the location using either fileinput or updload. I have manually entered the locations for now, since there are very few of them and no reason to really update them...

Thanks for the help!