Is there a way I can replace the checkbox with button for the selection of the row in the grid?

Blazor DataGrid Demos - CheckBox Only Selection | Telerik UI for Blazor

Hi,

I am using the TelerikMenu Blazor component and I am trying to change the background color of the submenu items when being hovered over.  I can successfully change the hover colors for the top-level menus but not the submenus.  When I am running the app, I can go into developer tools and write the css to change the submenu background when being hovered over, but when I try that same css in my page css file, only the top-level menu items are affected (meaning the hover affect only happens to the top-level menu),  I have attached a picture of the submenu with a background color change on hover via Developer Tools.

I am probably missing a hierarchy level in the css - any assistance is appreciated.

Thanks,

Mike

Menu creation tag:

<nav class="navbar navbar-dark navbar py-md-0" id="navbar-custom-style"> 
    <span class=" k-link  k-menu-link">
        <TelerikMenu Data="MenuItems" UrlField="@nameof(MenuItem.Page)" Orientation="MenuOrientation.Horizontal" Class="centered-menu">

        </TelerikMenu>

   </span>
</nav>

Menu creation code:

  public List<MenuItem> MenuItems { get; set; }

        protected override async Task OnInitializedAsync()
        {
            List<MenuItem> menuItems = new List<MenuItem>()
            {
                new MenuItem { Text = "Home", Page = "/", IconClass="oi oi-home" },
                new MenuItem { Text = "Application Health", Items = new List<MenuItem>()
                    {
                        new MenuItem { Text = "Counter", Page = "/counter" },
                        new MenuItem { Text = "Batch Review", Page = "/batchreview", IconClass="oi oi-bar-chart" },
                        new MenuItem { Text = "Closed Items", Page = "" },
                    }, IconClass="oi oi-heart" },
                new MenuItem { Text = "Fetch Data", Page = "/fetchdata", IconClass="oi oi-rich" },
            };
            MenuItems = menuItems;
        }          

Menu CSS (only affects top level menus):

::deep .centered-menu.k-menu .k-item {
    color: white;
    font-weight: bold;
    background: #007DBC;
    padding: 0;
}

::deep .k-item.k-menu-item:hover {
    color: whitesmoke;
    background-color: #0b6fa4;
}

When I add this to my page css from the dev tools (which only affected the sub-menus), only the top menu items are affected:

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