Hi,
I have the following structure (shortend):
FormComponent.razor:
<UploadBox @ref="@BoxForUpload" />
FormComponent.razor.cs:
public UploadBox BoxForUpload; public async Task OnSelect(UploadSelectEventArgs args) { BoxForUpload.DoUpload(); }
UploadBox.razor:
<TelerikUpload @ref="@UploadRef" AutoUpload="false"></TelerikUpload>
UploadBox.razor.cs:
[Parameter] public EventCallback<UploadSelectEventArgs> OnSelect { get; set; }
public TelerikUpload UploadRef { get; set; }
public void DoUpload()
{
UploadRef.UploadFiles();
}
If I set AutoUpload to true, the upload works.
But if I set AutoUpload to false, the OnSelect will be triggered, but the upload do not work (no file receives the upload-api) and there are no errors in the console. How can I trigger the upload from the FormComponent?
Hello,
Is there a way to set the size of input/button elements globally on app startup instead of setting it individually on each button/combobox/etc (Telerik.Blazor.ThemeConstants.*.Size)?
Hello, I have implemented a Telerik Drawer from the documentation. Right now, there is only a vertical border for elements that are toggled or showing. However, I am trying to make the border full height at all times, even if the Drawer container is not "full". I have tried changing some of the Telerik CSS but I am unsure on how to get the border full height. Below is the code where the drawer is implemented and I am using the default, unmodified Telerik CSS files.
@inject IFacilityService FacilityService
@inject ILocationService LocationService
@using SensorDashboard.Pages
<div class="custom-toolbar d-flex align-items-center nowrap ">
<div class="hamburger" style="padding-right:0em;margin-right:0em;">
<TelerikButton OnClick="@ToggleDrawer" Icon="menu" FillMode="@(ThemeConstants.Button.FillMode.Flat)"></TelerikButton>
</div>
<div class="logo-icon">
<a class="wilder-logo d-none d-lg-block">
<img src="/images/wilder-logo.png" />
</a>
</div>
<div class="logo-text d-none d-lg-block" style="width:12%; height:auto; margin-left:1em; padding-right:2em; margin-right:1em;">
<div>
<h3 class="font-text" style="height:100% !important;">Sensor Dashboard</h3>
</div>
</div>
<div class="k-form-field-wrap " style="padding-left:1em; padding-right:0em; margin-right:0em; margin-left:0em;">
<TelerikDropDownList Data="@Facilities"
TextField="DisplayName"
ValueField="Id"
@bind-Value="@SelectedFacilityId"
Width="140px">
<!--width 12%-->
<DropDownListSettings>
<DropDownListPopupSettings Height="auto"></DropDownListPopupSettings>
</DropDownListSettings>
</TelerikDropDownList>
</div>
<div class="date-pick">
<TelerikDatePicker Min="@DateTime.Parse( "2021-01-01" )" Max="@DateTime.Today" @bind-Value="@SelectedDateTime" Width="9em" />
</div>
<TelerikButtonGroup Class="date-range-group">
<ButtonGroupToggleButton @bind-Selected="@_day" Rounded="0" Class="toggle-button" @ref="_selectDayButton" OnClick="SelectDay">Day</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@_week" Rounded="0" Class="toggle-button" @ref="_selectWeekButton" OnClick="SelectWeek">Week</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@_month" Rounded="0" Class="toggle-button" @ref="_selectMonthButton" OnClick="SelectMonth">Month</ButtonGroupToggleButton>
</TelerikButtonGroup>
<div class = "icon-buttons">
<TelerikButton Icon="arrow-rotate-cw" ></TelerikButton>
<TelerikButton Icon="file-pdf" ></TelerikButton>
<TelerikButton Icon="file-csv"></TelerikButton>
<TelerikButton Icon="bell" > </TelerikButton>
</div>
<div class="logout-btn d-none d-lg-block position-absolute top-0 end-0 " style="margin-left:45%;">
<!--style = "margin-left:70em;"-->
<TelerikButton Icon="logout"> </TelerikButton>
</div>
<div class="logout-btn d-none d-sm-block d-md-block d-lg-none" style="margin-left:0em; padding-left:0em;">
<TelerikButton Icon="logout"> </TelerikButton>
</div>
</div>
<!--end of toolbar-->
<TelerikDrawer @ref="@_drawer" Data="Data" MiniMode="false" Mode="@DrawerMode.Push" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">
<Template>
<div class="k-drawer-items" role="menubar" aria-orientation="vertical">
<!--<LoginDisplay />-->
<ul>
@foreach (var item in context)
{
var selectedClass = item == SelectedDrawerItem ? "k-state-selected" : string.Empty;
<li @onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass">
<div class="k-level-@(item.Level)">
<TelerikIcon Icon="@item.Icon"></TelerikIcon>
<span class="k-item-text">@item.Text</span>
</div>
@if (item.Expanded && (item.Children?.Any() ?? false))
{
<span class="k-icon k-i-arrow-chevron-down" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>
}
else if (!item.Expanded && (item.Children?.Any() ?? false))
{
<span class="k-icon k-i-arrow-chevron-right" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>
}
</li>
}
</ul>
</div>
</Template>
<DrawerContent>
@if( SelectedDrawerItem is not null && !string.IsNullOrWhiteSpace( SelectedDrawerItem.Id ) )
{
if ( SelectedDrawerItem.IsImage )
{
<Pictures LocationId="@SelectedDrawerItem.Id" LocationName="@SelectedDrawerItem.Description" />
}
else
{
<Sensors LocationId="@SelectedDrawerItem.Id" LocationName="@SelectedDrawerItem.Description" />
}
}
</DrawerContent>
</TelerikDrawer>
<!--- <NotAuthorized>
<a href="authentication/login">Log in</a>
</NotAuthorized>-->
@code {
// component references
private TelerikDrawer<DrawerItem> _drawer = null!;
private ButtonGroupToggleButton _selectDayButton = null!;
private ButtonGroupToggleButton _selectWeekButton = null!;
private ButtonGroupToggleButton _selectMonthButton = null!;
private bool _day = true;
private bool _week = false;
private bool _month = false;
private string Size { get; set; } = ThemeConstants.Button.Size.Medium;
public Dictionary<string, string> Sizes { get; set; } = new Dictionary<string, string>
{
{ "Small", ThemeConstants.Button.Size.Small },
{ "Medium", ThemeConstants.Button.Size.Medium },
{ "Large", ThemeConstants.Button.Size.Large }
};
public Facility[] Facilities
{ get; set; } = Array.Empty<Facility>();
public Guid SelectedFacilityId
{ get; set; }
public DateTime SelectedDateTime
{ get; set; } = DateTime.Today;
public DrawerItem? SelectedDrawerItem
{ get; set; }
public bool Expanded
{ get; set; } = true;
public IEnumerable<DrawerItem> Data
{ get; set; } = Array.Empty<DrawerItem>();
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
Data = new List<DrawerItem> { new DrawerItem { Id = $"{Guid.Empty:d}", Text = "Loading..." } };
StateHasChanged();
Facilities = await FacilityService.GetFacilitiesAsync();
SelectedFacilityId = Facilities.Select( el => el.Id ).FirstOrDefault();
if ( SelectedFacilityId == Guid.Empty )
return;
StateHasChanged();
var drawers = new List<DrawerItem>();
var rooms = await LocationService.GetGrowRoomLocationsAsync( SelectedFacilityId );
foreach ( var room in rooms )
{
var room_item = new DrawerItem { Id = $"{room.Id:d}", Text = room.DisplayName, Icon = "home", Level = 0, Children = new List<DrawerItem>() };
var room_sensors = new DrawerItem { Id = $"{room.Id:d}", Text = "Sensors", Description = $"{room.DisplayName} Sensors", Icon = "chart-line", Level = 1 };
var room_images = new DrawerItem { Id = $"{room.Id:d}", IsImage = true, Text = "Images", Description = $"{room.DisplayName} Images", Icon = "image", Level = 1 };
room_item.Children.Add( room_sensors );
room_item.Children.Add( room_images );
foreach ( var tower in room.GrowTowers )
{
var tower_item = new DrawerItem { Id = $"{tower.Id:d}", Text = tower.DisplayName, Icon = "layout-side-by-side", Level = 1, Children = new List<DrawerItem>() };
room_item.Children.Add( tower_item );
var tower_sensors = new DrawerItem { Id = $"{tower.Id:d}", Text = "Sensors", Description = $"{room.DisplayName} {tower.DisplayName} Sensors", Icon = "chart-line", Level = 2 };
var tower_images = new DrawerItem { Id = $"{tower.Id:d}", IsImage = true, Text = "Images", Description = $"{tower.DisplayName} Images", Icon = "image", Level = 2 };
tower_item.Children.Add( tower_sensors );
tower_item.Children.Add( tower_images );
foreach ( var level in tower.GrowTowerLevels )
{
var level_item = new DrawerItem { Id = $"{level.Id:d}", Text = level.DisplayName, Icon = "minus", Level = 2, Children = new List<DrawerItem>() };
tower_item.Children.Add( level_item );
var level_sensors = new DrawerItem { Id = $"{level.Id:d}", Text = "Sensors", Description = $"{room.DisplayName} {tower.DisplayName} {level.DisplayName} Sensors", Icon = "chart-line", Level = 3 };
var level_images = new DrawerItem { Id = $"{level.Id:d}", IsImage = true, Text = "Images", Description = $"{level.DisplayName} Images", Icon = "image", Level = 3 };
level_item.Children.Add( level_sensors );
level_item.Children.Add( level_images );
foreach ( var tray in level.GrowTrays )
{
var tray_item = new DrawerItem { Id = $"{tray.Id:d}", Text = $"Tray {tray.Position}", Description = $"{room.DisplayName} {tower.DisplayName} {level.DisplayName} Tray {tray.Position} Sensors and Pictures", Icon = "group-section", Level = 3 };
level_item.Children.Add( tray_item );
}
}
}
drawers.Add( room_item );
}
Data = drawers;
SelectedDrawerItem = drawers.FirstOrDefault();
StateHasChanged();
}
public async Task ToggleDrawer() => await _drawer.ToggleAsync();
private Task SelectDay()
{
return Task.CompletedTask;
}
private Task SelectWeek()
{
return Task.CompletedTask;
}
private Task SelectMonth()
{
return Task.CompletedTask;
}
public void OnItemSelect( DrawerItem selectedItem )
{
SelectedDrawerItem = selectedItem;
selectedItem.Expanded = !selectedItem.Expanded;
var newData = new List<DrawerItem>();
foreach ( var item in Data.Where( x => x.Level <= selectedItem.Level ) )
{
newData.Add( item );
if ( item == selectedItem && selectedItem.Expanded && ( item.Children?.Any() ?? false ) )
{
foreach ( var child in item.Children )
{
newData.Add( child );
}
}
if ( item != selectedItem && !( item.Children?.Contains( selectedItem ) ?? false ) )
{
item.Expanded = false;
}
}
Data = newData;
}
public class DrawerItem
{
public string Id
{ get; set; } = string.Empty;
public string Text
{ get; set; } = string.Empty;
public string Icon
{ get; set; } = string.Empty;
public bool Expanded
{ get; set; }
public int Level
{ get; set; }
public string Description
{ get; set; } = string.Empty;
public bool IsImage
{ get; set; } = false;
public IList<DrawerItem>? Children
{ get; set; }
}
}
<!--drawer specific styles-->
<style>
#demo-runner {
height: 600px;
}
.k-drawer-content {
padding: 25px;
font-size: 18px;
}
.k-drawer-container {
position: relative;
width: 100%;
height: 95%;
}
.k-drawer .k-drawer-item {
white-space: nowrap;
overflow: hidden;
}
/* these control the padding of the different children */
.k-level-1 {
padding-left: 20px;
}
.k-level-2 {
padding-left: 40px;
}
.k-level-3 {
padding-left: 60px;
}
.custom-toolbar {
width: 100% !important;
background-color: #fdf4e0;
line-height: 10px;
border-bottom: inset;
border-bottom-width: 1px;
color: #656565;
height: 5em;
}
.wilder-logo {
padding-left: 2em;
max-height: 3em;
margin-right: 0em;
padding-left: 0em;
margin-bottom: 1em;
margin-top: 1em;
}
.nowrap {
white-space: nowrap;
}
.date-pick {
width: 10em !important;
padding: 0;
margin-left: 15em;
padding-right: 0em;
margin-right: 0em;
display: inline-block;
vertical-align: top;
padding-left: 1em !important;
margin-left: 0em !important;
padding-right: 0em !important;
margin-right: 0em !important;
}
.btn-group {
padding-left: 1em;
width: 5em;
padding-right: 5em;
margin-right: 5em;
}
.refresh-btn {
border-color: white;
margin-left: 0em;
height:100%;
padding-left:0em;
}
.pdf-btn {
border-color: white;
margin-left: 1em;
height:100%;
}
.alert-btn {
border-color: white;
margin-left: 1em;
height:100%;
}
.date-range-group {
margin-left: 1em;
margin-right: 1em;
}
.toggle-button {
min-width: 5em;
border-color: white
}
.logout-btn {
margin-top:0em;
margin-bottom:0em;
margin-right: 0em;
}
.logo-text {
max-width: 100%;
padding-right: 0em;
margin-right: 0em;
}
.logo-icon {
margin-right: 0em;
padding-right: 0em;
}
.font-text{
font-family:Voyage;
color:black;
padding-left:0em;
margin-left:0em !important;
font-size: 1.8vw;
height:3em;
padding-right:3em;
margin-right:4em;
}
.icon-buttons{
}
.icon-button{
font-size:4em;
height:1em;
}
.date-range-group{
padding-right:0em;
margin-right:0em;
}
</style>
Hi,
The date range picker confusingly displays and selects days from different months multiple times. Our users (and we developers) find this very confusing and unnatural:
How can we turn off this behavior so that each month displays JUST the dates IN THAT MONTH and no other days?
Thanks!
Does virtualization DropDownList support a user providing a value not in the list?
Scenario:
There's a list of currently active work items that would be a query to a data source that populates the DropDownList. There's a chance that the user would want to override this list and provide a value not provided in the DropDownList. Can the virtualization drop down list provide the normal behavior but be able to over-type the selected value in the situation it doesn't match the needed value?
I would like to change the background color of my web app from white to a light blue (#f4f7fc).
I created a theme awhile back and still have the json file. So I uploaded that to the theme tool and changed the background and downloaded the new theme. I replaced the theme .css file in my application but there was no change.
I can see the new color under the .k-body and a few other classes. But in the developer tools it seems that the background color on the <body> element is set to var(--bs-body-bg). Is this a Bootstrap variable? How can I override this?
Here is my code:
<TelerikBreadcrumb Data="@Items" Width="100%" Class="ecsg-breadcrumb">
<SeparatorTemplate>
<span class="ecsg-breadcrumb-item">/</span>
</SeparatorTemplate>
<ItemTemplate>
<div class="ecsg-breadcrumb-item" role="button">
<span>
@context.Text
</span>
</div>
</ItemTemplate>
</TelerikBreadcrumb>
.ecsg-breadcrumb {
background-color: #002547 !important;
color: white;
}
.ecsg-breadcrumb-item {
color: white;
font-size: 1.25rem;
text-decoration:none;
text-decoration-thickness:0px;
}
Yet here is the result:
There are multiple Telerik components (TileLayoutItem, ButtonGroupButton, ButtonGroupToggleButton, GridCommandButton) that take an Id parameter but do not render that parameter as an id attribute on the HTML that is generated. Rendering the Id parameter in html is a behavior displayed by multiple other Telerik components (TelerikButton, TelerikDropDownList, TelerikDatePicker, etc) and I believe should be the expected behavior.
Are there plans to