I have a Vertical Splitter pane that will not resize until I first collapse it and then expand it.  

I am getting an error in the browser when I first try to re-size it.

telerik-blazor.js:63 Uncaught TypeError: Cannot read properties of undefined (reading 'min')
    at e.value (telerik-blazor.js:63)
    at e.value (telerik-blazor.js:63)
    at e.value (telerik-blazor.js:63)
    at e.value (telerik-blazor.js:63)
    at Object.i.onResizableResize [as resize] (telerik-blazor.js:63)
    at e.value (telerik-blazor.js:1)
    at e.value (telerik-blazor.js:49)
    at Object.i.onDraggableDrag [as drag] (telerik-blazor.js:49)
    at e.value (telerik-blazor.js:1)
    at e.value (telerik-blazor.js:3)

Here is the markup of the Splitter:

 <TelerikSplitter Orientation="SplitterOrientation.Vertical" Height="100%" Class="accountWorkscopeSplitter">
                <SplitterPanes>
                    <SplitterPane Class="scrollablePane">
                        <LeftNav WorkspaceId="@WorkspaceId.Value" NavigationWorkspace="Account" OnNavItemSelected="NavItemSelected" />
                    </SplitterPane>
                    @if (showExpenditureCenter || showRevenueCenter)
                    {
                        <SplitterPane Collapsible="true" Resizable="true" Size="50%" Max="50%" Class="scrollablePane">
                            @if (showExpenditureCenter)
                            {
                                <div id="ExpenditureCenterDiv">
                                    <AccountCenter Type="AccountType.Expenditures"></AccountCenter>
                                </div>
                            }
                            @if (showRevenueCenter)
                            {
                                <div id="RevenueCenterDiv">
                                    <AccountCenter Type="AccountType.Revenues"></AccountCenter>
                                </div>
                            }
                        </SplitterPane>
                    }
                </SplitterPanes>
            </TelerikSplitter>

Hello, I've just started using the TelerikMultiSelect for the first time and it's working well, except I can't change the font size of the list of selected items. I've applied Class="MyStyle" which defines a font-size value, but it has no effect. The attached image shows the selected items with font-size 14px that I can't override and they are smaller than the surrounding elements.

Inspecting the source I can see a nest of k-xxx styles which I tried overriding as an experiment, but nothing has any effect.

Thanks, Greg

Hi,

While developing my app, I have a grid and I'd like to run the TelerikLoader while loading page or data...

I follow the example (I.E: https://demos.telerik.com/blazor-ui/grid/loading-animation)

but when I add the code, the VS2002 compiler says:

"The name 'ThemeConstants' does not exist in the current context "

I try to add the full namespace: Telerik.Blazor.ThemeConstants and it's still the same....

does anyone has a clue.

How can I set the start value on the Y axis? The max value always look right

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; }
}