Telerik Forums
UI for Blazor Forum
1 answer
107 views

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?

Dimo
Telerik team
 answered on 21 Apr 2022
1 answer
331 views

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)?


Dimo
Telerik team
 answered on 21 Apr 2022
1 answer
1.6K+ views

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>

Dimo
Telerik team
 answered on 20 Apr 2022
1 answer
97 views
Is it possible to only show the + in a hierarchy data grid when data exists for that row? We want a visual indicator to only show to the user when there is actual detail rows that can be viewed.
Svetoslav Dimitrov
Telerik team
 answered on 20 Apr 2022
0 answers
108 views

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!

 

 

Tech
Top achievements
Rank 1
 asked on 19 Apr 2022
1 answer
120 views

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?

 

Dimo
Telerik team
 answered on 19 Apr 2022
1 answer
1.6K+ views

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? 

Hristian Stefanov
Telerik team
 answered on 18 Apr 2022
1 answer
329 views

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:

Svetoslav Dimitrov
Telerik team
 answered on 18 Apr 2022
1 answer
441 views

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

  1. Add an Id parameter to all Telerik components
  2. Render all Id parameters on Telerik components as an id attribute in the generated html
Svetoslav Dimitrov
Telerik team
 answered on 18 Apr 2022
1 answer
180 views
Is there a way to create a custom template for the FilterField?  Would like to create create autocomplete/comboboxes for some of the options.
Hristian Stefanov
Telerik team
 answered on 18 Apr 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?