Questions on UI for Blazor Forum

1 answer

1.7K+ views

[Solved] 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

153 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

151 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

147 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.8K+ 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

1 answer

391 views

Why can't I set the text-decoration on my Breadcrumb items?

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:

Breadcrumb

answered on 18 Apr 2022

1 answer

506 views

Id parameters not being rendered in html

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

Add an Id parameter to all Telerik components
Render all Id parameters on Telerik components as an id attribute in the generated html

General Discussions

answered on 18 Apr 2022

1 answer

211 views

[Solved] Filter Field Template

Is there a way to create a custom template for the FilterField? Would like to create create autocomplete/comboboxes for some of the options.

Filter

answered on 18 Apr 2022

0 answers

813 views

How to make icon bigger in Telerik Button?

Hello, I have tried several methods of making the icon within the Telerik Button bigger, but none of them worked. I tried changing the font-size of the icon, I also tried changing the Size to '"lg" but neither worked. When I make the buttons bigger, the icon stays the same size. Any help would be greatly appreciated. Thanks in advance.

@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>

Button

asked on 18 Apr 2022

0 answers

1.7K+ views

Open & Close Tabs in browser

Hi, I'd like to close all tabs, which were opened by user.

I have problem, it still closes only one opened tab. I use this methods:

<TelerikButton OnClick="@OpenTabC" Primary="true">Open Tab C</TelerikButton>
<TelerikButton OnClick="@OpenTabF" Primary="true">Open Tab F</TelerikButton>
<TelerikButton OnClick="@CloseTabs" Primary="true">Close Tab</TelerikButton>

async Task OpenTabC()
{
await JS.InvokeVoidAsync("open", $"counter", "_blank");
}

async Task OpenTabF()
{
await JS.InvokeVoidAsync("open", $"fetchdata", "_blank");
}

async Task CloseTabs()
{
var loadDataTasks = new Task[]
{
Task.Run(async () => await JS.InvokeVoidAsync("close", $"counter")),
Task.Run(async () => await JS.InvokeVoidAsync("close", $"fetchdata"))
};

try
{
Task.WaitAll(loadDataTasks);
}
catch (Exception ex)
{
// handle exception
}

}

What is wrong in CloseTabs method, please, why does it close only one tab?

It is possible to do without JS.InvokeVoidAsync?

Thank you

Peter

Button

Security

Window

updated question on 14 Apr 2022