Hi,
Can I request that the Pdf Viewer:
- Load multiple pdf files on open. Maybe via an array of file names.
- We use a different viewer due to this capability. For Human Resource files you need the ability to load numerous files into one viewer to show a complete
document. The current one file option doesn't work for us.
- Display thumbnails of the loaded pages.
- Thumbnail onclick to move to a specific page.
Regards,
Graham O'Riley
Steps to reproduce:
- Insert a simple TelerikGrid on your page
- Add Columns with templates for each property
- Specify a Column Template
See https://blazorrepl.telerik.com/GyPvFMFr00zLEEdG00
Problem / Inconvenience
- Context has to be converted/cast before access to the each property is possible
- Grid columns are not generic which makes them hard to use sometimes
- Fields have to be specified by name (may lead to wrong names after changing)
Solution / Feature Request
- Provide new generic columns (to ensure no current implementations break)
- Add [CascadingTypeParameter(nameof(TItem))] to the TelerikGrid
- GridColumns automatically "inherit" the typeparam TItem
Idea from: Blazor QuickGrid
Benefits
- GridColumns can be specified with Expression
- Template context does not have to be cast anymore
- Renaming properties affect expression or an error is display (property does not exist)
<GridColumn For="@(t => t.Name)">
<Template>
<div>
@item.Name
</div>
</Template>
</GridColumn>
I generated a new project using the Telerik Blazor Template for server side.
In the _Host.cshtml file on line 27 it generates the following:
<a href class="reload">Reload</a>Should be
<a href="" class="reload">Reload</a>Have a nice day.
Peter
For example, selecting Bootstrap-Main-Dark theme in the Project Wizard does not apply the dark mode.
===ADMIN EDIT===
For the time being, a possible workaround is to manually add class="k-body" to the <body> tag of your application. This will ensure, that the dark mode is correctly applied. This is required because, by design, the Default theme does not enable the typography system. The "k-body" class is required for the typography system to work properly on the document level and apply the predefined typography values to the page. For more detailed information, refer to Design System Documentation.
I am handling the SelecteditemsChanged event of the Grid and when an exception is thrown in its handler, the ErrorBoundarydoes not catch it.
For reference, I tried attaching the same handler to a click of a button and it is successfully caught by the ErrorBoundary in this case.
Further to issue reported in https://feedback.telerik.com/blazor/1545177-selected-items-are-not-preserved-when-loading-the-state-when-the-component-is-bound-to-expandoobjects wrt Expando Object, the column menu reset also does not work when grid is bound to Expando Object
Regards
Naved
When filtering or editing a Grid with enum data, the Name property of their Display parameter is respected.
However, in the initial view mode of the Grid the Name property is not applied and the enum values are rendered regardless of whether or not their Display parameter has a Name property defined.
==========
ADMIN EDIT
==========
In the meantime, a workaround you might try is to create a custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name.
You can then use a Template for the column that uses enum data, cast its context to the model you are using and invoke the method on the field containing the enum. The sample below demonstrates how you can achieve this.
@using System.ComponentModel.DataAnnotations
@using System.Reflection
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
OnUpdate="@UpdateHandler" FilterMode="@GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridColumn Field=@nameof(SampleData.Role) Title="Position">
<Template>
@{
var currentEmployee = context as SampleData;
var currentRole = GetDisplayName(currentEmployee.Role);
}
@currentRole
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
//custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name
public string GetDisplayName(Enum val)
{
return val.GetType()
.GetMember(val.ToString())
.FirstOrDefault()
?.GetCustomAttribute<DisplayAttribute>(false)
?.Name
?? val.ToString();
}
public void UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
//update the view-model
var index = MyData.FindIndex(i => i.ID == item.ID);
if (index != -1)
{
MyData[index] = item;
}
//perform actual data source operations here
}
//model and dummy data generation
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
public Role Role { get; set; }
}
public enum Role
{
[Display(Name = "Manager")]
ManagerRole,
[Display(Name = "Employee")]
EmployeeRole,
[Display(Name = "Contractor")]
ContractorRole
}
public List<SampleData> MyData { get; set; }
protected override void OnInitialized()
{
MyData = new List<SampleData>();
for (int i = 0; i < 50; i++)
{
MyData.Add(new SampleData()
{
ID = i,
Name = "name " + i,
Role = (Role)(i % 3) // just some sample to populate initial values for the enum
});
}
}
}
Hi Team,
I am looking for captcha component to verify user as human like below screenshot. Please let me know if this feature is available
Would be nice to have an Expansion Panel like this one:
https://material-ui.com/components/expansion-panels/
I get validation issues for the selection Checkboxes and the PageSizes dropdown as they do not have id or name attributes:
The behavior can be reproduced in the online demo: Blazor Data Grid - Overview
Accessibility Insights for Web extension is flagging the k-grid-filter icon in the Grid Header labels. Need workaround and remove the aria-label and replace with aria-role per guidance. Under each of the red explanation marks is the filter icon on the column. Running the Accessibility Insights for Web tool by Microsoft using Edge browser flags this code.
Please provide temporary workaround and permanent fix.
Blazor-UI 2.30 Release.
Hi,
We use compact sized grid all the time in our application.
However, with sorting and filtering enabled, the icons take too much space in the header cell and make the actual header text hard to read.
Please consider scale down those icons and reduce padding.
Thanks and best regards,
Peili
Demo: https://blazorrepl.telerik.com/mSOIQZvO51cwrorJ49
===ADMIN EDIT===
To reduce the size of the icons and the font in a Compact Grid, you can follow the approach from the knowledge base article How to make Compact Grid elements smaller.
The sort order for some strings should be in natural sort order.
1.10 -> 1.13 should be following 1.9 in this example.
Hi Telerik Team,
when using the (currently) latest versions of VS (17.11.0) and Blazor 8.0.8 runtimes (and custom css theme version 8.2.0) I get the following error when running my project in debug mode:
TypeError: Cannot read properties of null (reading 'classList')
Stapelüberwachung:
> at e.addClass (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1122923)
> at v.resetCallout (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372516)
> at v.adjustCalloutPosition (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372355)
> at e.invokeComponentMethod (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1112736)
> at https://localhost:7038/_framework/blazor.webassembly.js:1:2878
> at new Promise (<anonymous>)
> at b.beginInvokeJSFromDotNet (https://localhost:7038/_framework/blazor.webassembly.js:1:2835)
> at Object.vn [as invokeJSJson] (https://localhost:7038/_framework/blazor.webassembly.js:1:58849)
> at https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:178428
> at Ll (https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:179262)
It looks like the problem has something to do with a function that wants to set the css "k-callout-e" class to some object.
The problem appears in js when e is null in the following method:
e.classList.add(t)
In this case e = null and t = "k-callout-e". It seems there's no null check for e and VS 2022 reports the problem.
The debugger in VS cannot be disabled for js content as it seems it's the same debugger for Blazor itself.
When hitting F5 to continue multiple times the projects keeps running until it hits the same problem again.
In my project I added a single "TelerikTooltip" component for Tooltips. I tried disabling it but still the same problem.
Maybe the js code is used for some other component.
If you need more information just let me know.
Regards,
Tom
Using Microsoft Visual Studio Professional 2022 (64-bit) - Current Version 17.11.0
Trying to create a new Telerik for Blazor project using Telerik C# Blazor Application Template.
Visual Studio freezes after I Name the project and click create. Only way to exit out of Visual Studio is to kill it through task manager.
Trying your project walk through for Blazor, RpsTrackingBlazor, After I add the nuget packages and try to add the using statement to _imports.razor as in the tutorial I get the error that the type or namespace name telerik could not be found.
Your project uses <TargetFramework>netcoreapp3.1</TargetFramework>
I also tried framework net8.0
We would like to have in our app Charts the same functionality that you have in StockCharts.
Navigator:
https://docs.telerik.com/blazor-ui/components/stockchart/navigator
Crosshairs:
https://docs.telerik.com/blazor-ui/components/stockchart/crosshairs