Questions on UI for Blazor Forum

1 answer

407 views

Build in DialogFactory.AlertAsync dialog goes behind TelerikWindow and cannot be brought back on top

Built in dialog from

DialogFactory.AlertAsync

Goes behind TelerikWindow if the window is clicked. Then it cannot be brought back on top or otherwise closed. Shouldn't the built in dialog be modal and forced on top of the TelerikWindow until it is acknowledged?

Please, let me know. Thanks.

Dialog

Window

answered on 21 Apr 2022

1 answer

580 views

Could you split a GridColumn field string into multiple columns?

I have a Field in my TelerikGrid : <GridColumn Field=@nameof(EssGrpParm.Str) Title="Tekst" Width="30%"/>.

Could I somehow split EssGrpParm.Str with data that looks like this: "CONT INT TFT CSS". into separate columns;. CONT, INT, TFT and CSS?

Should I add a list field in EssGrpParm and foreach over the list to get new columns?

Grid

answered on 21 Apr 2022

1 answer

273 views

Grid: only toggle between asc/desc in a single column sort

Hi, apologies if this has been asked but I didn't find it via search. We are implementing the grid in our projects and one feature I'd like to implement is to prevent the default or 'no sort' state on a column when toggling sort on the same column. Our users should always be sorting by one column. If the user clicks repeatedly on the column currently sorted, we want it to only toggle between asc and desc.

What happens right now is with single sort mode, say we have col1 that is sort asc by default.

- If the user clicks col1 header once, it sorts to desc.

- If they click col1 header again it goes to 'empty'.*

* What I want to do is have it flip to desc instead. Obviously if they then sort by a different column it will clear the sort on this column.

I understand why there is such a default/empty state but was curious if there is a way to prevent this in our scenario. I saw the OnStateChanged example in the docs but it doesn't seem to provide info on what was previously selected so I could even cancel what was going on. Unless I missed something there.

Thanks!

Grid

answered on 21 Apr 2022

1 answer

107 views

How to trigger the upload from a parent component

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?

Upload

answered on 21 Apr 2022

1 answer

355 views

Global size settings for entire UI?

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

answered on 21 Apr 2022

1 answer

1.6K+ views

Making the border of a Telerik Drawer full height of the browser

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>

Drawer

Styling

answered on 20 Apr 2022

1 answer

102 views

DataGrid Hierarchy DetailTemplate Only Show + Sign When Data Exists

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.

Grid

answered on 20 Apr 2022

0 answers

114 views

DateRangePicker: How to prevent display/selection of "overlap" days?

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!

DateRangePicker

asked on 19 Apr 2022

1 answer

123 views

Virtualization DropDownList Optional Over-Typed Value

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?

DropDownList

answered on 19 Apr 2022

1 answer

1.7K+ views

What is the best way to change the body background color?

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?

General Discussions

answered on 18 Apr 2022