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.
I'm using a TelerikCalendar component in a TelerikAnimationContainer and everything works fine, except that the calendar header is transparent and the background text is visible when the calendar pops up. I've tried setting a higher z-index to the calendar, but it doesn't helped.
<style>
.picker-popup > .k-calendar {
border-width: 0;
}
.date-time-box-calendar {
width: 26vw;
height: 30vw;
background-color: beige;
}
</style>
<TelerikAnimationContainer @ref="@calendarContainer" Class="picker-popup k-calander">
<TelerikCalendar class="date-time-box-calendar" Value="@Source" View="CalendarView.Month" Views="2" ValueChanged="@OnDateChangeHandler"></TelerikCalendar>
</TelerikAnimationContainer>
@{
async Task OnClickCalendarHanlder()
{
await ToggleCalendar();
}
async Task ToggleCalendar()
{
await calendarContainer.ToggleAsync();
}
}
Any idea, how can I get the calendar to most front view? What is my mistake?
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.
We have a Blazor DatePicker in our web app to store the Date of Birth. The calendar popup seems to be working correctly. However, for the input portion, when typing in the year of the date, the content typed into the year overflows the input area for as long as the user types, instead of horizontally scrolling within the 4-digit year space.
The interesting thing is that this is only happening to one of our client users. We have been unable to duplicate this either locally or in our Dev/Test environments. I'm assuming that, since the horizontal scrolling of the year entry is within the DatePicker widget, could this possibly be due to an environment issue with the Blazor library or maybe some setting within Microsoft Edge?
I don't have as many details as I would like to have to share with you. At this time, I'm just trying to find out if you have ever heard of this issue before?
<TelerikSplitter Orientation="SplitterOrientation.Horizontal" Height="70vh">
<SplitterPanes>
<SplitterPane Size="40%" Min="30%" Max="70%" Collapsible="false">
Is there a way to filter which file extensions are allowed to be selected? I limit to PDF or PNG but it allows me to select XML.
<div>
<hr />
<h4 class="gsi-padding-tb0-lr12">Upload File to Session...</h4>
<TelerikUpload AllowedExtensions="@( new List<string>() { ".pdf", ".png" } )"
OnSelect="@OnUploadSelect"
OnCancel="@OnUploadCancel"
OnRemove="@OnUploadRemove">
</TelerikUpload>
<div class="demo-hint gsi-padding-tb0-lr12">
<small>
Upload <strong>PDF</strong> or <strong>PNG</strong> files with a maximum size of <strong>6MB</strong>.
</small>
</div>
</div>
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.
<TelerikComboBox @bind-Value="@SessionOptionIndex1"
Data="@SessionOption1Items"
ShowClearButton="false"
TextField="Name" ValueField="Id" />