Questions on UI for Blazor Forum

3 answers

168 views

Appointment Editor Recurs Until Fields Disabled

Hey Blazor UI team,

I've hit a block that I cannot get around with documentation on the scheduler component.

Per the attached image, when I edit or create an appointment, the UI shows that the "End" field inputs are disabled. I found they are disabled with a particular css class, so it makes me think that I'm missing some sort of parameter or model field that the component is looking for.

Is there documentation for this situation, and if not, what could be going on here?

Thanks!

Scheduler

answered on 05 Jun 2020

4 answers

201 views

Use ICS data in scheduler?

Hi,

I'm playing with the Telerik Blazor components. Is there a way to use the scheduler with ics data?

Thanks
Martin

Scheduler

answered on 04 Jun 2020

2 answers

885 views

Hierarchical Drawer on an Authorized Page

I am currently working on a getting a new Blazor site set up. This site will be using Azure AD for authentication and restricts the entire site to only users logged in.

Right now I am working on getting the Hierarchical Drawer in to the site. I have run in to the following issue, The child content element 'Template' of component 'TelerikDrawer' uses the same parameter name ('context') as enclosing child content element 'Authorized' of component 'AuthorizeView'. Specify the parameter name like: '<Template Context="another_name"> to resolve the ambiguity.

<Authorized>

<div class="main">

<div class="top-row px-4">

<a class="logo" href="/">

<img src="img/Logo.png" />

</a>

<div class="user-info">

<LoginDisplay />

</div>

<TelerikDrawer @ref="@Drawer" Data="DrawerItems" MiniMode="@true" Mode="@DrawerMode.Push" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">

<Template>

<div class="k-drawer-items" role="menubar" aria-orientation="vertical">

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

<Content>

<div class="content px-4">

@Body

</div>

</Content>

</TelerikDrawer>

</div>

</Authorized>

I have tried the following:

<Authorized Context="AuthContext">

<div class="main">

<div class="top-row px-4">

<a class="logo" href="/">

<img src="img/Logo.png" />

</a>

<div class="user-info">

<LoginDisplay />

</div>

<TelerikDrawer @ref="@Drawer" Data="DrawerItems" MiniMode="@true" Mode="@DrawerMode.Push" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">

<Template>

<div class="k-drawer-items" role="menubar" aria-orientation="vertical">

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

<Content>

<div class="content px-4">

@Body

</div>

</Content>

</TelerikDrawer>

</div>

</Authorized>

But then get the following error:

NullReferenceException: Object reference not set to an instance of an object.

In debugging, I found that this error was at the following line of code:

@foreach (var item in context)

and the context is null.

If anyone has any insight in to have a Hierarchical Drawer on a Authorized page?

Thank you for taking a look,

Jesse

Drawer

answered on 04 Jun 2020

1 answer

1.0K+ views

ValueChanged Error

Hi..

What is wrong? When the value changes I need to set values to other textboxes. What is wrong with my 'tags'?

When I set @bind-value , I get error that I can't have 2 change events.

I also need to bind to FoodType property.

thx again!

Telerik.Blazor.Components.TelerikDropDownList`2[CKonboard.Data.Models.EventFoodType,System.String] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.
at Telerik.Blazor.Components.Common.TelerikSelectBase`2.OnInitializedAsync()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Telerik.Blazor.Components.Common.TelerikSelectBase`2.SetParametersAsync(ParameterView parameters)

<TelerikDropDownList Id="FoodType"
ValueChanged="@((string c) => EventSelected(c))"
Value="@Service.FoodType"
Data="@Lookups.EventFoodTypes()"
TextField="EvtType"
DefaultText="-Select First Event Food Type"
ValueField="EvtType"
PopupWidth="200px"
Width="200px"
PopupHeight="130PX"
Class="ddl-no-bg">

DropDownList

answered on 03 Jun 2020

5 answers

495 views

TreeView margin.left problem

I test the TreeView control,using the style:

.sidebar {
position: fixed;
top: 40px;
left: 0;
bottom: 0;
width: 240px;
overflow-y: auto;
border-right: 1px solid #e4e6e9;
background-color:mediumaquamarine;
padding:0px 0px 0px 0px;
}

in MainLayout.razor:

<body>
<div class="header">
<a href="http://blazor.net">About</a>
</div>
<div class="sidebar">
<NavMenu/>
</div>
<div class="content">
@Body
</div>
</body>

and in NavMenu.razor:

@inject NavigateTreesService NavigateTrees

</TelerikTreeView>

Then run,look this picture attachment,There's always a spare part on the left.
and I found the treeview control's properties is too few,i can't set the sytle.

TreeView

answered on 02 Jun 2020

6 answers

1.8K+ views

Getting a 400 error on example

I'm working through this example, although slightly changed a bit, but I am getting a http 400.
I am trying to upload a json file. The api path looks right when I debug but the request never makes it to the controller, however, I dont think its a routing issue as I would get a 404 error instead?

https://docs.telerik.com/blazor-ui/components/upload/overview

Upload

answered on 01 Jun 2020

2 answers

2.3K+ views

Show/Hide Command Button based on data content in field

Good afternoon,

I am relatively new developer. I am working the the Telerik Grid and it is fantastic! The sorting and searching and editing I love it!

I have made my own custom command button that when clicked pops a modal dialog that displays a pdf. The link to display this pdf is stored in the database. All of this works great!

Now I would like to only display a button or enable this button if this field has something in it.

I am not picky about how its done either. I have tried to bind the enable event to a Has_Link boolean field...I have tried a bunch of stuff.

I realize this probably has more to do with my lack of knowledge than it does the control itself. If someone could point me in the right direction, I would be grateful!

Here is my code below.

<AuthorizeView>

<Authorized>

<h3>Search Permit</h3>

@if (Permits == null)

{

<p><em>Loading...</em></p>

}

else

{

<TelerikGrid Data=@Permits EditMode="@GridEditMode.Incell" @ref="Grid" Sortable="true" FilterMode="GridFilterMode.FilterMenu" Class="table-striped"

Height="750px"

Pageable="true" PageSize=@PageSize

OnUpdate=@UpdateItem OnDelete=@DeleteItem>

<GridToolBar>

<br />

</GridToolBar>

<GridColumns>

<GridColumn Field=@nameof(Permit.Permit_NO) Title="Permit Number" />

<GridColumn Field=@nameof(Permit.Parcel) />

<GridColumn Field=@nameof(Permit.PD_Owner) Title="Owner Name" />

<GridColumn Field=@nameof(Permit.Submission_Date) Title="Submit Date" />

<GridColumn Field=@nameof(Permit.Permit_Issue_Date) Title="Issue Date" />

<GridColumn Field=@nameof(Permit.Permit_Type) Title="Permit Type" />

<GridColumn Field=@nameof(Permit.Estimated_Cost) Title="Cost" />

<GridColumn Field=@nameof(Permit.Fee) Title="Cost" />

<GridColumn Field=@nameof(Permit.Note) />

<GridColumn Field=@nameof(Permit.Image_Link) />

<GridColumn Field=@nameof(Permit.Has_Link) />

<GridCommandColumn>

<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>

<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>

<GridCommandButton Enabled="ShowImageIsEnabled" OnClick="Show_Image" Icon="information">Show Permit</GridCommandButton>

</GridCommandColumn>

</GridColumns>

</TelerikGrid>

}

</Authorized>

<NotAuthorized>

<h1>Access Denied!</h1>

</NotAuthorized>

</AuthorizeView>

@code {

private List<PermitModel> Permits = new List<PermitModel>();

private PermitModel Permit = new PermitModel();

public TelerikGrid<PermitModel> Grid { get; set; }

public bool ShowImageIsEnabled { get; set; } = true;

int PageSize = 15;

protected override async Task OnInitializedAsync()

{

Permits = await _db.GetPermitData();

await SetGridSort();

}

private void DeleteItem(GridCommandEventArgs args)

{

var argsItem = args.Item as PermitModel;

Permits.Remove(argsItem);

_db.DeletePermit(argsItem);

}

private void UpdateItem(GridCommandEventArgs args)

{

var argsItem = args.Item as PermitModel;

var index = Permits.FindIndex(i => i.Record_ID == argsItem.Record_ID);

if (index != -1)

{

Permits[index] = argsItem;

}

_db.DeletePermit(argsItem);

_db.InsertPermit(argsItem);

}

async Task SetGridSort()

{

GridState<PermitModel> desiredState = new GridState<PermitModel>()

{

SortDescriptors = new List<SortDescriptor>()

{

new SortDescriptor { Member = "Permit_NO", SortDirection = ListSortDirection.Descending }

}

};

await Grid.SetState(desiredState);

}

void Show_Image(GridCommandEventArgs args)

{

var argsItem = args.Item as PermitModel;

var parameters = new ModalParameters();

parameters.Add(nameof(ImageModal.image), argsItem.Image_Link);

Modal.Show<ImageModal>(argsItem.Permit_NO, parameters);

}

Grid

answered on 28 May 2020

1 answer

1.0K+ views

Include all pages in Excel export not working

Hi

If i export my data to excel, only the current page is shown.
The "AllPages" flag is set to true.

I load my data via "OnRead", because i need to implement pagination by myself.

How can i achieve this.

Kind regards
Matthias

Grid

answered on 28 May 2020

2 answers

748 views

Grid Aggregates without grouping

Is there a way of displaying grid aggregates, without grouping the grid.

I am trying to implement a simple grid with a footer 'row' that would show column totals

Grouping the data is not really appropriate, I suppose I could add an arbitrary grouping, but the extra UI elements introduced with grouping would detract from a clean UI design.

If not, what would be a good way to implement this.

Grid

answered on 28 May 2020

1 answer

161 views

2.14 version OnExpand problem in Lazy mode

Hello, Marin.
After upgrade from 2.12 to 2.14 version I have a problem
When I expand a node, I have exception.
Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Object reference not set to an instance of an object.

System.NullReferenceException: Object reference not set to an instance of an object.
at Telerik.Blazor.Components.TreeView.TreeViewNode.ToggleAnimationContainerAsync()
at Telerik.Blazor.Components.TreeView.TreeViewNode.ToggleExpand()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'hyHyoH3D6-TdzHqjUEAgnTTMn8agGOfRQaRZTjj0xzs'.

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Cannot process pending renders after the renderer has been disposed.
Object name: 'Renderer'.
Even if I'm not use OnExpand event I have same problem in 2.14. In 2.12 all works fine.
Thank you.

TreeView

answered on 27 May 2020