Questions on UI for Blazor Forum

1 answer

158 views

Getting an exception as soon as I add an EditMode

I have a very simple datagrid. I'm brand new to Telerik and Blazor.

My grid works until I add in the EditMode enum.

I get a null reference exception on my _Host.cshtml file at this line:

1.<component type="typeof(App)" render-mode="ServerPrerendered" />

Below is my whole .razor page.

01.@page "/crud"

02.

03.@using Portal.Data

04.@using Microsoft.Extensions.Logging;

05.

06.@inject LicenseService licenseService

07.@inject ILogger<LicenseInfo> MyLogger

08.

09.<h1>Crud</h1>

10.

11.<TelerikGrid Data="@licenseData"

12. AutoGenerateColumns="true"

13. EditMode="@GridEditMode.Popup">

14.</TelerikGrid>

15.

16.@code

17.{

18. private List<Portal.Data.Licenses> licenseData { get; set; }

19.

20. private async Task<List<Licenses>> GetLicenseData()

21. {

22. var licenseData = await licenseService.GetLicensesAsync();

23. return licenseData;

24. }

25.

26. protected override async Task OnInitializedAsync()

27. {

28. try

29. {

30. licenseData = await GetLicenseData();

31. }

32. catch (Exception ex)

33. {

34. MyLogger.LogError(ex.Message);

35. }

36. }

37.}

Grid

answered on 30 Apr 2020

1 answer

303 views

auto close and multiselect

Hi, is there any plan to support multi selection without closing list? Current behaviour is closing list after selecting 1 item.

Regards

Konrad

MultiSelect

answered on 30 Apr 2020

3 answers

903 views

Modal on Modal

Hi

I need to use a modal window with a grid inside that

But I need to show a modal window on error when I edit items on grid

Modal on Modal not work: the second window is not visible.

Any solution ?

Tnx

Window

answered on 28 Apr 2020

1 answer

187 views

User-defined Columns

I would like to allow the user to add columns at runtime and inline edit the column header text. Is this possible?

Grid

answered on 28 Apr 2020

5 answers

1.1K+ views

How to get id

In the example at the bottom of https://docs.telerik.com/blazor-ui/components/autocomplete/events,

How would I get the id of the selected car in the Change event? Seems like all I get is the string value.

Thanks … Ed

AutoComplete

answered on 27 Apr 2020

1 answer

1.2K+ views

Blazor Menu - AuthorizeView

How do I integrate Authentication/Authorization with the TelerikMenu for Blazor? I don't see any options.

I'd like to allow on certain menu items based on user authentication. Like this:

<AuthorizeView>
<Authorized>
<NavLink class="list-group-item list-group-item-action bg-light"
href="/" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
<NavLink class="list-group-item list-group-item-action bg-light"
href="/employeeoverview">
<span class="oi oi-list-rich" aria-hidden="true"></span> Employees
</NavLink>
<NavLink class="list-group-item list-group-item-action bg-light"
href="/employeeedit">
<span class="oi oi-list-rich" aria-hidden="true"></span> Add new employee
</NavLink>
<NavLink class="list-group-item list-group-item-action bg-light"
href="Logout">
<span class="oi oi-list-rich" aria-hidden="true"></span> Log out
(@context.User.Claims.FirstOrDefault(c => c.Type
== "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name")?.Value)
</NavLink>
</Authorized>
<NotAuthorized>
<NavLink class="list-group-item list-group-item-action bg-light"
href="Login">
<span class="oi oi-list-rich" aria-hidden="true"></span> Log in
</NavLink>
</NotAuthorized>
</AuthorizeView>

Menu

answered on 27 Apr 2020

7 answers

2.4K+ views

Dynamically setting PageSize based on Grid Height

Marin:

I'm able to size the grid based on the Viewport height, but having done that I want to set the Grid PageSize property so that the number of rows per page roughly consumes the available vertical space-- in other words I'm trying to avoid the vertical scroll bars appearing on the grid because it's displaying more rows than will fit in visible grid height. Presumably something like GridHeight / GridRowHeight would equal the optimal PageSize, but my experiments trying to get the RowHeight didn't work. Can you provide an example of how to do it?

BONUS Question: How can I embed line returns in a string that will be displayed as a line break in the grid? ('\n' doesn't work for me)

<div style="margin: 0;padding: 0;border-width: 0; height: 95vh;">

<TelerikGrid Data="@MyData" Height="100%"

Pageable="true"

Resizable="true">

<GridColumns>

<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />

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

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

<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />

</GridColumns>

</TelerikGrid>

</div>

@code {

public IEnumerable<SampleData> MyData = Enumerable.Range(1, 200).Select(x => new SampleData

{

Id = x,

Name = "Name " + x + "\nNext Line",

Team = "team " + x % 5,

HireDate = DateTime.Now.AddDays(-x).Date

});

public class SampleData

{

public int Id { get; set; }

public string Name { get; set; }

public string Team { get; set; }

public DateTime HireDate { get; set; }

}

Grid

answered on 27 Apr 2020

3 answers

1.5K+ views

UTC DateTimes as local DateTimes, and vice versa

Hi, I have a question regarding the handling of UTC DateTime values in the Grid and DateTime Picker components.

In our C# code and database, all date and time data is in UTC. Is it currently possible to:

Have UTC DateTime values displayed in the Telerik Grid according to the the user's local culture?
Have values selected by the user via DateTime Picker be converted to UTC?

Two examples:

A Grid column binded to a UTC DateTime value 2020/20/04 15:00 will display as 20/04/2020 16:00 for users in the UK
If 16:00 is selected in the DateTime Picker by a UK user during daylight saving time, 15:00 is the time that is actually stored

Thanks in advance!

General Discussions

answered on 24 Apr 2020

1 answer

2.9K+ views

Component inside tab with @ref results in null

I have a child component that I would like to access from parent so i put @ref="myChild", when this control is inside a tab strip, the reference to myChild is always null, however if i move the component outside of tabstrip then everthing works as expected. I am using 2.10 trial

TabStrip