<style>
                .PriorPeriodAdjustedRowFormatting {
                    background-color: orange;
                }

                .ApprovalForPaymentRowFormatting {
                    background-color: lightgreen;
                }
            </style>

            <TelerikGrid Data="@TransactionsGridData" EditMode="@GridEditMode.Popup" Height="450px"
                         Pageable="true" PageSize="20" Sortable="false" Groupable="true"
                         FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
                         Resizable="true" Class="smallerFont" Reorderable="true" 
                         SelectionMode="@GridSelectionMode.Multiple"  SelectedItems="@SelectedTransactions" SelectedItemsChanged="@((IEnumerable<MixedTransactions> list) => OnTransactionsSelected(list))"
                         OnStateInit="@((GridStateEventArgs<MixedTransactions> args) => OnStateInitHandler(args))"
                         OnRowRender="@OnTransactionsRowRender">

        void OnTransactionsRowRender(GridRowRenderEventArgs args)
        {
            args.Class = "PriorPeriodAdjustedRowFormatting";
        }

            <style>
                .PriorPeriodAdjustedRowFormatting {
                    color: orange;
                }

                .ApprovalForPaymentRowFormatting {
                    background-color: lightgreen;
                }
            </style>

            <TelerikGrid Data="@EmployeeGridData" EditMode="@GridEditMode.Popup" Height="240px"
                         Pageable="true" PageSize="20" Sortable="true" Groupable="false"
                         FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
                         Resizable="true" Class="smallerFont" Reorderable="true" 
                         SelectionMode="@GridSelectionMode.Multiple" SelectedItems="@SelectedEmployees" SelectedItemsChanged="@((IEnumerable<EmployeeList> list) => OnEmployeesSelected(list))">
                <GridColumns>
                    <GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.All">

<GridColumn Field="Color" Title="Color" Width="100px" TextAlign="ColumnTextAlign.Center" FieldType="@(typeof(string))" >              
                        <Template>
                                @{
                                     @colorUpdate.ColorCode;                                        
<TelerikColorPicker @bind-Value="colorUpdate.ColorCode" ValueFormat="ColorFormat.Hex" Class="k-colorpicker" > 
                                            <ColorPickerViews>
                                                <ColorPickerGradientView ShowOpacityEditor="false" Format="ColorFormat.Hex">
                                                </ColorPickerGradientView>                                                
                                            </ColorPickerViews>                       
                                        </TelerikColorPicker>     
 <TelerikColorPalette Colors="@ColorList" TileHeight="25px" TileWidth="25px"  >                                            
                                        </TelerikColorPalette>                      
                                }                
</Template>
</GridColumn>

.k-colorpicker {
    width: stretch;  /*tried using 100% or fit-content */
}

.k-colorpicker .k-selected-color {
    width: stretch; /*tried using 100% or fit-content */
}

span.k-colorpicker{
 width: stretch; /*tried using 100% or fit-content */
}

@inject IFacilityService FacilityService
@inject ILocationService LocationService


 
 <div class="custom-toolbar">
    <TelerikButton OnClick="@ToggleDrawer" Icon="menu" FillMode="@(ThemeConstants.Button.FillMode.Flat)"></TelerikButton>
    <span style="margin-left: 20px; font-weight: bold; font-size: 17px;">Wilder Fields Sensor Dashboard</span>
</div>

<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 == SelectedItem ? "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>
        @SelectedItem?.Description
    </DrawerContent>
</TelerikDrawer>







   

   <!--- <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>-->



@code {
   
  

    

    protected override async Task OnParametersSetAsync()
    {
        await base.OnParametersSetAsync();

       
    }
    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public bool Expanded { get; set; } = true;
    public IEnumerable<DrawerItem> Data { get; set; } =
    new List<DrawerItem>
    {
            new DrawerItem { Text = "R2D2", Icon = "question",
             Children = new List<DrawerItem>()
                {
                    new DrawerItem { Text = "Room 1", Icon = "grid", Level = 1,
                    Children = new List<DrawerItem>()
                {
                    new DrawerItem { Text = "Room 1", Icon = "grid", Level = 2 },
                    new DrawerItem { Text = "Calendar", Icon = "calendar-date", Level = 2, Description = "The Calendar component allows the user to scroll through a calendar and select one or more dates. " },
                    new DrawerItem { Text = "Menu", Icon = "menu", Level = 2, Description = "The Menu component displays data (flat or hierarchical) in a traditional menu-like structure." },
                }
                    
                    
                    
                    },
                   
                }
            
            
            
            
            
            },

            new DrawerItem {
                Text = "Components",
                Icon = "categorize",
                Description = "Blazor is still a new technology and the component suite is young. We are constantly working on adding new features and components. Tell us which components you want implemented and how you intend to use them, and Blazor, at our feedback portal.",
                Children = new List<DrawerItem>()
                {
                    new DrawerItem { Text = "Room 1", Icon = "grid", Level = 1, Description = "The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation and accessibility support." },
                    new DrawerItem { Text = "Calendar", Icon = "calendar-date", Level = 1, Description = "The Calendar component allows the user to scroll through a calendar and select one or more dates. " },
                    new DrawerItem { Text = "Menu", Icon = "menu", Level = 1, Description = "The Menu component displays data (flat or hierarchical) in a traditional menu-like structure." },
                }
            },
            new DrawerItem { Text = "Browser Support", Icon = "calendar", Description = "Browsers supported by Telerik UI for Blazor: Chrome (including Android and iOS), Edge, Firefox, Safari (including iOS)" }
        };

    public async Task ToggleDrawer() => await Drawer.ToggleAsync();

    protected override void OnInitialized()
    {
        SelectedItem = Data.First();
    }

    public void OnItemSelect(DrawerItem selectedItem)
    {
        SelectedItem = 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 Text { get; set; }

        public string Icon { get; set; }

        public bool Expanded { get; set; }

        public int Level { get; set; }

        public string Description { get; set; }

        public IEnumerable<DrawerItem> Children { get; set; }
    }


     


   
}


<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;
    }

    .k-level-1 {
        padding-left: 20px;
    }

    .custom-toolbar {
        width: 100%;
        background-color: #f6f6f6;
        line-height: 10px;
        border-bottom: inset;
        border-bottom-width: 1px;
        padding: 3px 8px;
        color: #656565;
    }
</style>