Telerik Forums
UI for Blazor Forum
1 answer
126 views

These three questions may seem simple, but for some reason I have not been able to find how to style the context menu nor have I been able to achieve this through css:

1. How can I remove the "border" around the top-most context menu item (in attached pic1, the 'Filter by value' item)

2. How can I change the "reddish" hover color to a color of my choosing? (in attached pic1, the background of 'Open faceplate' item)

3. How can I change the "red" background selection color to a color of my choosing? (in attached pic2, the background of 'Open faceplate' item)

Much thanks

Marcin
Top achievements
Rank 1
Iron
Iron
 answered on 28 May 2024
1 answer
192 views

I have a GridCommandButton with a custom action.

If I click directly on the button, the select row is not set. How can I get the content of the row when I click the button?

<GridCommandButton Command="SyncWithAD" Icon="@FontIcon.Lock" Title="Sync to Azure" Enabled="CanEdit" OnClick="@ShowSyncUserWithAdDialog"></GridCommandButton>

Use the GridCommandEventArgs.Item

private async Task ShowSyncUserWithAdDialog(GridCommandEventArgs args)
    {
        if(args.Item is not JasminExternalUser user) return;
        
        Progress.Visible = true;
        var props = new JasminUserAdProperties { Email = user.Email, Name = user.Name, Groups = [] };
        AdProperties = await UserService.GetUserAdProperties(props);
        Progress.Visible = false;
    }

Nansi
Telerik team
 answered on 28 May 2024
1 answer
79 views

Hi, I have a object with a collection that I want to bind to checkboxes.

public class JasminUserAdProperties()
{
[Required]
public string Email { get; set; }
[Required]
public string Name { get; set; }

/// <summary>
/// Used for checkboxes
/// </summary>
public List<AdGroupDto> Groups { get; set; } = [];
}

And this is the form / component

@using Zeus.Shared.DTO

<TelerikWindow Width="450px" Centered="true" Visible="@(AdProperties != null)" Modal="true">
<WindowTitle>
<strong>Set Jasmin roles</strong>
</WindowTitle>
<WindowActions>
<WindowAction Name="Close" OnClick="@CancelUpdateJasminRoles"/>
</WindowActions>
<WindowContent>
<TelerikForm Model="@AdProperties" OnValidSubmit="@UpdateJasminRoles">
<FormValidation>
<DataAnnotationsValidator/>
</FormValidation>
<FormItems>
@{
<FormItem>
<Template>
<label for="selectAllCheckbox">Selected All</label>
<TelerikCheckBox Id="selectAllCheckbox"
Value="@SelectAllValue"
ValueChanged="@((bool value) => ValueChanged(value))"
Indeterminate="@SelectAllIndeterminate"/>
</Template>
</FormItem>
foreach (var group in AdProperties.Groups.OrderBy(g => g.Name))
{
<FormItem>
<Template>
<label for="@group.Id">@group.Name</label>
<TelerikCheckBox @bind-Value="@group.Selected" Id="@group.Id" Name="@group.Id"/>
</Template>
</FormItem>
}
}

</FormItems>
<FormButtons>
<TelerikButton Enabled="@CanEdit" ButtonType="ButtonType.Submit" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Save</TelerikButton>
<TelerikButton OnClick="@CancelUpdateJasminRoles">Cancel</TelerikButton>
</FormButtons>
</TelerikForm>
</WindowContent>
</TelerikWindow>

@code {

[Parameter] public EventCallback<JasminUserAdProperties> UpdateRoles { get; set; }

[Parameter] public EventCallback CancelUpdateRoles { get; set; }


[Parameter] public JasminUserAdProperties AdProperties { get; set; }

[Parameter] public bool CanEdit { get; set; }


private bool SelectAllValue => AdProperties.Groups.All(eq => eq.Selected);
private bool SelectAllIndeterminate => AdProperties.Groups.Any(eq => eq.Selected);

private void ValueChanged(bool value)
{
AdProperties.Groups.ForEach(eq => { eq.Selected = value; });
}

private void CancelUpdateJasminRoles()
{
if (CancelUpdateRoles.HasDelegate)
{
CancelUpdateRoles.InvokeAsync();
}
}

private void UpdateJasminRoles()
{
if (UpdateRoles.HasDelegate)
{
UpdateRoles.InvokeAsync(AdProperties);
}
}

}

I am getting this error(s) in spades.

blazor.webassembly.js:1  crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.TelerikCheckBox`1[[System.Boolean, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'Name'.
System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikCheckBox`1[[System.Boolean, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'Name'.
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName)
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)
   at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target)
   at Telerik.Blazor.Components.Common.TelerikInputBase`1[[System.Boolean, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].SetParametersAsync(ParameterView parameters)
   at Telerik.Blazor.Components.TelerikCheckBox`1[[System.Boolean, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].SetParametersAsync(ParameterView parameters)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)


Have been looking at Bind to nested (navigation) properties in complex objects but its not for lists.

What am I doing wrong?

 

 

 

 

 

 

Nadezhda Tacheva
Telerik team
 answered on 27 May 2024
1 answer
95 views

I have a custom component which takes RenderFragment and displays it as ChildContent. I'm passing TelerikForm for ChildContent and getting such error: Unhandled exception rendering component: Specified cast is not valid.

 

Here's the custom component:

<div class="gg_wizard_step @(IndexInParent != ParentSection.CurrentStep ? "hidden" : "")">
    <CascadingValue Value="this">
        @ChildContent
    </CascadingValue>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [CascadingParameter]
    public NLWizardSection ParentSection { get; set; }

    [Parameter]
    public int IndexInParent { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        ParentSection.AddChild(this);
    }
}

 

Here's the form added to custom component:

<NLWizardStep>
                <h3>@L["What is the name of your resource?"]</h3>
                <TelerikForm Model="@((NameForm)_currentForm)"
                             @ref="NameFormRef"
                             ValidationMessageType="FormValidationMessageType.Inline">
                    <FormValidation>
                        <DataAnnotationsValidator></DataAnnotationsValidator>
                        <CustomValidation></CustomValidation>
                    </FormValidation>
                    <FormItems>
                        <FormItem Field="@nameof(NameForm.Name)"></FormItem>
                    </FormItems>
                    <FormButtons></FormButtons>
                </TelerikForm>
</NLWizardStep>

Nadezhda Tacheva
Telerik team
 answered on 27 May 2024
1 answer
86 views

Hi

I want to know. What is control over javascript when you use Blazor.

If I create web application on blazor in 2024 and after few years is blazor generate new javascript version.is there any browser combability ?

Is Blazor generate new javascript version ?

 

king regards,

Manish

 

 

Nansi
Telerik team
 answered on 27 May 2024
0 answers
111 views

DELETE THIS, DUMP QUESTION 😊

 

I have set render mode globally in App.razor

<Routes @rendermode="InteractiveServer" />
<!DOCTYPE html>
<html lang="en">

After I have done that, I get this error

InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
Microsoft.EntityFrameworkCore.Infrastructure.Internal.ConcurrencyDetector.EnterCriticalSection()
Microsoft.EntityFrameworkCore.Query.Internal.SingleQueryingEnumerable<T>+AsyncEnumerator.MoveNextAsync()
System.Runtime.CompilerServices.ConfiguredValueTaskAwaitable<TResult>+ConfiguredValueTaskAwaiter.GetResult()
Microsoft.EntityFrameworkCore.EntityFrameworkQueryableExtensions.ToListAsync<TSource>(IQueryable<TSource> source, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.EntityFrameworkQueryableExtensions.ToListAsync<TSource>(IQueryable<TSource> source, CancellationToken cancellationToken)
WhatsNew.Data.VersionRepository.GetApplicationsAsync() in VersionRepository.cs
+
    {
        _context = context;
    }
    
    public async Task<List<Applications>> GetApplicationsAsync()
    {
        return await _context.Applications.ToListAsync();
    }
    public async Task<Applications> GetApplicationByIdAsync(int id)
    {
        return await _context.Applications.FindAsync(id);
    }
WhatsNew.Server.Components.Pages.ApplicationsPage.OnInitializedAsync() in ApplicationsPage.razor.cs
+
    private List<Applications> applications = [];
    private Applications selectedApplication = new();
    private bool isEditMode;
    protected override async Task OnInitializedAsync()
    {
        applications = await VersionRepository.GetApplicationsAsync();
    }
    private void AddApplication()
    {
        selectedApplication = new Applications();
        isEditMode = true;
Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

This is how I register the repository

builder.Services.AddTransient<IVersionRepository, VersionRepository>();
So, what am I doing wrong?
 
Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
 updated question on 26 May 2024
1 answer
112 views

Hi,

https://docs.telerik.com/blazor-ui/components/grid/grouping/load-on-demand#virtual-scrolling-group-load-on-demand-and-server-side-data-operations

I've followed this example to implement grouping with loading on demand, however I'm having issues with the in line edit.

When selecting the edit button, the grid changes to show the update and cancel buttons however the value that was visible is no longer visible and instead the area becomes greyed out.

<TelerikGrid TItem="@object"
             LoadGroupsOnDemand="true"
             Groupable="false"
             OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
             OnRead="@ReadItems"
             OnUpdate="@UpdateHandler"
             OnEdit="@EditHandler"
             ScrollMode="@GridScrollMode.Virtual"
             FilterMode="@GridFilterMode.FilterRow"
             EditMode="@GridEditMode.Inline"
             PageSize="20" RowHeight="60"
             Navigable="true" Sortable="true" Height="600px" >
    <GridColumns>
        <GridColumn Field=@nameof(SiteMappingDto.SiteName) Width="220px" Title="Site" Visible="false">
            <GroupHeaderTemplate>
                <span>Site : @context.Value</span>
            </GroupHeaderTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(SiteMappingDto.TagName)" Title="Tag" Editable="false" />
        <GridColumn Field="@nameof(SiteMappingDto.TagDescription)" Title="Description" Editable="false" />
        <GridColumn Field="@nameof(SiteMappingDto.MappingValue)" Title="Value" Editable="true" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

 

Hristian Stefanov
Telerik team
 answered on 24 May 2024
3 answers
93 views
I am using a DateTime ChartSeries (ScatterLine). I would like to be able to click on the chart area at any point and get a XY position. Is there any way to do this?
Tsvetomir
Telerik team
 answered on 22 May 2024
1 answer
180 views

I'm trying to convert an existing Blazor project to use Telerik components.  Following this article Convert Project Wizard but the Telerik UI for Blazor > Convert to Telerik Application menu option doesn't show up on either the project context menu or Extensions Menu in the Solution Explorer.

VS2022 V17.9.7

The fully licensed Telerik Extensions are installed in VS2022

The project file includes the package reference  <PackageReference Include="Telerik.UI.for.Blazor" Version="6.0.0" />

How do I get the Convert Project Wizard?

Thanks

Misho
Telerik team
 updated answer on 22 May 2024
1 answer
323 views

Hi there,

Is there a way to handle  the click anywhere on TelerikCard without wrapping it with a div and handling div.onclick?

 

Regards,

Igor

Svetoslav Dimitrov
Telerik team
 answered on 22 May 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?