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 would like to have a Expand/Collapse All Grid Groups button in the Grid Header. I know this is possible to do so programmatically outside of the grid but my users want it inside the Grid.
Thanks,
Humayoon
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.
It would be great if touch support could be added to the Blazor carousel component, to make it possible to swipe left and right on mobile devices. Presumably it would also drag left and right with a mouse on laptop/desktop machines.
At the moment the component isn't really usable on a modern website as it does not behave as users expect on mobile devices such as phones and tablets.
Hello there,
I encountered an issue with the TelerikForm component after upgrading Telerik.UI.for.Blazor from version 4.0.1 to 4.4.0. In the code below I have placed the two form items in a Bootstrap grid:
<TelerikForm Model="@person">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<div class="row">
<div class="col-md-6">
<FormItem Field="@nameof(Person.Id)" LabelText="Id"></FormItem>
</div>
<div class="col-md-6">
<FormItem Field="@nameof(Person.FirstName)"
EditorType="@FormEditorType.TextArea"
LabelText="First name">
</FormItem>
</div>
</div>
</FormItems>
</TelerikForm>With version 4.0.1, the two fields were displayed in two columns within the form element. However, with version 4.4.0, I noticed that the HTML code, specifically the div elements, are now rendered outside of the form element. The HTML structure looks like this:
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<form class="k-form telerik-blazor k-form-md" dir="ltr" style="">
<div class="k-form-field">
<label class="k-label k-form-label" for="a6cc8103-4d52-4377-8656-169e4a3de33a">
Id
</label>
<div class="k-form-field-wrap">
......I wanted to check with you if this change is intentional or if it might be a bug with the TelerikForm component in the latest version.
Best regards,
Ivaylo
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.
.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.
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?
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);
}
}
}
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]'.
<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.
Hello there,
I encountered an issue with the TelerikGrid component. This started to be an issue from version 4.1.0 and can be reproduced from here:
If this line from the example:
<GridColumn Field=@nameof(SampleData.Name) Title="Name" /><GridColumn Field=@nameof(SampleData.Name) Title="Name" Visible="@!isVisible">
<Template>
@((context as SampleData).Name)
</Template>
</GridColumn>you can see that once the template GridColumn is shown, its data overwrites the data of the "Hire Date" column when toggling the visibility of the columns. The header of the column is changing but the data stays the same.
To provide a visual context of the issue, I have attached a video.
Best regards,
Ivaylo
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. For a start, 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.
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 what is your major challenge with the current TelerikRootComponent setup.
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
I want to use a token to access the Telerik NuGet feed for my CI/CD builds, instead of using credentials.
---
ADMIN EDIT
At the moment, the options for that are:
- Have an account in your company that is assigned a license and is used for builds. A trusted human developer can also use it to access the components and do their daily work. They should make sure to not change their password, or to notify the people who can update it in the secrets in the CI/CD pipeline immediately.
- Make your own private nuget feed and ensure the Telerik packages you want in it are available there. It can be as simple as a network location internal to your company. Make sure that this feed is not publicly available, however. When you need to upgrade, make sure to copy the new packages to that feed too so automated builds can access them.
You can read more details and some troubleshooting tips in the CI and CD Automated Builds section of our documentation.
The goal of this request is to provide a way to detach the user credentials from the builds so that they can use their accounts freely, and only provide necessary keys to the build pipeline, and those keys can be updated/revoked as needed. This would also avoid manual work on downloading and copying new nuget packages to a custom feed.
---