@inherits LayoutComponentBase
<TelerikMediaQuery Media="(max-width: 560px)" OnChange="@SmallMediaQueryChange"></TelerikMediaQuery>
<TelerikMediaQuery Media="(min-width: 560px) and (max-width: 828px)" OnChange="@MediumMediaQueryChange"></TelerikMediaQuery>
@* break point intended for 768px, however, the demo has two paddings 30px each that lead to the new 828px break point *@
<TelerikMediaQuery Media="(min-width: 828px)" OnChange="@LargeMediaQueryChange"></TelerikMediaQuery>
<div class="demo-menu-container">
@{
if (WindowSize == DemoWindowSize.Large)
{
<a href="https://www.nmrk.com/services/valuation-and-advisory">
<img src="https://www.nmrk.com/favicons/favicon-32x32.png" sizes="32x32" />
</a>
}
else
{
if (IsDrawerOpen)
{
<TelerikButton OnClick="(() => IsDrawerOpen = false)" Icon="@SvgIcon.X" FillMode="@(ThemeConstants.Button.FillMode.Flat)"></TelerikButton>
}
else
{
<TelerikButton OnClick="@ToggleDrawer" Icon="@SvgIcon.Menu" FillMode="@(ThemeConstants.Button.FillMode.Flat)"></TelerikButton>
}
}
}
@*<h2 class="tk-title">NEWHAL</h2>*@
<span class="separator"></span>
@{
if (WindowSize == DemoWindowSize.Large)
{
<TelerikMenu Data="@MenuItems" CloseOnClick="true" OnClick="@((MenuItem item) => OnMenuItemClick(item))">
<ItemTemplate Context="item">
<span class="k-menu-link-text @(item.Text.ToLower() != "components" ? "k-font-weight-bold" : "")">@item.Text</span>
</ItemTemplate>
</TelerikMenu>
}
}
</div>
<TelerikDrawer @ref="@Drawer" Class="@DrawerClass" Data="DrawerItems" @bind-Expanded="IsDrawerOpen" Mode="@DrawerMode.Overlay">
<Template>
<div class="k-drawer-items" role="menubar" aria-orientation="vertical">
<ul>
@foreach (var item in context)
{
var selectedClass = item == SelectedMenuItem ? "k-selected" : string.Empty;
var boldClass = item.Text.ToLower() != "components" ? "k-font-weight-bold" : "";
if (item.Level == 0)
{
<li class="k-drawer-item k-drawer-separator"></li>
}
<li @onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass k-level-@(item.Level)">
@if (item.Expanded && (item.Items?.Any() ?? false))
{
<TelerikSvgIcon Icon="@SvgIcon.ChevronUp"/>
}
else if (!item.Expanded && (item.Items?.Any() ?? false))
{
<TelerikSvgIcon Icon="@SvgIcon.ChevronDown" />
}
<span class="k-item-text @boldClass">@item.Text</span>
</li>
}
</ul>
</div>
</Template>
<DrawerContent>
@((MarkupString)DrawerContent)
</DrawerContent>
</TelerikDrawer>
@Body
@code {
public bool IsDrawerOpen { get; set; } = false;
public string DrawerClass { get; set; }
public string DrawerContent { get; set; }
public MenuItem SelectedMenuItem { get; set; }
public DemoWindowSize WindowSize { get; set; }
public TelerikDrawer<MenuItem> Drawer { get; set; }
public List<MenuItem> MenuItems { get; set; }
public List<MenuItem> DrawerItems { get; set; }
public class MenuItem
{
public string Text { get; set; }
public string Url { get; set; }
public bool Expanded { get; set; }
public int Level { get; set; }
public List<MenuItem> Items { get; set; }
public string Content { get; set; }
}
public enum DemoWindowSize
{
Small,
Medium,
Large
}
private void UpdateDrawerContent(string content)
{
if (!string.IsNullOrEmpty(content))
{
DrawerContent = content;
}
}
protected void OnMenuItemClick(MenuItem item)
{
UpdateDrawerContent(item.Content);
}
public async Task ToggleDrawer()
{
await Drawer.ToggleAsync();
}
public async Task OnItemSelect(MenuItem selectedItem)
{
SelectedMenuItem = selectedItem;
UpdateDrawerContent(selectedItem.Content);
selectedItem.Expanded = !selectedItem.Expanded;
var newData = new List<MenuItem>();
foreach (var item in DrawerItems.Where(x => x.Level <= selectedItem.Level))
{
newData.Add(item);
if (item == selectedItem && selectedItem.Expanded && (item.Items?.Any() ?? false))
{
foreach (var child in item.Items)
{
newData.Add(child);
}
}
if (item != selectedItem && !(item.Items?.Contains(selectedItem) ?? false))
{
item.Expanded = false;
}
}
DrawerItems = newData;
if (selectedItem.Level != 0)
{
await ToggleDrawer();
}
await Task.Yield();
}
public void SmallMediaQueryChange(bool matchesMediaQuery)
{
if (matchesMediaQuery)
{
WindowSize = DemoWindowSize.Small;
DrawerClass = "drawer-sm";
}
}
public void MediumMediaQueryChange(bool matchesMediaQuery)
{
if (matchesMediaQuery)
{
WindowSize = DemoWindowSize.Medium;
DrawerClass = "";
}
}
public async Task LargeMediaQueryChange(bool matchesMediaQuery)
{
if (matchesMediaQuery)
{
WindowSize = DemoWindowSize.Large;
DrawerClass = "";
if (IsDrawerOpen)
{
await Drawer.ToggleAsync();
}
}
}
protected override void OnInitialized()
{
MenuItems = new List<MenuItem>()
{
new MenuItem()
{
Text = "Bids",
Expanded = false,
Level = 0,
},
new MenuItem()
{
Text = "Assignments",
Level = 0,
},
new MenuItem()
{
Text = "Jobs",
Level = 0,
Url = "/jobs"
},
new MenuItem()
{
Text = "Comps",
Level = 0,
},
new MenuItem()
{
Text = "Production",
Level = 0,
},
new MenuItem()
{
Text = "Templates",
Level = 0,
},
new MenuItem()
{
Text = "Administration",
Level = 0, }
};
DrawerContent = MenuItems[0].Content;
DrawerItems = MenuItems;
base.OnInitialized();
}
}
<style>
.k-menu-link
{
color: rgb(18, 116, 172) !important;
}
#demo-runner {
padding: 0px;
}
.drawer-sm.k-drawer-expanded .k-drawer.telerik-blazor {
width: 100%;
}
.drawer-sm.k-drawer-expanded .k-drawer-wrapper,
.drawer-sm.k-drawer-expanded .k-drawer-items {
width: 100% !important;
}
.drawer-sm.k-drawer-expanded .k-drawer {
max-width: 100vh;
}
.drawer-sm.k-drawer-expanded .k-overlay {
display: none;
}
.k-drawer-container {
position: relative;
width: 100%;
height: 95%;
min-height: 300px;
}
.k-drawer-container .k-drawer-content {
font-size: 16px;
line-height: 20px;
}
.k-drawer-container.k-drawer-overlay .k-drawer {
position: absolute;
}
.k-drawer-content {
padding: 25px;
font-size: 18px;
}
.k-drawer-content a {
color: #3D57D8;
text-decoration: inherit;
}
.k-drawer-content a:hover {
text-decoration: underline;
}
.k-drawer-content h2 {
font-weight: 300;
}
.tk-logo,
.tk-logo svg {
height: 19px;
width: 18px;
}
.tk-logo {
margin: 5px;
}
.tk-title {
font-size: 19px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
}
.separator {
box-sizing: border-box;
width: 1px;
height: 20px;
background: #E5E5E5;
border-radius: 0px;
}
.demo-menu-container {
height: 48px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 8px;
gap: 8px;
height: 48px;
left: 0px;
top: 0px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.03), 0px 4px 5px rgba(0, 0, 0, 0.04);
}
.demo-menu-container figure {
width: 19px;
height: 19px;
margin: 0 5px 0 0;
}
.demo-menu-container .k-menu {
height: 100%;
}
.k-drawer-item.k-level-1 {
padding-inline-start: 60px;
}
.k-overlay {
position: absolute;
}
</style>
Jobs.razor
@layout __Main@using System.Text.Json;
@page "/jobs"
<style>
/* grid */
.k-grid.font-size,
/* grid toolbar */
.k-grid.font-size .k-toolbar,
/* grid cells */
.k-grid.font-size table,
/* textboxes */
.k-grid.font-size .k-input,
/* date pickers */
.k-grid.font-size .k-picker,
/* buttons */
.k-grid.font-size .k-button,
/* column and filter menu */
.k-popup,
.k-popup .k-input,
.k-popup .k-picker,
.k-popup .k-button,
/*column menu dropdowns */
.k-columnmenu-item {
font-size: 12px;
}
</style>
<div class="demo-menu-container">
<strong>Jobs - </strong>last opened: Blah blah blah, Job Status: blah
</div>
<TelerikGrid @ref="@GridRef"
class="font-size"
Data=@GridData
Height=@Height
Size="@ThemeConstants.Grid.Size.Small"
FilterMode="@GridFilterMode.FilterRow"
FilterRowDebounceDelay="filterDebounceDelay"
Pageable=true PageSize=@PageSize>
<GridColumns>
<GridColumn Field=@nameof(ProjectJobQueue.JobNumber)
Title="Job #" Width="100px"
DefaultFilterOperator="@FilterOperator.IsEqualTo"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.NgageNumber)
Title="Ngage" Width="100px"
DefaultFilterOperator="@FilterOperator.IsEqualTo"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.RmsNumber)
Title="RMS" Width="100px"
DefaultFilterOperator="@FilterOperator.IsEqualTo"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.DueDtTm)
Title="Due Date" Width="100px" DisplayFormat="{0:MM/dd/yyyy}"
DefaultFilterOperator="@FilterOperator.IsEqualTo"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.ClientName)
Title="Client" Width="250px"
DefaultFilterOperator="@FilterOperator.Contains"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.EngagementTypeDisplay)
Title="Project Type" Width="100px"
DefaultFilterOperator="@FilterOperator.Contains"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.PropertyAddress)
Title="Address" Width="150px"
DefaultFilterOperator="@FilterOperator.Contains"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.CityDisplay)
Title="City" Width="150px"
DefaultFilterOperator="@FilterOperator.Contains"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.CountyDisplay)
Title="County" Width="100px"
DefaultFilterOperator="@FilterOperator.Contains"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.StateDisplay)
Title="State" Width="50px"
DefaultFilterOperator="@FilterOperator.Contains"
ShowFilterCellButtons="@showFilterButtons" />
<GridColumn Field=@nameof(ProjectJobQueue.PropertyTypeDisplay)
Title="Property Type" Width="150px"
DefaultFilterOperator="@FilterOperator.Contains"
ShowFilterCellButtons="@showFilterButtons" />
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<ProjectJobQueue> GridRef { get; set; }
int PageSize = 20;
string Height = "1200px";
int filterDebounceDelay { get; set; } = 200;
bool showFilterButtons { get; set; } = true;
public List<ProjectJobQueue> GridData { get; set; }
public string Json { get; set; } = "[...]";
protected override void OnInitialized()
{
GridData = JsonSerializer.Deserialize<List<ProjectJobQueue>>(Json);
}
public class ProjectJobQueue
{
private bool _isSelected;
private Guid? _ownerId;
public string AppraisalStatusDisplay { get; set; }
public string Appraiser { get; set; }
public string AssignedTo { get; set; }
public string BusinessUnitName { get; set; }
public string CityDisplay { get; set; }
public string ClientName { get; set; }
public string CountyDisplay { get; set; }
public string Description { get; set; }
public DateTime? DueDtTm { get; set; }
public Guid? EngagementId { get; set; }
public string EngagementTypeDisplay { get; set; }
public string HopkinsId { get; set; }
public string InterestTypeDisplay { get; set; }
public DateTime? InvoiceDate { get; set; }
public bool IsBooked { get; set; }
public bool IsCanceledCharge { get; set; }
public bool? IsContractPaid { get; set; }
public bool IsJobOnHold { get; set; }
public bool IsRequestedInfo { get; set; }
public bool IsSelected {get; set;}
public decimal? JobFee { get; set; }
public Guid? JobId { get; set; }
public int? JobNumber { get; set; }
public string JobStatusDisplay { get; set; }
public string ManagingDirector { get; set; }
public string NgageNumber { get; set; }
public DateTime? OwnedDtTm { get; set; }
//public Guid? OwnerId { get; set; }
public Guid? OwnerId
{
get { return _ownerId; }
set
{
if (_ownerId != value)
{
_ownerId = value;
//RaisePropertyChanged(() => OwnerId);
}
}
}
public string PostalCode { get; set; }
public string PropertyAddress { get; set; }
public string PropertyCategoryDisplay { get; set; }
public string PropertyTypeDisplay { get; set; }
public string ReportFormatDisplay { get; set; }
public DateTime? ReportShippedDate { get; set; }
public DateTime? RevisedShippedDate { get; set; }
public string RmsNumber { get; set; }
public string StateDisplay { get; set; }
//public IUser UserContext { get; private set; }
}
}