DataGrid row background color when editing

Radzen.Blazor Components
1

I have a singleton service with a DataGrid. I would like when one user enters edit mode, that all other users get indication the row is being edited. So on the EditRowAsync call, I set an attribute on the model to indicate the model is being edited. I use the CellRender() to use the attribute and set the background color. It works on the user doing the editing, but the other users don't get the background color change. Any thoughts or better solution?

  <RadzenDataGridColumn TItem="ParticipantViewModel" Frozen="true" Context="item" Pickable="false" Sortable="false" TextAlign="TextAlign.Right" Reorderable="false" Width="100px" Filterable="false">
        <Template Context="item">
           <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Small" Click="@(args => EditRowAsync(item))" @onclick:stopPropagation="true">
           </RadzenButton>
           <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Small" class="my-1 ms-1" Click="@(args => DeleteRow(item))" @onclick:stopPropagation="true">
           </RadzenButton>
        </Template>
        <EditTemplate Context="item">
           <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Small" Click="@((args) => SaveRow(item))">
           </RadzenButton>
           <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Small" class="my-1 ms-1" Click="@((args) => CancelEdit(item))">
           </RadzenButton>
           <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Small" class="my-1 ms-1" Click="@(args => DeleteRow(item))">
           </RadzenButton>
        </EditTemplate>
  </RadzenDataGridColumn>


  public async Task EditRowAsync(ParticipantViewModel model)
  {
     model.IsEditing = true;

     if (ParticipantModelsGrid != null)
        await ParticipantModelsGrid.EditRow(model);
  }

  public void CellRender(DataGridCellRenderEventArgs<ParticipantViewModel> args)
  {
        if ( args.Data.IsEditing)
       {
          string selected = "#ffffe0";
          args.Attributes.Add("style", $"background-color: {selected};");
       }
}
2

Hi @bbk,

Implementing this requirement is a bit hard. You have to refresh all instances of that grid that other users may be using. I am afraid this isn't supported out of the box. Perhaps you can use some singleton service that has an event which all pages subscribe to.

@inject MyService Service
@implements IDisposable

@code {
private int modelId;

protected override void OnInitialize()
{
    Service.EditRecordChanged += OnEditRecordChanged;
}

public void Dispose()
{
   Service.EditRecordChanged -= OnEditRecordChanged;
}

void OnEditRecordChanged(object sender, MyEditRecordsEventArgs args)
{
   if (sender != this)
   {
       modelId = args.ModelId;

       InvokeAsync(() => 
      {
         ParticipantModelsGrid?.Reload();
      });
   }
}

public async Task EditRowAsync(ParticipantViewModel model)
 {
     modelId = model.ID;

     Service.EditRecordChanged.Invoke(this, new MyEditRecordsEventArgs { ModelId = modelId });

     if (ParticipantModelsGrid != null)
        await ParticipantModelsGrid.EditRow(model);
  }

 public void CellRender(DataGridCellRenderEventArgs<ParticipantViewModel> args)
  {
        if ( args.Data.Id == modelId)
       {
          string selected = "#ffffe0";
          args.Attributes.Add("style", $"background-color: {selected};");
       }
}
3

Thanks, that put me in the right direction. I have it working now. One other question; when the row is being edited EditRowAsync gets called. When the row is saved the SaveRow gets called and when the row is canceled the CancelEdit gets called. However, if the row is in edit, and the operator click another row's edit. The previous row seems to save and the EditRowAsync is called for the new row. I don't seem to get any event callbacks for the row that exited edit. Hope that makes sense. Is there a way to catch when that happens?

4

Yes, that is correct. No event fires in this case.