Telerik Forums
UI for Blazor Forum
0 answers
2 views
Hello.
I have changed almost all the variables in the theme builder but I have not been successful so I ask: what is the Sass variable to change the color of the buttons of the components in the ThemeBuilder?


Twain
Top achievements
Rank 2
Iron
Iron
Iron
 updated question on 29 May 2024
0 answers
7 views

Hello,

We are using the PDF viewer to display a report that we made with Telerik Reporting.

When we display it on the screen, everything work great, the format is correct (landscape) and the margin are correct (custom margin)

When we click on the print button (made with <PdfViewerToolBarPrintTool />), the preview window show our report in "portrait" and with "default margin". Because of that, our report take 5 pages instead of 2. If we manually change the settings to "landscape" and "no margin" in the print preview, the print is correct.

Is there a way to change that ? Change the default page orientation and the default margin so that our client doesn't have to do it themselve?

We tried using the new release from may 2024 (blazor 6.0), the quality of the print went up, but I dont see any option which would let me do that.

Thank you
David

David
Top achievements
Rank 1
Iron
 asked on 29 May 2024
1 answer
8 views

What could cause this appearance?

 

Background: I'm upgrading a Blazor Server site from .NET Core 3.1 and Bootstrap 4 to .NET 8 and Bootstrap 5.  Upgraded the Telerik Blazor nuget package and regenerated the CSS file using ThemeBuilder.

Razor markup is:

        <TelerikDropDownList TextField="Key" ValueField="Value" Data="@Sizes" @bind-Value="@Size" Width="150px"><DropDownListSettings><DropDownListPopupSettings Height="auto"></DropDownListPopupSettings></DropDownListSettings></TelerikDropDownList>

The shift starts if the viewport is greater than 1500px in width.  If it's 1500px or less I see:

<div class="k-animation-container telerik-blazor" data-id="d53dbb0d-7b8c-49d1-bb05-a173229fa149" role="region" aria-label="Options list" id="7b6577ed-d3c0-4d2c-b473-0ea9fa03f32d" dir="ltr" style="height: auto; left: 12px; top: 99px; width: 150px; z-index: 10002; display: none;">

1600px shows:

<div class="k-animation-container telerik-blazor k-animation-container-shown" data-id="d53dbb0d-7b8c-49d1-bb05-a173229fa149" role="region" aria-label="Options list" id="7b6577ed-d3c0-4d2c-b473-0ea9fa03f32d" dir="ltr" style="height: auto; left: 56px; top: 99px; width: 150px; z-index: 10002;">

The inline left property increases in value as the viewport increases in width.

Nansi
Telerik team
 answered on 29 May 2024
1 answer
7 views

Hi, I'm not adding a ChartLegend element to a pie chart, but the legend is still showing up to the right of the pie chart? How can I remove the legend entirely from the Pie chart?

 

See here for demo: https://blazorrepl.telerik.com/cSupwSbA500BPvKK06

 

Tsvetomir
Telerik team
 answered on 29 May 2024
1 answer
4 views
How can the font size used in Chart Labels and Legends be set? I don't see any configuration for that, and overriding the CSS has no effect on the SVG generated for the charts.
Tsvetomir
Telerik team
 answered on 29 May 2024
1 answer
9 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
8 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
2 answers
17 views

Issue: The chart SVG or canvas suddenly disappears.

Reproduction of the Problem

Use the Blazor UI from Telerik trial version.
Perform actions such as hiding the chart line or adding values.

Current Behavior

At seemingly random intervals, the chart SVG or canvas disappears. This occurs when performing actions like hiding the chart line or adding values. The issue does not occur consistently or under obvious conditions.

Expected/Desired Behavior

The chart should behave as expected and not disappear unexpectedly.

Environment

  • Telerik UI for Blazor version: 5.1.1 (Trial)
  • Browser: All
  • App Type: Server

 

Video: https://www.veed.io/view/7782882d-6522-4fa6-a9df-8413695486ed?panel=share


<div style="width: 1100px; height: 500px;" class="graphBorder shadow">
    <TelerikChart Height="95%" Transitions="false">   
        <ChartSeriesItems>
            @foreach(var item in ChartData)
            {
                <ChartSeries
                    Visible="@item.ShowLine"
                    Style="ChartSeriesStyle.Smooth"
                    Type="ChartSeriesType.ScatterLine"
                    Name="@item.LineName" Data="@item.Data"
                    Color="@item.Color"
                    XField="@nameof(Data.X)" YField="@nameof(Data.Y)">
                    <ChartSeriesMarkers Size="0"/>
                    <ChartSeriesTooltip Visible="true"/>
                </ChartSeries>
            }
        </ChartSeriesItems>

        <ChartTitle Text="TestChart"></ChartTitle>

        <ChartXAxes>
            <ChartXAxis Type="date"
                        BaseUnit="minutes"
                        MajorUnit="30"
                        Min="@(new TimeOnly(0,0,0))"
                        Max="@(new TimeOnly(3,0,0))">
                <ChartXAxisTitle Text="TestChart"></ChartXAxisTitle>
                <ChartXAxisLabels Format="{0:HH:mm}"></ChartXAxisLabels>
            </ChartXAxis>
        </ChartXAxes>

        <ChartYAxes >
            <ChartYAxis Max="@(100 + 5)" Min="0" MajorUnit="10">
                <ChartYAxisLabels/>
                <ChartYAxisTitle Text="TestChart"></ChartYAxisTitle>
            </ChartYAxis>
        </ChartYAxes>

        <ChartLegend Visible="false"/>

    </TelerikChart>
     <div class="Legend d-flex justify-content-sm-around flex-row">
            @foreach(var item in ChartData)
            {
                <div>
                    <TelerikCheckBox Id="myCheckBox" @bind-Value="@item.ShowLine"/>
                    <label for="myCheckBox">@item.LineName</label>
                </div>
            }
        </div>
</div>

@code {
    public List<GraphData> ChartData = new()
    {
        new GraphData
        {
            LineName = "Stroom 1",
            ShowLine = true,
            Color = "green",
            MinDate = new TimeOnly(0, 0),
            TimeBetweenMinAndMax = new TimeSpan(4, 0, 0),
            Data = new List<Data>
            {
                new() { X = new TimeOnly(0, 0), Y = 10 },
                new() { X = new TimeOnly(0, 15), Y = 20 },
                new() { X = new TimeOnly(0, 30), Y = 12 },
                new() { X = new TimeOnly(0, 45), Y = 3 },
                new() { X = new TimeOnly(1, 0), Y = 10 },
                new() { X = new TimeOnly(1, 15), Y = 12 },
                new() { X = new TimeOnly(1, 30), Y = 14 },
                new() { X = new TimeOnly(1, 45), Y = 15 },
                new() { X = new TimeOnly(2, 0), Y = 16 },
                new() { X = new TimeOnly(2, 15), Y = 40 }
            }
        }
    };
}

Nansi
Telerik team
 answered on 28 May 2024
1 answer
7 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
8 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
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?