List's elements not updating in Edit Dialog from SfGrid until click outside
Hello, there.
I'm using SfGrid to show registers and the Edit Dialog Template to add/edit them.
Inside the Edit Dialog I have a SfTab and a <ul> list inside a tab.
The thing is that when adding/removing items from the list, it doesn't update the list until I click outside the dialog. I've tried with async and static functions, even whit a task.delay(1) or changing my <ul> list to a SfListView, but the result is the same: only updating when clicking outside the dialog.
I'm using Synfusion Blazor version 18.3.0.51
Here's my code:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Notifications
@inject IRepositorio repo
@attribute [Authorize(Roles = "RC")]
<SfGrid @ref="SfGRid" DataSource="CatequistasLista" TValue="ColaboradorBase" Toolbar="@Toolbar" Locale="es-MX" AllowReordering="true" AllowPaging="true" Height="300" Width="auto" EnableHover="false" AllowResizing="true" AllowFiltering="true" AllowSorting="true">
<GridPageSettings PageCount="10" PageSizes="true"></GridPageSettings>
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
<GridEvents OnActionBegin="OnActionBeginHandler" TValue="ColaboradorBase"></GridEvents>
<GridEditSettings ShowDeleteConfirmDialog="true" AllowAdding="true" AllowEditing="true" AllowEditOnDblClick="false" Mode="EditMode.Dialog">
<Template Context="catequistas">
@{
var col = (catequistas as ColaboradorBase);
}
<SfTab @ref="@Navtab" Height="250px" CssClass="tab-adaptive" OverflowMode="@OverflowMode.Scrollable" HeaderPlacement="@HeaderPosition.Top">
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="Datos generales" IconCss="fas fa-user"></TabHeader>
</ChildContent>
<ContentTemplate>
<div class="row p-3 m-0" style="max-width:650px">
<div class="form-group col-sm-12 col-md-4">
<!-- ... -->
</div>
</div>
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="Perfiles" IconCss="fas fa-user-shield"></TabHeader>
</ChildContent>
<ContentTemplate>
<div class="row p-3 m-0" style="max-width:650px">
<p class="col-12">Cargos que ha desempeñado</p>
<div class="col-12">
<button class="btn btn-link" type="button" @onclick="@(async() => await AgregarPerfil())"><i class="fas fa-plus mr-2"></i> Agregar Perfil</button>
</div>
<div class="col-12 p-0">
@if (col.Perfiles.Any())
{
<ul class="list-group p-0">
@foreach (var item in col.Perfiles)
{
var perfil = PerfilesLista.First(p => p.Idperfil == item.Idperfil);
var fechaFin = item.FechaFin.HasValue ? item.FechaFin.Value.ToShortDateString() : "-";
<li class="list-group-item">
<div class="row">
<div class="form-group col-sm-12 col-md-5">
<label>Perfil</label>
@if (PerfilesLista.Any())
{
<SfComboBox TValue="string" TItem="Perfil" @bind-Value="@item.Idperfil" DataSource="@PerfilesLista">
<ComboBoxFieldSettings Text="Nombre" Value="Idperfil"></ComboBoxFieldSettings>
</SfComboBox>
}
</div>
<div class="form-group col-sm-12 col-md-3">
<label>Fecha Inicio</label>
<SfDatePicker TValue="DateTime" @bind-Value="@(item.FechaInicio)" Enabled="PuedeEditar"></SfDatePicker>
</div>
<div class="form-group col-sm-12 col-md-3">
<label>Fecha Fin</label>
<SfDatePicker TValue="DateTime?" @bind-Value="@(item.FechaFin)" Enabled="PuedeEditar"></SfDatePicker>
</div>
<div class="form-group col-sm-12 col-md-1">
<button type="button" class="btn btn-link mt-4" @onclick="(async () => await RemoverPerfil(item))"><i class="fas fa-times"></i></button>
</div>
</div>
</li>
}
</ul>
}
else
{
<p>Aún no ha tenido ningún cargo</p>
}
</div>
</div>
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="Formación" IconCss="fas fa-user-graduate"></TabHeader>
</ChildContent>
<ContentTemplate>
<div class="row p-3 m-0" style="max-width:650px">
<!-- ... -->
</div>
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="Trayectoria" IconCss="fas fa-chalkboard-teacher"></TabHeader>
</ChildContent>
<ContentTemplate>
<!-- ... -->
</ContentTemplate>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="Usuario" IconCss="fas fa-user-lock"></TabHeader>
</ChildContent>
<ContentTemplate>
<!-- ... -->
</ContentTemplate>
</TabItem>
</TabItems>
</SfTab>
</Template>
</GridEditSettings>
<GridColumns>
<GridColumn Field="Detalle.Nombre" HeaderText="Nombre" Width="80"></GridColumn>
<GridColumn Field="Detalle.ApellidoPaterno" HeaderText="Ap Paterno" Width="80"></GridColumn>
<GridColumn Field="Detalle.ApellidoMaterno" HeaderText="Ap Materno" Width="80"></GridColumn>
<GridColumn Field="Detalle.FechaNacimiento" HeaderText="Fec Nac" Type="ColumnType.Date" Format="dd MMM yyyy" Width="80"></GridColumn>
<GridColumn Field="Detalle.Telefono" HeaderText="Teléfono" Width="80"></GridColumn>
<GridColumn Field="Detalle.Email" HeaderText="Email" Width="80"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<ColaboradorBase> CatequistasLista { get; set; } = new List<ColaboradorBase>();
public List<Perfil> PerfilesLista { get; set; } = new List<Perfil>();
public bool PuedeEditar { get; set; } = false;
public ColaboradorBase ColaboradorSel { get; set; } = new ColaboradorBase();
public string[] Toolbar { get; set; } = { "Add", "Edit", "Search" };
SfGrid<ColaboradorBase> SfGRid;
SfToast ToastObj;
SfTab Navtab;
public class ColaboradorBase
{
public DetalleColaborador Detalle { get; set; }
public List<ColaboradorFormacion> CursosFormacion { get; set; } = new List<ColaboradorFormacion>();
public List<ColaboradorTrayectoria> CursosTrayectoria { get; set; } = new List<ColaboradorTrayectoria>();
public List<ColaboradorPerfil> Perfiles { get; set; } = new List<ColaboradorPerfil>();
public Usuario Usuario { get; set; } = new Usuario();
}
protected override async Task OnInitializedAsync()
{
var httpCatequistas = await repo.Get<List<ColaboradorBase>>("api/catalogos/catequistas");
CatequistasLista = httpCatequistas.Response;
var httpPerfiles = await repo.Get<List<Perfil>>("api/catalogos/perfiles");
PerfilesLista = httpPerfiles.Response;
}
private async Task OnActionBeginHandler(Syncfusion.Blazor.Grids.ActionEventArgs<ColaboradorBase> args)
{
if (args.RequestType.ToString() == "BeginEdit")
{
if (args.Data != null)
{
ColaboradorSel = args.Data;
}
}
}
public async Task AgregarPerfil()
{
var new_item = new ColaboradorPerfil
{
Idcolaborador = ColaboradorSel.Detalle.Idcolaborador,
Idperfil = "CA",
FechaInicio = DateTime.Now
};
ColaboradorSel.Perfiles.Add(new_item);
await InvokeAsync(() => StateHasChanged());
}
public async Task RemoverPerfil(ColaboradorPerfil item)
{
ColaboradorSel.Perfiles.Remove(item);
await InvokeAsync(() => StateHasChanged());
}
}
Thank you,
Best regards.
