Questions on UI for Blazor Forum

5 answers

1.2K+ 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.3K+ 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.5K+ 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

3.0K+ 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

answered on 24 Apr 2020

2 answers

1.0K+ views

ref null if grid is inside a window

Hi

I've put the grid inside a modal window

All works but I cannot get the ref to the grid: I get null.

Is it correct ?

I need to put a filter by code when I show the window modal with grid

tnx

Grid

answered on 23 Apr 2020

2 answers

432 views

Programmatically create row item/model

I use a MVVM approach to populate the Grid. The rows are actually viewmodels keeping state. They have no parameterless constructor, they are created by factory methos using injected services. The Grid creates the item before assigning it to the event args passed to the handler method.

In my case "No parameterless constructor defined for type '...' is thrown. How can I have control on the creation of my row models?

Grid

answered on 23 Apr 2020

5 answers

426 views

Errors after upgrade

After upgrade to 2.10.0, the ComboBox control with OnRead event, I get the error:

Uncaught (in promise) Error: System.ArgumentException: There is no event handler associated with this event. EventId: '38'. (the number differs between errors)
The page "blinks" and the control fills with an empty Guid (SelectedPersonId type)
The post to the server is performed correctly
This worked with 2.9.0

js:
<script src="https://kendo.cdn.telerik.com/blazor/2.10.0/telerik-blazor.min.js" defer></script>

razor:
<TelerikComboBox Data="PersonSearchResult"
OnRead="@SearchPersons"
Filterable="true"
TextField="FullName"
ValueField="Id"
@bind-Value="SelectedPersonId"
Width="400px">
</TelerikComboBox>

and cs:

private async Task SearchPersons(ComboBoxReadEventArgs args)
{
if (args.Request.Filters.Count > 0)
{
var filter = args.Request.Filters[0] as FilterDescriptor;
var search = filter.Value.ToString();
if (search.Length >= 2)
{
PersonSearchResult = await Post<List<PersonModel>>("api/person/person-search", search, true);
}
}
}