Questions on UI for Blazor Forum

4 answers

233 views

Keyboard selection not working as expected

Keyboard selection only seems to match the first letter of the text. Is there a setting to change this behavior?

I've confirmed this behavior on the Blazor UI DropDownList demo as well. If you type in the state dropdown it just keeps changing the selection to the first state that begins with the last letter typed.

Without the ability to use the keyboard it makes large dropdownlists unmanageable.

DropDownList

answered on 03 Dec 2020

4 answers

1.0K+ views

[Solved] Error while adding Min and Max values in TelerikNumericTextBox

After adding the Minimum and Maximum value it shows an error as below

The type arguments for method 'TypeInference.CreateTelerikNumericTextBox_0<T>(RenderTreeBuilder, int, int, T, int, T, int, string, int, T, int, EventCallback<T>, int, Expression<Func<T>>)' cannot be inferred from the usage. Try specifying the type arguments explicitly.

The binding value is of type short and I am trying to restrict the negative numbers in numeric textbox.

NumericTextBox

answered on 03 Dec 2020

3 answers

1.7K+ views

[Solved] Position of Labels

Hi,

the labels 'Start' and 'End' of the TelerikDateRangePicker are shown over the input controls.

Example Razor page:

@page "/Testsupport1"

<TelerikToolBar>

<ToolBarTemplateItem><label for="cbId">Label1</label></ToolBarTemplateItem>

<ToolBarTemplateItem>

<TelerikComboBox TItem="string" TValue="string" Width="80px" Id="cbId" />

</ToolBarTemplateItem>

<ToolBarButton Icon="refresh">Refresh</ToolBarButton>

<ToolBarTemplateItem>

<label for="ddlId">Label2</label>

</ToolBarTemplateItem>

<ToolBarTemplateItem>

<TelerikDropDownList TItem="string" TValue="string" Id="ddlId" Width="80px"/>

</ToolBarTemplateItem>

<ToolBarTemplateItem>

<TelerikDateRangePicker T="DateTime" />

</ToolBarTemplateItem>

</TelerikToolBar>

Image:https://imgur.com/S0fiwRq

How can I adjust the position of labels and controls?

It is ok to show the labels above, but then for all controls.

Or how can I modify TelerikDateRangePicker to use one line and show the labels before the controls.

Best Regards,

Peter

ToolBar

answered on 03 Dec 2020

3 answers

589 views

[Solved] Component Library

Hello everyone,

Recently I have been working on a project where we wanted build all of our Components in a separate library. When we do this, we get the purple squiggly line stating "Found markup element with unexpected name 'TelerikMenu'. If this is intended to be a component, add a @using directive for its namespace."

This is what we include in our _Imports.razor for the Library itself:

@* Telerik. *@

@using Telerik.Blazor

@using Telerik.Blazor.Components

This is one of our Components - MainMenu.razor:

@namespace Component.Menu

@inherits MainMenuBase

@using ViewModel.MainMenu

<TelerikMenu Data="@MenuItems"

ItemsField="@nameof(MainMenuViewModel.SubMenuList)"

TextField="@nameof(MainMenuViewModel.Name)"

UrlField="@nameof(MainMenuViewModel.Page)"

ImageUrlField="@nameof(MainMenuViewModel.IconUrl)"

IconField="@nameof(MainMenuViewModel.Icon)"

IconClassField="@nameof(MainMenuViewModel.IconClass)"

Orientation="@MenuOrientation.Horizontal" />

When we compile the project, it runs just fine, but we were really looking for a way to make sure these Messages do not show up. It also makes it so Intellisense does not find all of the Parameters available to a Telerik Component.

All C# code is in full Code-Behind and why it is not posted here. The C# has no problems at all with Errors, Warnings, or Messages.

Thank you for your time,

Jesse

General Discussions

answered on 03 Dec 2020

1 answer

826 views

Stacked Bar Chart Legend

I am trying to build a stacked bar chart with a cumulative total split to two values per bar, with the data source coming from multiple items that the cumulative counts are derived. My problem is the legend shows the multiple items and the stack breaks out into multiple color sections rather than the two desired, yet I am not able to locate where this is happening in the code. I used the Stacked Bar Chart demo example to create the chart. Can anyone provide their thoughts or suggestions?

Charts

answered on 03 Dec 2020

2 answers

350 views

Customize scheduler (text)

Hi everybody,

is there a way to set all labels of scheduler component by code? I need a scheduler where the whole text should be changeable independent from current culture (buttons, date and time strings,...)

Thx, Stefan

Scheduler

answered on 02 Dec 2020

4 answers

438 views

Store window definition in separate file?

Hi,

I am using the window as a popup in my grid. Right now the markup is embedded in my grid's razor page. Is there a way to separate this out so that the window markup and/or code is in a separate file?

Thanks … Ed

Window

answered on 02 Dec 2020

1 answer

840 views

Selection on All pages

Hello Marin,

Now i have the following:

<GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.Current">

it woks will with one thing, if i have several pages i need to go to every page to selected the items, is it possible to have everything that we have using GridSelectAllMode.Current, but also select items thought all pages (GridSelectAllMode.All does not fit due to the ignoring filter)?

Thx Alex

Grid

answered on 01 Dec 2020

12 answers

1.8K+ views

There seems to be no way to get the selected text

I am attempting to create a custom tool to add code formatting to selected text. The format command does not work with anything outside the predefined list of drop down options. If I were able to get the selected text I could simply modify that with the wrapping, but it seems there is no way to do that in the Blazor version, unless I am missing something?

Any help would be greatly appreciated.

Editor

answered on 01 Dec 2020

1 answer

162 views

Bug? Inconsistent end edit for a bool column in InCell edit mode

I've found a bit of inconsistent behaviour in the InCell mode that I think is a bug?:

If you click into a column bound to a boolean field, then click on another non-editable cell in the grid, this will not end the edit mode for the boolean column (so, it still shows a checkbox).
Whereas, for a string or date column, if you click into the field and put it into edit mode, then click onto a non-editable area of the grid that will end the edit mode.

I think the second of those behaviours is correct and what a user would expect.

I've attached a gif showing what I mean. I'm on version 2.20.

This is the code for the example in the gif.

@page "/InCell"

@using Telerik.Blazor

@using Telerik.Blazor.Components

Click a cell, edit it and click outside of the cell to see the change.

<br />

<strong>Editing is prevented for the first two items.</strong>

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px" Sortable="true"

OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">

<GridToolBar>

<GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>

</GridToolBar>

<GridColumns>

<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />

<GridColumn Field=@nameof(SampleData.Name) Title="Name" />

<GridColumn Field=@nameof(SampleData.Happy) />

<GridCommandColumn>

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

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

</GridCommandColumn>

</GridColumns>

</TelerikGrid>

@code {

void EditHandler(GridCommandEventArgs args)

{

SampleData item = (SampleData)args.Item;

// prevent opening for edit based on condition

if (item.ID < 3)

{

args.IsCancelled = true;// the general approach for cancelling an event

}

Console.WriteLine("Edit event is fired for column " + args.Field);

}

async Task UpdateHandler(GridCommandEventArgs args)

{

SampleData item = (SampleData)args.Item;

// perform actual data source operations here through your service

await MyService.Update(item);

// update the local view-model data with the service data

await GetGridData();

Console.WriteLine("Update event is fired.");

}

async Task DeleteHandler(GridCommandEventArgs args)

{

SampleData item = (SampleData)args.Item;

// perform actual data source operation here through your service

await MyService.Delete(item);

// update the local view-model data with the service data

await GetGridData();

Console.WriteLine("Delete event is fired.");

}

async Task CreateHandler(GridCommandEventArgs args)

{

SampleData item = (SampleData)args.Item;

// perform actual data source operation here through your service

await MyService.Create(item);

// update the local view-model data with the service data

await GetGridData();

Console.WriteLine("Create event is fired.");

}

// in a real case, keep the models in dedicated locations, this is just an easy to copy and see example

public class SampleData

{

public int ID { get; set; }

public string Name { get; set; }

public bool Happy { get; set; }

}

public List<SampleData> MyData { get; set; }

async Task GetGridData()

{

MyData = await MyService.Read();

}

protected override async Task OnInitializedAsync()

{

await GetGridData();

}

// the following static class mimics an actual data service that handles the actual data source

// replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page

public static class MyService

{

private static List<SampleData> _data { get; set; } = new List<SampleData>();

public static async Task Create(SampleData itemToInsert)

{

itemToInsert.ID = _data.Count + 1;

_data.Insert(0, itemToInsert);

}

public static async Task<List<SampleData>> Read()

{

var happy = false;

if (_data.Count < 1)

{

for (int i = 1; i < 50; i++)

{

happy = !happy;

_data.Add(new SampleData()

{

ID = i,

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

Happy = happy

});

}

return await Task.FromResult(_data);

}

public static async Task Update(SampleData itemToUpdate)

{

var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);

if (index != -1)

{

_data[index] = itemToUpdate;

}

public static async Task Delete(SampleData itemToDelete)

{

_data.Remove(itemToDelete);

}

Grid

answered on 01 Dec 2020