@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; }
}
}
Where I've embedded the REPL I seem to be getting errors today.
Any changes your side?
Hi,
I've used the REPL embed feature to include some examples in my online Blazor course (running via WASM).
This week I've had a few reports of the REPL not loading correctly for people.
It seems to be fine for me, but here's an example of an error one person ran into:
Any ideas?
Thanks
REPL for aspnet core notifications is broken, it runs on first load and then fails to do anything if I change even a single character and then try to run it again
ASP.NET Core REPL - ASP.NET Core Components Playground & Testing - Telerik
Not sure that link will work but I'm talking about the notification that shows email message, error message and upload success
I'm seeing message in dev tools about 'isMobile is not defined'
Running in Windows 10, latest version of Edge OR latest version of Chrome
Hello! When I try to populate a grid with data I can only get it to show the data if I don't use a nested object. For example:
An object like this I'd assume I could access by adding a grid column like this:
When I do it this way however nothing shows up although all items do load into the grid, they just don't show any text.
To make it show text I can only use the first level of properties in the object:
In this case I'd see the data in this property on the table.
Is this a bug or intended functionality?
Existing REPLs do not compile and run any more.
Here is one simple example. and the error messages you get when you try to save/run
Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.
 CS0246 | The type or namespace name 'Telerik' could not be found (are you missing a using directive or an assembly reference?) | __Main.razor | 22 |
| CS0246 | The type or namespace name 'Telerik' could not be found (are you missing a using directive or an assembly reference?) | __Main.razor | 23 |
| CS0246 | The type or namespace name 'Telerik' could not be found (are you missing a using directive or an assembly reference?) | __Main.razor | 24 |
| CS0246 | The type or namespace name 'Telerik' could not be found (are you missing a using directive or an assembly reference?) | Comp1.razor | 23 |
| CS0246 | The type or namespace name 'Telerik' could not be found (are you missing a using directive or an assembly reference?) | Comp1.razor | 24 |
| CS0246 | The type or namespace name 'Telerik' could not be found (are you missing a using directive or an assembly reference?) |
https://blazorrepl.telerik.com/GQYpbvbP37ENDltY58
This sample seems to be broken. It won't run.
I included a nuget package, but the code will not compile because it can't find the package symbols.
For example:
https://blazorrepl.telerik.com/cbPPOzcQ05pZuq4a09
From this page: Hierarchy in ASP.NET Core Grid Component Demo | Telerik UI for ASP.NET Core
Edit it REPL
Run, works fine
Make a simple change like changing height to 500px
Run, gives a blank screen on right side.