Questions on UI for Blazor Forum

3 answers

500 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

365 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

863 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

331 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

214 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

3 answers

3.8K+ views

right alignment

Is there a way to right align the text in both edit and display modes?

Thanks … Ed

NumericTextBox

answered on 27 Mar 2020

4 answers

3.6K+ views

Combobox in Grid Column

Hey everyone!

I'm currently focusing a lot on creating components and pages with the help of Telerik Blazor UI.
One problem/question that poped-up recently is the following :

I've been trying to include a Telerik Combobox inside a grid to limit the user to a set of values when creating a new row.

I've been trying to do so with the Template component like the following :

<GridColumn Field="@nameof(ConfigDefinitionsPatins.Face)" Title="Face">

<Template Context="ctxPatin">

@{

var patin = ctxPatin as ConfigDefinitionsPatins;

<TelerikComboBox Value="patin.Face" Data="patin.Face" Placeholder="Sur le ..." TextField="@nameof(ConfigDefinitionsPatins.Face)" Id="face">

</TelerikComboBox>

}

</Template>

</GridColumn

But here's the result comes out negative. You can have a look at the attached file.

What am I doing wrong?

Thanks in advance and stay safe!

Grid

answered on 25 Mar 2020

5 answers

154 views

Version 2.9 problem

Hi,

I upgraded my project to Blazor WebAssembly 3.2.0 Preview 2

blazor.webassembly.js:1 WASM: TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

at e.value (/_content/telerik.ui.for.blazor/js/telerik-blazor.js:38:23963)
at new e (/_content/telerik.ui.for.blazor/js/telerik-blazor.js:38:20476)
at r (/_content/telerik.ui.for.blazor/js/telerik-blazor.js:1:6519)
at Object.r (/_content/telerik.ui.for.blazor/js/telerik-blazor.js:38:18001)
at /_framework/blazor.webassembly.js:1:9740
at new Promise (<anonymous>)
at Object.beginInvokeJSFromDotNet (/_framework/blazor.webassembly.js:1:9709)
at _mono_wasm_invoke_js_marshalled (/_framework/wasm/dotnet.3.2.0-preview2.20159.2.js:1:162942)

General Discussions

answered on 24 Mar 2020