In
<FilterMenuTemplate Context="context">
<TelerikCheckBoxListFilter Data="@NameOptions"
Field="@(nameof(NameFilterOption.Name))"
@bind-FilterDescriptor="@context.FilterDescriptor">
</TelerikCheckBoxListFilter>
</FilterMenuTemplate>
I would like to have a DisplayField or TextField so that i can show the user something meaningful, while still filtering based on IDs behind the scenes?
More details on the concept for custom data: https://docs.telerik.com/blazor-ui/components/grid/filter/checkboxlist#custom-data
The feature request is to be able to define different focused date for the calendar in the picker. The datepickers currently provide automatic focused date based on the selection:
- DateTime.Now if no selection is made
- Selected Date
It is impossible to customize the Text and Icon for the Telerik Upload Blazor Component. It always sans "Select Files". This is not easy to see at a glance.
Requests:
- Add a Title attribute to the upload component that lets you change the text from the default "Select Files".
- Add the ability to set the Icon on the upload button.
Proposed Code:
<TelerikUpload Title="Upload Files" Icon="@SvgIcon.Upload" ... />I had to write some hacky JavaScript interop to accomplish this:
function setTelerikUploadButtonText(text) {
// Finds all the telerik blazor upload components on the page and changes the text of the upload button.
let replaced = 0;
const defaultText = "Upload";
// Find all the buttons with class "k-upload-button". There should be one for each upload component.
const buttons = document.getElementsByClassName("k-upload-button");
for (let i = 0; i < buttons.length; i++) {
// Find the span with class "k-button-text" and change its text.
const spans = buttons[i].getElementsByClassName("k-button-text");
if (spans.length > 0) {
// Add horizontal padding to the span.
spans[0].classList.add("px-2");
// Change the text.
spans[0].innerHTML = text ?? defaultText;
// Insert a font awesome icon.
spans[0].insertAdjacentHTML('afterbegin', '<i class="fas fa-upload"></i> ');
// Track how many buttons were updated.
replaced++;
}
}
console.info("setTelerikUploadButtonText: " + replaced + " buttons updated.");
return replaced;
}/// <summary>
/// Finds all the telerik blazor upload components on the page and changes the text of the upload button.
/// </summary>
/// <returns>The number of upload components button text that were found & replaced.</returns>
public static async Task SetTelerikUploadButtonText(this IJSRuntime jSRuntime,
string text = "Upload Files")
{
await jSRuntime.InvokeVoidAsync("setTelerikUploadButtonText", text);
}
Screenshot:
Hi,
I noticed that using left or right arrow to position yourself between typed text does not work anymore in the GridSearchBox. Neither does SHIFT+left for selecting parts of typed text. Home or End key is also not working.
In previous versions this was still possible.
Can be estabished on the demo pages as well:
https://demos.telerik.com/blazor-ui/grid/searchbox
Thanks,
Tom
Is there any scope to add a Blazor Ranged Bar/Column Chart component as seen in other products:
- Telerik Web Forms Range Column Chart - RadHtmlChart - Telerik UI for ASP.NET AJAX
- Demo of core features in jQuery Range Bar Charts widget | Kendo UI for jQuery (telerik.com)?
We attempted to work around this by adding an invisible stacked series underneath our dataset. However, without the Ability to customize the highlighted/hovered series item (telerik.com), we are not able to effectively hide the invisible series from the user. We will have to fall back into the jQuery Kendo UI components once again. Alternatively, are there any other known work arounds to achieve this in Blazor?
This public feature request:
- Explains how the TelerikRootComponent works.
- Outlines the problems of the current software design in static .NET 8 Blazor apps.
- Measures customer demand for a major change that may possibly resolve the current limitations.
How the TelerikRootComponent Works
Historically, the TelerikRootComponent was designed with the following purposes:
- To host and render all Telerik Blazor popups as RenderFragments. This means that all popups are rendered where the TelerikRootComponent is defined in the application's component hierarchy. In most cases, correct popup position requires the TelerikRootComponent to wrap all the content on the web page. Otherwise the correct position is not guaranteed and this is documented. In addition, the TelerikRootComponent instance is a CascadingValue, which allows it to collect all popup RenderFragments.
- The TelerikRootComponent exposes parameters for global application-wide Telerik settings, such as icon type or RTL support. This is another reason why it makes sense to have a single TelerikRootComponent that wraps all the page content.
Problems and Limitations in .NET 8 Blazor Static Apps
.NET 8 Blazor apps with "Per Component" interactivity location create a big challenge for the above state of affairs:
- Cascading values do not pass across render mode boundaries. .NET 8 includes a new feature for passing cascading values to interactive components (builder.Services.AddCascadingValues()), but this mechanism does not support passing of RenderFragments, because they are not JSON serializable. This brings the requirement that the TelerikRootComponent is part of an interactive component hierarchy.
- When the TelerikRootComponent is in a non-layout .razor file, it triggers more re-renders than normally. They are related to internal MediaQuery instances and all popups, which the root component manages.
So, developers who work with a globally static app with specific interactive components ("islands of interactivity") may need to:
- Place the TelerikRootComponent somewhere inside the component hierarchy, so it can't wrap all the page content. This will lead to wrong popup position.
- Use multiple TelerikRootComponents. This requires to define the same parameters for each TelerikRootComponent instance.
Next Steps
All developers who develop static .NET 8 Blazor apps with "Per Component" interactivity location:
- Please vote for this feature request, so that we can measure how many customers are affected by the described limitations.
- Post here and describe:
- Why do you need to use apps with "Per Component" interactivity.
- Your specific challenges with the current TelerikRootComponent setup.
_close_crop.png){kind=avatar}
A basic Menu control is one of the most fundamental common controls .... Why was it not included in the first release of UI for Blazor???
How about a basic fundamental Menu control in the UI for Blazor? If not now, when?
If filtering is enabled, the error may prevent the view from rendering similar to NotImplementedException: Unexpected frame type during RemoveOldFrame: None.
Without filtering, an exception is thrown when you attempt to edit a field, similar to Error: System.InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Nullable`1[System.Int64]'.
I saw that DropDown TreeList is already in the to-do list, but I would like to even extend it by adding MultiSelect feature to it
So basically add MultiSelect but with TreeList inside
Regards
Andrzej
.png){kind=avatar}
Hello
The column group headers functionality is great, however it messes with the export to excel/csv, as the headers no longer align on the 1 row.
Just seeing if there was a way to export to csv/excel but ignore the column group headers? Maybe a feature on the <GridCsvExport ExportGroupHeaders=false /> option?
Or is there a way to turn off column group headers programmatically? Then this could be removed then readded on the events; OnBeforeExport, OnAfterExport
Cheers
Phil
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true" Title="Some text here">Some text here</GridCommandButton>Update and Cancel GridCommandButtons do not honor Caption when using PopUp edit forms.
The "Some text here" will show up as name of button in Inline editing but not in Popup form editing where the default Save button will instead be shown.
.jpg){kind=avatar}
We need this existing control in a Blazor based control:
https://www.telerik.com/aspnet-core-ui/skeleton-container
We'll need to fall back to MudBlazor who does support this control.
We are existing licensed users under AVEVA.
Telerik.DataSource.Extensions ToDataSourceResultAsync (https://docs.telerik.com/blazor-ui/api/Telerik.DataSource.Extensions.QueryableExtensions) should support Cancellation token as well as https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.Extensions/QueryableExtensions.
It would be useful.
Greetings,
I am curious if you intend on offering any means of control for the height of an appointment cell within the scheduler. For us it is in the Timeline view with Resources. I have downloaded the source code and implemented the functionality myself and am willing to share my changes. It ultimately performs three functions:
1. Creates a new parameter on the SchedulerTimeViewBase.cs so that it is end user facing.
2. Alters the code in the ContentTableBase.cs to assign the AllDayAppointmentOuterHeight property with this new parameter's value (plus 1).
3. Alters the AppointmentRendererBase.cs to assign the AllDayAppointmentHeight property with this new parameter's value.
Additional changes are necessary to the Models and Interfaces.
We have used the JS version of this for several years and need the additional real estate on the scheduler. This is the only means that I could figure to alter the height as the position of the cells and resource rows are computed on the back end. Any alterations using a CSS class during OnItemRender will produce cells that overlap each other and/or overflow to subsequent rows.
All I ask is to give a way to have a proper working datepicker. Like your javascript datepickers. That doen't care only for right values but for the person that uses it. Telerik was an early adopter in the Blazor ecosystem, I don't know how they haven't yet fixed their datepickers.
You can do this with many ways. I don't know them all but I will propose some here.
- Create a second datepicker component that works properly.
- Put an attribute in the component to work with free-text
- Maybe if this attribute is on you can switch behind between 2 different components
- Find a other solution of your own.
In the end behind the scenes you shouldn't bind the datepicker input in the datetime property but to a sting one. DevExtress has done this right.
This will solve
- Proper user expirience when a user uses the keyboard to edit dates
- Copy-Paste issue
- Clear date parts issue
- all from 30/4/2022 to edit to 31/5/2022 with out having to clear the input
- Strange editing of years (I have an example in the end)
- Allow to have dots or what ever the users want between dates numbers. (e.x. 13.3.2022 )
I this is a trade-off and you will have senarios with wrong inputs and other things, but you already know them from the javascript world, and it's less importand than the aboves.
*Strange editing of years
Lets say that we have the year 1998 19and we want to put 2014.
the users See
-> 1/1/1998
-> 1/1/9982
-> 1/1/9820
-> 1/1/8201
-> 1/1/2014
That's not user friendly, and is very disturbing.
following you can see a my code sample .how we can edit cell without loading grid .
@using System.ComponentModel.DataAnnotations
<TelerikButton ThemeColor="primary" OnClick="@SetGridGroup">Group</TelerikButton>
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px"
OnUpdate="@UpdateHandler"
OnEdit="@EditHandler"
OnDelete="@DeleteHandler"
OnCreate="@CreateHandler"
OnCancel="@OnCancelHandler"
Groupable="true">
<GridToolBarTemplate>
<GridCommandButton Command="Add" Icon="@FontIcon.Plus">Add Employee</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
<GridColumn Field=@nameof(SampleData.FirstName) Title="Name" />
<GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" />
<GridColumn Field=@nameof(SampleData.Team ) Title="Team" />
<GridCommandColumn>
<GridCommandButton Command="Delete" Icon="@FontIcon.Trash">Delete</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
async Task SetGridGroup()
{
GridState<SampleData> desiredState = new GridState<SampleData>()
{
GroupDescriptors = new List<GroupDescriptor>()
{
new GroupDescriptor()
{
Member = "Team",
MemberType = typeof(string)
},
},
// choose indexes of groups to be collapsed (they are all expanded by default)
CollapsedGroups = new List<int>() { 0 },
};
await Grid.SetStateAsync(desiredState);
}
void EditHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// prevent opening for edit based on conditionif (item.ID < 3)
{
args.IsCancelled = true;// the general approach for cancelling an event
}
Console.WriteLine("Edit event is fired.");
}
async Task UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
await MyService.Update(item);
await GetGridData();
Console.WriteLine("Update event is fired.");
}
async Task DeleteHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
await MyService.Delete(item);
await GetGridData();
Console.WriteLine("Delete event is fired.");
}
async Task CreateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
await MyService.Create(item);
await GetGridData();
Console.WriteLine("Create event is fired.");
}
void OnCancelHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
Console.WriteLine("Cancel event is fired. Can be useful when people decide to not satisfy validation");
}
public class SampleData
{
publicint ID { get; set; }
[Required]
public string FirstName { get; set; }
public string LastName { get; set; }
public string Team {get;set;}
}
public List<SampleData> MyData { get; set; }
async Task GetGridData()
{
MyData = await MyService.Read();
}
protected override async Task OnInitializedAsync()
{
await GetGridData();
}
publicstaticclassMyService
{
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);
}
publicstaticasync Task<List<SampleData>> Read()
{
if (_data.Count < 1)
{
for (int i = 1; i < 50; i++)
{
_data.Add(new SampleData()
{
ID = i,
FirstName = "Name " + i.ToString(),
LastName = "Last Name " + i.ToString(),
Team="Team" +(i%5).ToString()
});
}
}
returnawait 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);
}
}
}