Questions on UI for Blazor Forum

5 answers

683 views

Breadcrumbs on the menu items

Posting it here since it is related to the menu items. Is there a way to show bread crumbs on the menu items?

Thanks.

Menu

answered on 02 Apr 2020

2 answers

3.2K+ views

display image stored in sql db

Hi,

Can someone share an example of how to get an image from a FileStream'ed table in sqlserver into a column on a grid?

Thanks … Ed

Grid

answered on 01 Apr 2020

2 answers

553 views

Is there a way to add html elements in the menu text?

I was hoping to put some icons in the Text section of the menu component.

On regular nav link I can do this.

<NavLink class="dropdown-item" href="settings/accountcategories">
<span class="oi oi-command" aria-hidden="true"></span> Account Categories
</NavLink>

Thanks.

Menu

answered on 31 Mar 2020

3 answers

499 views

Pie Chart with Single Value - Percentage

Hi

How do I create a chart. I want bind a single value / a percentage - like 66% (.66).

For example disk space remaining. I have Drive object with PercentFree.

When this renders I get a full blue pie chart. Enclosed is 8 percent

Charts

answered on 31 Mar 2020

2 answers

362 views

DropDownList not rendering data after v2.9 update using ObservableColection

I'm using EditorTemplates in my TelerikGrid to display drop down lists to the user. I've been using ObservableCollections to gather the data from my API and populate the list which was working until I updated to v2.9.0 to take advantage of GridState.

I've used Console.WriteLine to confirm that the ObservableCollection does in fact have the data, but when inspecting the <span> element in the browser, no options have been populated. I thought perhaps my implementation of GridState had an effect; however, removing that resulted in no change in behavior. The DefaultText renders correctly as well as any records that match an available option. But the drop down list will not drop down when I click on it to display any options. Here's an abbreviated version of my code:

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Class="smallerFont"

Height="600px" RowHeight="50" PageSize="20"

Pageable="true"

Sortable="true"

FilterMode="@GridFilterMode.FilterRow"

OnRead=@ReadItems

TotalCount=@Total

OnUpdate=@UpdateItem

OnEdit="@EditHandler"

OnStateInit="@((GridStateEventArgs<ProjectView> args) => OnStateInit(args))">

<GridColumns>

...

<GridColumn Field=@nameof(ProjectView.Processor) Editable="true">

<EditorTemplate>

@{

<TelerikDropDownList DefaultText="Please Select" Data="@ProcessorList" TextField="Name" ValueField="Name" @bind-Value="(context as ProjectView).Processor" />

}

</EditorTemplate>

</GridColumn>

<GridColumn Field="@nameof(ProjectView.JobStatus)" Editable="true" Filterable="false">

<EditorTemplate>

@{

<TelerikDropDownList DefaultText="Please Select" Data="@StatusList" TextField="JobStatus" ValueField="JobStatus" @bind-Value="(context as ProjectView).JobStatus" />

}

</EditorTemplate>

</GridColumn>

...

</GridColumns>

...

</TelerikGrid>

@code {

public ObservableCollection<ProjectView> GridData { get; set; } = new ObservableCollection<ProjectView>();

public ObservableCollection<DdfCorsiProcessor> ProcessorList { get; set; } = new ObservableCollection<DdfCorsiProcessor>();

public ObservableCollection<DdfJobStatus> StatusList { get; set; } = new ObservableCollection<DdfJobStatus>();

public int Total { get; set; } = 0;

string appStatus;

private async Task EditHandler(GridCommandEventArgs args)

{

ODataClient client = new ODataClient(AppSetting.ODataURL);

var batch = new ODataBatch(client);

IEnumerable<DdfCorsiProcessor> processors = null;

IEnumerable<DdfJobStatus> jobStatuses = null;

if (ProcessorList.Count() == 0)

{

batch += async c => processors = await c.For<DdfCorsiProcessor>("Processors")

.OrderBy("Name")

.FindEntriesAsync();

}

if (StatusList.Count() == 0)

{

batch += async c => jobStatuses = await c.For<DdfJobStatus>("JobStatuses")

.Filter(x => x.Brand == "Greenfield")

.FindEntriesAsync();

}

if (ProcessorList.Count() == 0 || StatusList.Count() == 0)

{

await batch.ExecuteAsync();

if (processors != null)

foreach (var processor in processors)

{

ProcessorList.Add(processor);

}

if (jobStatuses != null)

foreach (var status in jobStatuses)

{

StatusList.Add(status);

}

foreach (var processor in ProcessorList)

Console.WriteLine(processor.Name);

}

DropDownList

answered on 31 Mar 2020

1 answer

857 views

Getting a 404 error on styles

Hi,

I'm getting a 404 error on the static resource styles from the assembly "Telerik.UI.for.Blazor.Trial"

My path is "_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" as per your online guide.

(https://docs.telerik.com/blazor-ui/getting-started/what-you-need)

The styles for my own RCL are served just fine using the same methodology.

I'm trying to assess the viability of the toolset for a customer and this isn't a great start...

General Discussions

answered on 31 Mar 2020

2 answers

1.1K+ views

TextBox ValueChanged not working with EditForm

I've tried getting this to work a number of ways, but it appears that using the 'ValueChanged' event with the Telerik TextBox is incompatible with <EditForm>.

The attached code generates an error using the <EditForm> tag. Works fine if its commented out. The TextBox works fine with EditForm but without ValueChanged defined. Any ideas?

@page "/testpage"

<EditForm Model="contactName" OnValidSubmit="OnValidSubmit">

<DataAnnotationsValidator />

from the handler: @result

<br />

from model: @contactName.LastName

<br />

<TelerikTextBox ValueChanged="@( (string s) => MyValueChangeHandler(s) )"

Value="@contactName.LastName">

</TelerikTextBox>

@*<TelerikTextBox @bind-Value="@contactName.LastName"/>*@

<ValidationMessage For="@(() => contactName.LastName)" />

<div>

<button class="btn btn-primary" type="submit">OK</button>

</div>

</EditForm>

@code {

string result;

public Contact contactName { get; set; } = new Contact();

private void MyValueChangeHandler(string theUserInput)

{

result = string.Format("The user entered: {0}", theUserInput);

//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value

contactName.LastName = theUserInput;

}

private void OnValidSubmit()

{

result = "Form Submitted";

}

public class Contact

{

public int NameId { get; set; }

public string FirstName { get; set; }

[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "You must enter a Last Name.")]

public string LastName { get; set; }

}

TextBox

answered on 30 Mar 2020

1 answer

2.2K+ views

Tooltip in a grid?

Does anyone have an example of how to use a tooltip in a grid? I would like to put a tooltip on a GridCommandButton but I can't seem to figure out how to do that.

Tooltip

answered on 28 Mar 2020

2 answers

329 views

Grid changes pages after selecting new row

I'm having a problem with selecting a row after changing pages that is reproducible with the attached code.

To reproduce, click on any row on the first page, 'Employee 5' for example.

Once 'Employee 5' is highlighted, navigate to page 4 using the selector at the bottom.

On page 4, click on 'Employee 35'. The grid will immediately jump back to page 1. If you return to page 4 you will see that 'Employee 35' is selected (highlighted), it just didn't stay on that page. Is this a bug or am I doing something wrong?

@page "/gridtest"

@inject IJSRuntime JsInterop

<TelerikGrid Data=@GridData

Page="currentPage"

SelectionMode="GridSelectionMode.Single"

@bind-SelectedItems="SelectedItems"

Pageable="true" PageSize="10"

Height="500px"

Class="@theGridClass">

<GridColumns>

<GridColumn Field=@nameof(Employee.Name) />

<GridColumn Field=@nameof(Employee.Team) Title="Team" />

</GridColumns>

</TelerikGrid>

<div class="row justify-content-center" style="margin-top:5px;">

<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(1, 5))">Select 5</TelerikButton>

<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(2, 15))">Select 15</TelerikButton>

<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(3, 25))">Select 25</TelerikButton>

<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(4, 35))">Select 35</TelerikButton>

</div>

@code {

string theGridClass { get; set; } = "theSpecialGrid";

int currentPage = 1;

async Task SelectItem(int page, int rowId)

{

// Select Grid Page

currentPage = page;

// Select Row

SelectedItems = GridData.Where(item => item.EmployeeId == rowId).ToList();

await Task.Delay(20);//rougly one rendering frame so this has the chance to render in the browser

await JsInterop.InvokeVoidAsync("scrollToSelectedRow", "." + theGridClass);

}

public List<Employee> GridData { get; set; }

public IEnumerable<Employee> SelectedItems { get; set; } = Enumerable.Empty<Employee>();

protected override void OnInitialized()

{

GridData = new List<Employee>();

for (int i = 0; i < 55; i++)

{

GridData.Add(new Employee()

{

EmployeeId = i,

Name = "Employee " + i.ToString(),

Team = "Team " + i % 3

});

}

public class Employee

{

public int EmployeeId { get; set; }

public string Name { get; set; }

public string Team { get; set; }

}

Grid

answered on 27 Mar 2020

1 answer

212 views

ComboBox breaks when binding to model

Finally updated to the telerik blazor 2.9.0 release, but now the combobox does not bind to the model correctly. The best error is "WASM: Microsoft.JSInterop.JSException: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'."

The markup from the razor form:

<TelerikComboBox Data="@SelectableClaims" TItem="ClaimModel" TValue="int" ValueField="Number" Placeholder="Claim #" ClearButton="true" Width="150px" TextField="Name" ValueChanged="@((int num) => SelectClaim(claim, num))"></TelerikComboBox>

However, I tried the telerik code in the documentation, it produces the same error. The full error is reproduced below.

blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at e.value (https://kendo.cdn.telerik.com/blazor/2.8.0/telerik-blazor.min.js:38:23963)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at new e (https://kendo.cdn.telerik.com/blazor/2.8.0/telerik-blazor.min.js:38:20476)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at r (https://kendo.cdn.telerik.com/blazor/2.8.0/telerik-blazor.min.js:1:6519)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at Object.r (https://kendo.cdn.telerik.com/blazor/2.8.0/telerik-blazor.min.js:38:18001)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at https://localhost:5001/_framework/blazor.webassembly.js:1:9740
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at new Promise (<anonymous>)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:9709)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at _mono_wasm_invoke_js_marshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0-preview2.20159.2.js:1:162942)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at do_icall (wasm-function[6008]:0x10e0aa)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at do_icall_wrapper (wasm-function[1886]:0x51cc2)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at System.Threading.Tasks.ValueTask`1[TResult].get_Result () <0x3031c70 + 0x0002c> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at Telerik.Blazor.Components.Popup.TelerikPopupBase.OnAfterRenderAsync (System.Boolean firstRender) <0x3716860 + 0x00124> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x2f484a8 + 0x000c2> in <filename unknown>:0

ComboBox

answered on 27 Mar 2020