Hi,

I am having problems with Blazor WebAssembly.

In this form the response to the user is very bad and it stays frozen for several seconds when you try to write, and the controls take several seconds to react.

As you can see I do not have events that are launched continuously only the typical data-bindings.

That could be happening?

This is the sourc code:

@page "/ListaProyectos"

@using waProyectosPMO.Client.Services
@using waProyectosPMO.Client.Services.ModelDTOs
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using System.Collections.ObjectModel
@using waProyectosPMO.Client.Resources
@using  Telerik.Blazor.Services

@inject IProyectoService servicioProyecto
@inject IAmbitoService servicioAmbito
@inject IEstadoService servicioEstado
@inject IDepartamentoService servicioDepartamento
@inject ITelerikStringLocalizer Localizer



<h1>Proyectos</h1>

<p>Lista de Proyectos de la aplicación</p>

@if (proyectos == null)
{
    <p><em>Cargando...</em></p>
}
else
{
    <TelerikGrid Data="@proyectos" Height="100%"
                 Pageable="true" Sortable="true" Groupable="true"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
                 Resizable="true" Reorderable="true" OnUpdate="@UpdateHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">

        <GridColumns>
            <GridCommandColumn Width="120px">
                <GridCommandButton Command="Save" Icon="save" ShowInEdit="true"></GridCommandButton>
                <GridCommandButton OnClick="@((args)=> SeleccionarProyectoItem(args.Item as ProyectoItem))" Icon="edit"></GridCommandButton>
                @*<GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>*@
                <GridCommandButton Command="Delete" Icon="delete" OnClick="@DeleteWithConfirmation"></GridCommandButton>
                <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></GridCommandButton>
            </GridCommandColumn>
            <GridColumn Field="@(nameof(ProyectoItem.ProyectoItemID))" Width="80px" Title="ID" Filterable="false" Editable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.Nombre))" Title="Nombre" Width="300px" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.DescAmbito))" Title="Ambito" Width="270px" Groupable="true">
                <EditorTemplate>
                    @{
                        CurrentlyEditedProyectoItem = context as ProyectoItem;
                        <TelerikDropDownList Data="@ambitos" @bind-Value="CurrentlyEditedProyectoItem.AmbitoID"
                                             TextField="Nombre" ValueField="AmbitoItemID" DefaultText="Elija un Ambito"
                                             Width="180px" PopupHeight="auto"></TelerikDropDownList>
                    }
                </EditorTemplate>
            </GridColumn>
            <GridColumn Field="@(nameof(ProyectoItem.DescEstado))" Title="Estado" Width="270px" Groupable="true">
                <EditorTemplate>
                    @{
                        CurrentlyEditedProyectoItem = context as ProyectoItem;
                        <TelerikDropDownList Data="@estados" @bind-Value="CurrentlyEditedProyectoItem.EstadoID"
                                             TextField="Nombre" ValueField="EstadoItemID" DefaultText="Elija un Estado"
                                             Width="250px" PopupHeight="auto"></TelerikDropDownList>
                    }
                </EditorTemplate>
            </GridColumn>
            <GridColumn Field="@(nameof(ProyectoItem.EsEstrategico))" Title="Estrateg. S/N" Width="100px" Groupable="true" />
            <GridColumn Field="@(nameof(ProyectoItem.Descripcion))" Title="Descripcion" Width="300px" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.Objetivo))" Title="Objetivo" Width="300px" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.Mejoras))" Title="Mejoras" Width="300px" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.DescPropietario))" Title="Dep.Propietario" Width="270px" Groupable="true">
                <EditorTemplate>
                    @{
                        CurrentlyEditedProyectoItem = context as ProyectoItem;
                        <TelerikDropDownList Data="@departamentos" @bind-Value="CurrentlyEditedProyectoItem.PropietarioID"
                                             TextField="Nombre" ValueField="DepartamentoItemID" DefaultText="Elija un Departamento"
                                             Width="250px" PopupHeight="auto"></TelerikDropDownList>
                    }
                </EditorTemplate>
            </GridColumn>
            <GridColumn Field="@(nameof(ProyectoItem.NombrePropietario))" Title="Propietario" Width="270px" Groupable="true" />
            <GridColumn Field="@(nameof(ProyectoItem.Criticidad))" Title="Criticidad" Width="100px" Filterable="false" Groupable="false" />
            @*<GridColumn Field="@(nameof(ProyectoItem.Prioridad))" Title="Prioridad" Width="100px" Filterable="false" Groupable="false" />*@
            <GridColumn Field="@(nameof(ProyectoItem.ImpactoTiempos))" Title="Imp. Tiempos" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.ImpactoCalidad))" Title="Imp. Calidad" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.ImpactoInformes))" Title="Imp. Informes" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.ImpactoSeguridad))" Title="Imp. Seguridad" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.ImpactoCostes))" Title="Imp. Costes" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.ImpactoIngresos))" Title="Imp. Ingresos" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.ImpactoImagen))" Title="Imp. Imagen" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.ImpactoSostenibilidad))" Title="Imp. Sostenib." Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.GestionDelCambio))" Title="Gest. Cambio" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.Riesgo))" Title="Riesgo" Width="100px" Groupable="false" Filterable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.DescRiesgo))" Title="Desc Riesgo" Width="270px" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.Oportunidad))" Title="Oportunidad" Width="100px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.DescOportunidad))" Title="Desc Oportunidad" Width="270px" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.FechaPeticion))" Title="F.Peticion" Width="150px" Groupable="false">
                <Template>
                    @((context as ProyectoItem).FechaPeticion?.ToString("dd/MM/yyyy"))
                </Template>
            </GridColumn>
            <GridColumn Field="@(nameof(ProyectoItem.FechaNecesidad))" Title="F.Necesidad" Width="150px" Groupable="false">
                <Template>
                    @((context as ProyectoItem).FechaNecesidad?.ToString("dd/MM/yyyy"))
                </Template>
            </GridColumn>
            <GridColumn Field="@(nameof(ProyectoItem.FechaInicio))" Title="F.Inicio" Width="150px" Groupable="false">
                <Template>
                    @((context as ProyectoItem).FechaInicio?.ToString("dd/MM/yyyy"))
                </Template>
            </GridColumn>
            <GridColumn Field="@(nameof(ProyectoItem.FechaProduccion))" Title="F.Produccion" Width="150px" Groupable="false">
                <Template>
                    @((context as ProyectoItem).FechaProduccion?.ToString("dd/MM/yyyy"))
                </Template>
            </GridColumn>
            <GridColumn Field="@(nameof(ProyectoItem.FechaCierre))" Title="F.Cierre" Width="150px" Groupable="false">
                <Template>
                    @((context as ProyectoItem).FechaCierre?.ToString("dd/MM/yyyy"))
                </Template>
            </GridColumn>
            <GridColumn Field="@(nameof(ProyectoItem.CosteEstimado))" Title="Coste" Width="150px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.RetornoIngresosEstimado))" Title="Ingresos" Width="150px" Filterable="false" Groupable="false" />
            <GridColumn Field="@(nameof(ProyectoItem.PuntuacionTotal))" Title="Puntuación" Width="150px" Filterable="false" Groupable="false" />
        </GridColumns>
        <GridToolBar>
            @*<GridCommandButton Command="Add" Icon="add">Añadir Proyecto</GridCommandButton>*@
            <GridCommandButton OnClick="@((args)=> AnadirProyectoItem())" Icon="add">@Localizer[nameof(Messages.Grid_Create)]</GridCommandButton>
        </GridToolBar>
    </TelerikGrid>

    <ConfirmWindow OnConfirm="@DeleteCallback" Visible="@( ItemToDelete != null )" OnCancel="@( _ => ItemToDelete = null )"
                   ConfirmText="@( $" Desea realmente borrar el proyecto {ItemToDelete?.Nombre}" )"
                   ConfirmTitle="Confirmacion de borrado" />



}

<style>
    .ancho_texto {
        width: 507px;
        /*margin-top:10px;*/
    }
     .ancho_texto_400 {
        width: 400px;
        /*margin-top:10px;*/
    }
     .ancho_selector_peso_95 {
        width:90px!important;
        /*margin-top:5px;*/
    }
     .ancho_selector_peso_100 {
        width:100px!important;
    }

    .alto_texto_100 
    {
        height:100px;
    }
    .ancho_span_libre {
        width: auto;
        margin-right:10px;
    }
   
   
</style>

<TelerikWindow Width="1120px" Height="790px" Centered="true" Visible="@(selectedProyectoItem != null)" Modal="true">
    <WindowTitle>
        <strong>Editar Proyecto</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        <EditForm Model="@selectedProyectoItem" >
            <div class="form-group ">
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Nombre
                    </label>
                    <TelerikTextBox @bind-Value="selectedProyectoItem.Nombre"  Width="1030px"></TelerikTextBox>
                </span>
            </div>
            <div class="form-group ">
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Ámbito
                    </label>
                    <TelerikDropDownList Data="@ambitos" @bind-Value="selectedProyectoItem.AmbitoID"
                                         TextField="Nombre" ValueField="AmbitoItemID" DefaultText="Elija un Ambito"
                                         Width="300px" PopupHeight="auto"></TelerikDropDownList>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Estado
                    </label>
                    <TelerikDropDownList Data="@estados" @bind-Value="selectedProyectoItem.EstadoID"
                                         TextField="Nombre" ValueField="EstadoItemID" DefaultText="Elija un Estado"
                                         Width="300px" PopupHeight="auto"></TelerikDropDownList>
                </span>

                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                   <label>
                    Es Estratégico:
                    <InputCheckbox @bind-Value="selectedProyectoItem.EsEstrategicoNotNull"></InputCheckbox>
                    </label>
                </span>

            </div>
            <div class="form-group ">
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Descripción
                    </label>
                    <InputTextArea Class="k-i-textarea ancho_texto alto_texto_100" @bind-Value="selectedProyectoItem.Descripcion"></InputTextArea>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Objetivo
                    </label>
                    <InputTextArea Class="k-i-textarea ancho_texto alto_texto_100" @bind-Value="selectedProyectoItem.Objetivo"></InputTextArea>
                </span>
            </div>
            <div class="form-group ">
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Mejoras
                    </label>
                    <InputTextArea Class="k-i-textarea ancho_texto" @bind-Value="selectedProyectoItem.Mejoras"></InputTextArea>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Dep.Propietario
                    </label>
                    <TelerikDropDownList Data="@departamentos" @bind-Value="selectedProyectoItem.PropietarioID"
                                         TextField="Nombre" ValueField="DepartamentoItemID" DefaultText="Elija un Departamento"
                                         Width="250px" PopupHeight="auto"></TelerikDropDownList>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Propietario
                    </label>
                    <TelerikTextBox @bind-Value="selectedProyectoItem.NombrePropietario" Width="245px"></TelerikTextBox>
                </span>
            </div>
            <div class="form-group ">
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Criticidad
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.Criticidad"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Imp.Tiempo
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.ImpactoTiempos"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Imp.Calidad
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.ImpactoCalidad"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Imp.Informes
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.ImpactoInformes"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Imp.Seguridad
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.ImpactoSeguridad"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Imp.Costes
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.ImpactoCostes"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Imp.Ingresos
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.ImpactoIngresos"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Imp.Imagen
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.ImpactoImagen"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Imp.Sostenib.
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.ImpactoSostenibilidad"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Gest.Cambio
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.GestionDelCambio"></TelerikNumericTextBox>
                </span>
            </div>
            <div class="form-group ">
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Riesgo
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.Riesgo"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Desc.Riesgo
                    </label>
                    <InputTextArea Class="k-i-textarea ancho_texto_400" @bind-Value="selectedProyectoItem.DescRiesgo"></InputTextArea>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Oportunidad
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Class="ancho_selector_peso_95" @bind-Value="selectedProyectoItem.Oportunidad"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Desc.Oportunidad
                    </label>
                    <InputTextArea Class="k-i-textarea ancho_texto_400" @bind-Value="selectedProyectoItem.DescOportunidad"></InputTextArea>
                </span>
            </div>
            <div class="form-group">
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        F.Petición
                    </label>
                    <TelerikDatePicker Format="dd/MM/yyyy" Width="115px" @bind-Value="selectedProyectoItem.FechaPeticion"></TelerikDatePicker>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        F.Necesidad
                    </label>
                    <TelerikDatePicker Format="dd/MM/yyyy" Width="115px" @bind-Value="selectedProyectoItem.FechaNecesidad"></TelerikDatePicker>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        F.Inicio
                    </label>
                    <TelerikDatePicker Format="dd/MM/yyyy" Width="115px" @bind-Value="selectedProyectoItem.FechaInicio"></TelerikDatePicker>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        F.Producción
                    </label>
                    <TelerikDatePicker Format="dd/MM/yyyy" Width="115px" @bind-Value="selectedProyectoItem.FechaProduccion"></TelerikDatePicker>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        F.Cierre
                    </label>
                    <TelerikDatePicker Format="dd/MM/yyyy" Width="115px" @bind-Value="selectedProyectoItem.FechaCierre"></TelerikDatePicker>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Coste Est.
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Width="120px" @bind-Value="selectedProyectoItem.CosteEstimado"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Ingresos Est.
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Width="120px" @bind-Value="selectedProyectoItem.RetornoIngresosEstimado"></TelerikNumericTextBox>
                </span>
                <span class="k-textbox-container telerik-blazor ancho_span_libre">
                    <label class="k-label">
                        Puntuación Total
                    </label>
                    <TelerikNumericTextBox Decimals="0" Format="#" Width="115px" @bind-Value="selectedProyectoItem.PuntuacionTotal"></TelerikNumericTextBox>
                </span>
            </div>

            <div class="form-group">
                <div>
                    <TelerikButton Icon="save" Class="k-primary" OnClick="@EdicionGrabar">Grabar</TelerikButton>
                    <TelerikButton Icon="cancel" OnClick="@EdicionCancelar">Cancelar</TelerikButton>
                </div>
            </div>
        </EditForm>
    </WindowContent>
</TelerikWindow>

@code {

    public ProyectoItem originalProyectoItem { get; set; }
    public ProyectoItem selectedProyectoItem { get; set; }

    public ProyectoItem CurrentlyEditedProyectoItem { get; set; }

    //private ObservableCollection<ProyectoItem> proyectos;
    private List<ProyectoItem> proyectos;

    private List<AmbitoItem> ambitos;
    private List<EstadoItem> estados;
    private List<DepartamentoItem> departamentos;


    void LimpiarSelection()
    {
        originalProyectoItem = selectedProyectoItem = null;
    }

    public async Task EdicionGrabar()
    {
        if (originalProyectoItem == null)
        {
            await InsertarGrabar();
        }
        else
        {
            EstablecerProyectoItem(originalProyectoItem, selectedProyectoItem);
            await servicioProyecto.PutProyectoItem(originalProyectoItem);
            LimpiarSelection();
            this.StateHasChanged();
        }
    }

    public async Task InsertarGrabar()
    {
        selectedProyectoItem = CrearProyectoItem(selectedProyectoItem);
        await servicioProyecto.PostProyectoItem(selectedProyectoItem);
        await AddColeccion();
        LimpiarSelection();
    }

    public void EdicionCancelar()
    {
        LimpiarSelection();
    }

    void AnadirProyectoItem()
    {
        selectedProyectoItem = new ProyectoItem();

    }
    void SeleccionarProyectoItem(ProyectoItem p)
    {
        if (p != null)
        {
            originalProyectoItem = p;
            selectedProyectoItem = new ProyectoItem();
            EstablecerProyectoItem(selectedProyectoItem, p);
        }
        else
        {
            LimpiarSelection();
        }
        this.StateHasChanged();
    }


    protected override async Task OnInitializedAsync()
    {
        //proyectos = new ObservableCollection<ProyectoItem>(await servicioProyecto.GetProyectoItems());
        proyectos = await servicioProyecto.GetProyectoItems();
        ambitos = (await servicioAmbito.GetAmbitoItems()).OrderBy(o => o.Nombre).ToList();
        //await RellenarAmbitos();
        estados = (await servicioEstado.GetEstadoItems()).OrderBy(o => o.Nombre).ToList(); ;
        departamentos = (await servicioDepartamento.GetDepartamentoItems()).OrderBy(o => o.Nombre).ToList();
    }


    private ProyectoItem EstablecerProyectoItem(ProyectoItem original, ProyectoItem nuevo)
    {
        original.Ambito = (from a in ambitos where a.AmbitoItemID == nuevo.AmbitoID select a).FirstOrDefault<AmbitoItem>();
        original.Estado = (from e in estados where e.EstadoItemID == nuevo.EstadoID select e).FirstOrDefault<EstadoItem>();
        original.Propietario = (from d in departamentos where d.DepartamentoItemID == nuevo.PropietarioID select d).FirstOrDefault<DepartamentoItem>();
        if (nuevo.AmbitoID == -1)
        {
            original.AmbitoID = null;
            original.Ambito = null;
        }
        else
        {
            original.AmbitoID = nuevo.AmbitoID;
        }
        if (nuevo.EstadoID == -1)
        {
            original.EstadoID = null;
            original.Estado = null;
        }
        else
        {
            original.EstadoID = nuevo.EstadoID;
        }
        if (nuevo.PropietarioID == -1)
        {
            original.PropietarioID = null;
            original.Propietario = null;
        }
        else
        {
            original.PropietarioID = nuevo.PropietarioID;
        }

        original.Nombre = nuevo.Nombre;
        original.Descripcion = nuevo.Descripcion;
        original.CosteEstimado = nuevo.CosteEstimado;
        original.Criticidad = nuevo.Criticidad;
        original.DescOportunidad = nuevo.DescOportunidad;
        original.DescRiesgo = nuevo.DescRiesgo;
        original.EsEstrategico = nuevo.EsEstrategico;
        original.FechaCierre = nuevo.FechaCierre;
        original.FechaInicio = nuevo.FechaInicio;
        original.FechaNecesidad = nuevo.FechaNecesidad;
        original.FechaPeticion = nuevo.FechaPeticion;
        original.FechaProduccion = nuevo.FechaProduccion;
        original.GestionDelCambio = nuevo.GestionDelCambio;
        original.ImpactoCalidad = nuevo.ImpactoCalidad;
        original.ImpactoCostes = nuevo.ImpactoCostes;
        original.ImpactoImagen = nuevo.ImpactoImagen;
        original.ImpactoInformes = nuevo.ImpactoInformes;
        original.ImpactoIngresos = nuevo.ImpactoIngresos;
        original.ImpactoSeguridad = nuevo.ImpactoSeguridad;
        original.ImpactoSostenibilidad = nuevo.ImpactoSostenibilidad;
        original.ImpactoTiempos = nuevo.ImpactoTiempos;
        original.Mejoras = nuevo.Mejoras;
        original.NombrePropietario = nuevo.NombrePropietario;
        original.Objetivo = nuevo.Objetivo;
        original.Oportunidad = nuevo.Oportunidad;
        original.Prioridad = nuevo.Prioridad;
        original.PuntuacionTotal = nuevo.PuntuacionTotal;
        original.RetornoIngresosEstimado = nuevo.RetornoIngresosEstimado;
        original.Riesgo = nuevo.Riesgo;
        return original;
    }



    public async Task UpdateHandler(GridCommandEventArgs args)
    {
        args.IsCancelled = false;
        args.IsNew = false;
        ProyectoItem item = (ProyectoItem)args.Item;

        var proy = (from p in proyectos where p.ProyectoItemID == item.ProyectoItemID select p).FirstOrDefault<ProyectoItem>();

        if (proy != null)
        {
            EstablecerProyectoItem(proy, item);
        }
        ////perform actual data source operations here
        await servicioProyecto.PutProyectoItem(proy);

        ////var index = proyectos.FindIndex(i => i.ProyectoItemID == item.ProyectoItemID);

    }

    // para borrar con confirmacion
    ProyectoItem ItemToDelete;
    void DeleteWithConfirmation(GridCommandEventArgs args)
    {
        args.IsCancelled = true;//prevent the built-in delete operation from firing
        ItemToDelete = args.Item as ProyectoItem;
    }

    async void DeleteCallback()
    {
        if (ItemToDelete != null)
        {

            await CustomDelete(ItemToDelete);
        }
    }
    public async Task CustomDelete(ProyectoItem item)
    {
        //perform actual data source operation here
        ProyectoItem p = item;
        ItemToDelete = null;

        await servicioProyecto.DeleteProyectoItem(p);
        await RellenarColeccion();
    }

    private async Task RellenarColeccion()
    {
        List<ProyectoItem> lista = await servicioProyecto.GetProyectoItems();
        this.proyectos = null;
        this.StateHasChanged(); // to let the ui reevaluate
        await Task.Delay(10);
        this.proyectos = lista; // reassign your data
        this.StateHasChanged(); // to let the ui reevaluate
    }

    private async Task AddColeccion()
    {
        List<ProyectoItem> lista = await servicioProyecto.GetProyectoItems();
        this.proyectos = lista; // reassign your data
    }

    private ProyectoItem CrearProyectoItem(ProyectoItem p)
    {
        if (p.AmbitoID == -1)
        {
            p.AmbitoID = null;
        }
        if (p.EstadoID == -1)
        {
            p.EstadoID = null;
        }
        if (p.PropietarioID == -1)
        {
            p.PropietarioID = null;
        }
        return p;
    }
    public async Task CreateHandler(GridCommandEventArgs args)
    {

        ProyectoItem item = (ProyectoItem)args.Item;

        item = CrearProyectoItem(item);
        //perform actual data source operation here
        await servicioProyecto.PostProyectoItem(item);
        await AddColeccion();
    }

    public async Task CancelHandler(GridCommandEventArgs args)
    {
        ProyectoItem item = (ProyectoItem)args.Item;
    }

    private async Task RefrescarGrid()
    {
        var tmp = this.proyectos; // save for later
        this.proyectos = null; // set to something else -> null
        this.StateHasChanged(); // to let the ui reevaluate
        await Task.Delay(10);
        this.proyectos = tmp; // reassign your data
        this.StateHasChanged(); // to let the ui reevaluate
    }
}

I would like to call a function every time the window closes. No matter how the close was triggered.

<TelerikWindow Width="900px" Height="fit-content" Centered="true" Visible="@(Details.BaseData.Id > 0)" Modal="true" CloseOnOverlayClick="true">
    <WindowTitle>
        <strong>@Title</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" OnClick="OnFormClosed"/>
    </WindowActions>

Hello, we have and app with different dashboards that contains charts, counters, labels, etc and i have to questions

1. How can we render these dashboards and export to pdf, html, or other format to send by email? we have also telerik reporting for some grids reports but we dont want to code again the reports in telerik reporting with different components and format, we would like to reuse the same blazor dashboard and charts and components we already have in ui.

2. How can we create dynamic dashboard where user can enable or disabled widgets and configure their own dashboards, add or hide widgets and the page is reconfigured, is there any component for this or planned in roadmap?

Hi how can I make a graph like this one?

What I have now

<TelerikChart>
            <ChartTitle Text="Prices"></ChartTitle>
            <ChartTooltip Visible="true"></ChartTooltip>
            <ChartLegend Position="ChartLegendPosition.Bottom"/>
            <ChartSeriesItems>
                <ChartSeries Type="ChartSeriesType.Line"
                             Name="Prices"
                             Data="@Details.PriceGraphs"
                             DashType="@DashType.Solid"
                             XField="@nameof(InstrumentPriceGraph.UpdateDate)"
                             Field="@nameof(InstrumentPriceGraph.Price)">
                </ChartSeries>
            </ChartSeriesItems>
        </TelerikChart>

Model

public class InstrumentPriceGraph
{
    public string CiInstrument { get; set; }
    public DateTime UpdateDate { get; set; }
    public decimal Price { get; set; }
}

I use a custom dialog to edit the appointment.

The appoinment.Start date and the OnEdit(SchedulerEditEventArgs) always show the start of the series, not the date of the instance I opened.

Hello,

How can we export multiple telerikgrids to the same excel file ? When using the built-in export it's easy to get one file per grid, but is there any way (maybe using the MemoryStream) to merge those files together into one file with multiple worksheets ?

Hi,

In reference to the "Custom Filter Row Template" example (https://docs.telerik.com/blazor-ui/components/grid/templates/filter#filter-row-template) I've found following issue:

Every time when the function "SetupFilterRule()" is called the FilterDescriptorCollections contains only "theFilterContext.FilterDescriptor.FilterDescriptors[0]". Even when "filter2" is added to the collection... the next time the function is called the collection contains only filter1.

Is there any way to keep added filters in the collection?

Best regards,

Rayko

The DayTemplate migt be difficult, because the component could be depending on the rendered tags and attributes.

But a OnRender event that supplies the date and allows me to add a specific class would at least give me CSS styling possibilities.