Questions on UI for Blazor Forum

1 answer

199 views

Set button width

How do I tell the button to fill the available width? I'd like this to be as wide as the other controls and it should adapt to width changes of the page. I have this definition:

As a bonus, the only way I can get the button to align to the bottom is to put in the white label. My attempts at aligning to the bottom have failed.

                        <TelerikCard Width="25vh">
                            <CardBody>

                                <div class="form-group-short">
                                    <label class="col-form-label">Patient Status</label><br />
                                    <TelerikDropDownList @bind-Value="@IsActiveFilterIndex"
                                                         TextField="Name" ValueField="Id"
                                                         ReadOnly="@(!IsActiveFilterEnabled)"
                                                         Data="@IsActiveFilterOptions">
                                    </TelerikDropDownList>
                                </div>
                                <div class="form-group-short align-bottom">
                                    <label class="col-form-label gsi-color-white">Apply Filter</label><br />
                                    <TelerikButton OnClick="OnFilter" Class="gsi-background-color gsi-color-white">
                                        Apply Filter
                                    </TelerikButton>
                                </div>
                            </CardBody>
                        </TelerikCard>

Button

answered on 23 May 2025

1 answer

69 views

Get stream from UploadFileInfo

I can now list my files in the upload control. Now, how do I get the stream from the collection of files? I need to have the stream in order to upload to Azure.

                foreach (UploadFileInfo file in args.Files)
                {
                    var fileName = Path.GetFileName(file.Name);

                    //await using (var fileStream = new FileStream(fileName, FileMode.Create))

Upload

answered on 23 May 2025

0 answers

25 views

Event Spamming from Controls

I have a custom grid filter where I use an animation container to show/hide. When a value changes, I want to close the animation container similar to how the filter automatically closes on your control filters (treelist). So, I have a button that toggles the filter state (ExpandCollapse). Then, when a value changes in my filter (textbox in example) I call a method that should close the filter and refresh my data. I find the OnChange event is called once a value is changed (textbox) but then also when the DatePicker closes and when the DropDownList closes and when the animation container is closed.

The result is the toggle kinda goes nuts. Its open/closed/opened at times where it shouldn't. How do I get around this?

                <div class="gsi-background-color-light" style="height: 41px; display:flex;justify-content:space-between;">

                    <div class="align-self-center gsi-font-kendo gsi-margin-0">
                        Patient Filters
                    </div>
                    <TelerikButton Id="filterChevronButton"
                                   FillMode="Clear"
                                   Class="gsi-border-width-0 gsi-border-color-white gsi-padding-8"
                                   Icon="@( FilterVisible? Telerik.SvgIcons.SvgIcon.Filter : Telerik.SvgIcons.SvgIcon.Filter)"
                                   OnClick="@(() => ExpandCollapse())" />

                </div>

                <TelerikAnimationContainer @ref="@AnimContainer"
                                           Class="gsi-background-color-light gsi-margin-5 k-rounded-0"
                                           Width="100%"
                                           Height="100vm">

                    <TelerikStackLayout Spacing="1px" Class="gsi-margin-5">
                        <TelerikCard Width="25vh">
                            <CardBody>

                                <div class="form-group-short">
                                    <label class="col-form-label" for="firstName">First Name</label><br />
                                    <TelerikTextBox @bind-Value="@FirstNameFilter"
                                                    Name="firstName"
                                                    Placeholder="-No Filter-"
                                                    OnChange="@(x => OnFilterChanged(nameof(FirstNameFilter), x))">
                                    </TelerikTextBox>
                                </div>

        private async Task OnFilterChanged(string propertyName, object newValue)
        {
            await GetPatients();
            ExpandCollapse(false);
        }

I tried to compare the existing value with the new value after removing the binding but, no success.

        private async Task OnFilterChanged(string propertyName, object newValue)
        {
            object existingValue = this.GetPropertyValue(propertyName);
            if (newValue != existingValue)
            {
                this.SetPropertyValue(propertyName, newValue);

                await GetPatients();
                ExpandCollapse(false);
            }
        }

Toggle

    public async void ExpandCollapse(bool? filterVisible = null)
    {
        if (filterVisible.HasValue)
        {
            await AnimContainer.ToggleAsync();
            FilterVisible = filterVisible.Value;
        }
        else
        {
            await AnimContainer.ToggleAsync();
            FilterVisible = !FilterVisible;
        }
    }

asked on 22 May 2025

1 answer

28 views

Drag and Drop tooltip on Datagrid with a dictionary TItem

Hi.

I've got a TelerikGrid set up to use aTItem of Dictionary<string, int> (for example). I'm having an issue with the tooltip when I perform a row drag and drop in that the value shown is "null". I've attached a stripped down example of this, and its equivalent of where the Dictionary has been replaced with a class. We can't go down that route though as the data is dynamic in structure when supplied to the grid.

Any help appreciated.

Grid

answered on 22 May 2025

0 answers

38 views

Tab strip tab (and grid column header) remove mouseover / hover effect

On both the Tab strip selected tab and the grid header, there's a mouseover / hover effect which thickens the bottom border by 1px;

Standard;

Hover;

I've been trying to remove this effect (largely since it causes a height change), but not having any luck identifying the right CSS classes to modify. I still want the selected tab to be highlighted, and if possible to remove the mouseover on unselected tabs - this gives the bottom a thin border with the same height problem.

Any help greatly received!

Grid

TabStrip

updated question on 22 May 2025

1 answer

45 views

More details on Release History?

Hi I was wondering if it's possible to find more details on exactly what is changed in each release? In general the list in Release History is very generic and does not necessarily mention what method or API, etc. changed. Competing products will display links to issues or work items included, or at least more details about what code changes were made. And the lists are comprehensive.

For instance, in v9 demos, there is a NEW badge on the Grid -> Export, though exporting has been there for awhile. Reading Release History alludes to:

Add configuration for CSV export API
Add configuration for Excel export API

but that doesn't really tell me what is changed or available now. Looking at the docs nothing seems radically new.

Details like that are critical in an enterprise environment when evaluating new features or breaking changes, or to just keep up with what's changing. And if I'm just missing this info somewhere, let me know.

General Discussions

answered on 21 May 2025

1 answer

90 views

Window Breaking Change to Remove Centered Option

Why did you remove the centered option in the window in place of Top and Left positions in 9.0.0?! The programmer will now have to manually figure out the top/left corner location based on the browser size and the size of the window. I have 20+ of your window controls and all of them are skewed out of the browser window when I set them to 50%, 50%. This makes centering of a window a completely manual process and VERY difficult.

Window

answered on 21 May 2025

1 answer

72 views

Nuget feed timeout

Hello,

I'm getting several time out messages while trying to restore nuget packages from a Azure Pipeline.

Is there any running issue with the Nuget servers?

BR,

Vitor Linares

General Discussions

answered on 21 May 2025

2 answers

46 views

Changing Notification size isn't working?

In my _Host.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <component type="typeof(ApplicationInsightsInit)" render-mode="ServerPrerendered" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css?@telerikUiForBlazorVersion" rel="stylesheet" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-font-icons/font-icons.css" rel="stylesheet" />
    <link href="lib/fontawesome/css/all.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet" />

In my Site.css

.TelerikNotification .k-notification-container .k-notification {
    width: 300px;
    height: 50px;
    font-size: 1.5em;
    text-align: center;
}

.wide-notification-center .k-notification {
    width: 750px;
    height: 70px;
    font-size: 1.5em;
    text-align: center;
}

Blazor Page

<TelerikNotification @ref="@NotificationRefWide" Class="wide-notification-center" HorizontalPosition="@NotificationHorizontalPosition.Center" AnimationDuration="3000"></TelerikNotification>

C# page code (server side)

public TelerikNotification NotificationRefWide { get; set; }



                    NotificationRefWide.Show(new NotificationModel()
                    {
                        Text = "Warning: " + message,
                        ThemeColor = ThemeConstants.Notification.ThemeColor.Warning,
                        Closable = true,
                        CloseAfter = duration,
                        Icon = FontIcon.WarningTriangle,
                        ShowIcon = true
                    });

Any changes I make in the Site.css have ZERO impact on the display of the notification (see attached image). In fact, I can remove the class definitions from CSS and still get the same results. It's as if Telerik Notification is completely ignoring the class reference?

Any suggestions?

Rob.

Notification

answered on 21 May 2025

1 answer

50 views

TelerikChart X-Axis Misinterprets Double Values as Categories in Blazor

Hello,

I'm having trouble configuring a TelerikChart in Blazor to properly display a column series and a line series side-by-side on the same chart.

My goal is to have the X-axis (CategoryAxis) reflect double values (e.g. 0, 5, 10, 15...) so that both series are aligned and spaced proportionally based on their actual numeric X values.

However, what I'm observing is that the X-axis seems to treat these values as categories or strings, not real numbers. This results in incorrect spacing and ordering.

What's going wrong:

The columns are not placed in the correct positions on the X-axis — for instance, a column with X = 6 appears at the far end if 6 doesn't also exist in the line series.

The values on the X-axis are not sorted numerically — so the spacing between, say, 5 and 10 is the same as between 10 and 1024, which breaks the scale.

Ideally, I want the chart to understand that X = 1024 is far from X = 50, and space it accordingly on a continuous numeric scale.

You can see the visual chart below:

The code for the chart:

@page "/test"
@using ChartLegendPosition=Telerik.Blazor.ChartLegendPosition
@using ChartSeriesType=Telerik.Blazor.ChartSeriesType
<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="Normal Distribution" Data="@series2Data" Field="Y" CategoryField="X" CategoryAxis="Category" Axis="Value" Style="@ChartSeriesStyle.Smooth" Color="blue">
            <ChartSeriesMarkers Visible="false"/>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column" Name="Histogram" Field="Y" CategoryField="X" CategoryAxis="Category" Axis="Value2" Data="@series1Data">
        </ChartSeries>
    </ChartSeriesItems>
    
    <ChartValueAxes>
        <ChartValueAxis Name="Value"></ChartValueAxis>
        <ChartValueAxis Name="Value2"></ChartValueAxis>
    </ChartValueAxes>
    
    <ChartCategoryAxes>
        <ChartCategoryAxis Name="Category">
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public List<Point> series1Data = new List<Point>()
    {
        new Point { X = 0, Y = 1 },
        new Point { X = 6, Y = 2 },
        new Point { X = 12, Y = 3 },
        new Point { X = 18, Y = 4 },
        new Point { X = 24, Y = 5 },
        new Point { X = 30, Y = 6 },
        new Point { X = 36, Y = 7 },
        new Point { X = 42, Y = 8 },
        new Point { X = 48, Y = 9 },
        new Point { X = 1024, Y = 10 },
    };

    public List<Point> series2Data = new List<Point>()
    {
        new Point { X = 0, Y = 0.01 },
        new Point { X = 5, Y = 0.02 },
        new Point { X = 10, Y = 0.05 },
        new Point { X = 15, Y = 0.1 },
        new Point { X = 20, Y = 0.2 },
        new Point { X = 25, Y = 0.35 },
        new Point { X = 30, Y = 0.5 },
        new Point { X = 35, Y = 0.7 },
        new Point { X = 40, Y = 0.85 },
        new Point { X = 45, Y = 0.95 },
        new Point { X = 50, Y = 1.0 },
        new Point { X = 55, Y = 0.95 },
        new Point { X = 60, Y = 0.85 },
        new Point { X = 65, Y = 0.7 },
        new Point { X = 70, Y = 0.5 },
        new Point { X = 75, Y = 0.35 },
        new Point { X = 80, Y = 0.2 },
        new Point { X = 85, Y = 0.1 },
        new Point { X = 90, Y = 0.05 },
        new Point { X = 95, Y = 0.02 },
        new Point { X = 100, Y = 0.01 }
    };

    
    public class Point
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
    
    // protected override void OnInitialized()
    // {
    //     var samples = new double[] {0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54, 57, 60, 63, 66, 69, 72, 75, 78, 81, 84, 87, 90, 93};
    //     var std = StatisticsHelper.StandardDeviation(samples);
    //     var average = samples.Average();
    //     var yValues = StatisticsHelper.CalculateProbabilityDensityValues(samples.ToList(), std, average);
    //     
    //     series2Data = samples
    //         .Zip(yValues, (x, y) => new DistributionPoint { X = x, Y = y })
    //         .ToList();
    //     
    //     base.OnInitialized();
    // }
}

Does TelerikChart support a numeric X-axis instead of a CategoryAxis?
If so, should I be using a ChartValueAxis for the X-axis instead of a ChartCategoryAxis?

Is there a recommended way to configure a dual-axis chart where both the column and line series share a numeric X-axis?
I'd like the spacing to be consistent and reflect the actual distance between values.

PS: I also tried this with XAxes instead of CategoryAxes. But the same issue occurs.
Also I tried to use ascatterline instead of line. with type numeric on the x-axis. But then I cant add the column on that axis.

If you need more information, or if the issue is unclear, feel free to ask.

Charts

answered on 21 May 2025