After update to 3.0.0 TextArea autosize no longer works.
AutoSize is no longer one of the available properties.
Also Label is no longer an available property.
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.
I have a telerikdropdownlist in the EditorTemplate of a Grid. If a user uses the keyboard to speed the navigation of the dropdown (for example: they type a T to immediately scroll to the T section), then clicks on a selection further down in the list, the selected item becomes the item navigated to via the Keyboard, not the item that is actually clicked on. Clicking on an item (without using the keyboard navigation first) works as expected. I was able to replicate this behavior in REPL using the following code:
<br />
<br />
<TelerikDropDownList
Data = "@People"
@bind-Value="@SelectedUser"
TextField="LastFirst"
ValueField="Id"
Width="400px"
/>
<br />
<br />
<TelerikGrid
Data="@Assets"
EditMode="GridEditMode.Inline"
Width="800px"
OnUpdate="@Update"
>
<GridColumns>
<GridColumn Field="@nameof(Asset.AssetId)" Title="ID" Width="50px"/>
<GridColumn Field="@nameof(Asset.BarCode)" Title="BarCode" Width="125px"/>
<GridColumn Field="@nameof(Asset.UserId)" Title="User" Width="125px">
<Template>
@{
CurrentAsset = (Asset)context;
Person? p = People.FirstOrDefault<Person>(x => x.Id == CurrentAsset.UserId);
if(p != null)
{
<span>@p.LastFirst</span>
}
}
</Template>
<EditorTemplate>
@{
CurrentAsset = (Asset)context;
<TelerikDropDownList
Data = "@People"
@bind-Value="@CurrentAsset.UserId"
TextField="LastFirst"
ValueField="Id"
/>
}
</EditorTemplate>
</GridColumn>
<GridCommandColumn Width="100px" Locked="true">
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true"></GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
<br />
@code {
public List<Person> People = new();
public List<Asset> Assets = new();
int SelectedUser = 0;
Asset CurrentAsset = new();
protected override void OnInitialized()
{
LoadData();
base.OnInitialized();
}
public void LoadData()
{
People.Add(new Person(1, "Brent", "Tuominen"));
People.Add(new Person(2, "Tina", "Tuominen"));
People.Add(new Person(3, "Casey", "Tuominen"));
People.Add(new Person(4, "Ryan", "Tuominen"));
People.Add(new Person(5, "Alex", "Tuominen"));
Assets.Add(new Asset(1, "BC001"));
Assets.Add(new Asset(2, "BC002"));
Assets.Add(new Asset(3, "BC003"));
Assets.Add(new Asset(4, "BC004"));
Assets.Add(new Asset(5, "BC005"));
}
public void Update(GridCommandEventArgs args)
{
Asset a = (Asset)args.Item;
Asset? asst = Assets.FirstOrDefault(x => x.AssetId == a.AssetId);
if(asst != null)
{
asst.BarCode = a.BarCode;
asst.UserId = a.UserId;
}
StateHasChanged();
}
public class Asset
{
public Asset()
{
}
public Asset(int assetId, string barcode)
{
AssetId = assetId;
BarCode = barcode;
}
public int AssetId{ get; set; }
public string BarCode { get; set; } = string.Empty;
public int? UserId{ get; set; }
}
public class Person
{
public Person(int id, string fName, string lName)
{
Id = id;
FirstName = fName;
LastName = lName;
}
public int Id{ get; set; }
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public string LastFirst
{
get
{
return LastName + ", " + FirstName;
}
}
public string FullName
{
get
{
return FirstName + " " + LastName;
}
}
}
}
Hi,
We are using the Blazor Editor for a feature in one of our web apps, and created a custom tool for the editor that allows the user to modify the raw HTML.
If an IFrame is added to the HTML with an empty or missing "src" attribute like so:
<iframe src=""></iframe>
OR
<iframe></iframe>The editor will throw a JS Interop exception:
No value supplied for attribute src
OP@https://[redacted]/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:6:830821
PP.prototype.computeAttrsWould you guys consider this a bug with the editor? Since they are technically valid elements, mganss' HtmlSanitizer does not remove sourceless IFrames and unfortunately there does not seem to be a way to make it do so.
Thanks in advance for the assistance!
Hi,
Is there a way we could drag the tile on those empty spaces in the tile layout? I've tried the samples in your page and it seems reorderable only reorders the tiles. Is it possible to put an option that we might be able to drag those tiles to the empty spaces instead of dragging them to another tile to switch places? See attached file as reference on what I meant.
.jpg){kind=avatar}
Steps to reproduce:
- On Windows 11, go to Settings > Accessibility > Contrast themes and enable one of the themes (e.g., Aquatic or Desert).
- Try selecting or tabbing through a Blazor Telerik Tree View.
Expected: I should be able to clearly tell what element I'm currently focused on.
Actual: There is no focus indicator.
Not finding any examples or similar, so I wanted to see if there is a way to include a Gantt Chart into a WordsProcessing document. I am currently bringing the data into a table, but my end-user has requested to see the chart view of the same data.
if (JobMilestones.Count > 0)
{
editor.InsertText("MILESTONES").FontWeight = FontWeights.Bold;
Table tblMilestone = editor.InsertTable(JobMilestones.Count + 1, 3);
tblMilestone.PreferredWidth = new TableWidthUnit(720);
Paragraph p = tblMilestone.Rows[0].Cells[0].Blocks.AddParagraph();
tblMilestone.Rows[0].RepeatOnEveryPage = true;
tblMilestone.Rows[0].Cells[0].Borders = tcb;
tblMilestone.Rows[0].Cells[1].Borders = tcb;
tblMilestone.Rows[0].Cells[2].Borders = tcb;
editor.MoveToParagraphStart(p);
editor.InsertText("Task").FontWeight = FontWeights.Bold;
p = tblMilestone.Rows[0].Cells[1].Blocks.AddParagraph();
editor.MoveToParagraphStart(p);
editor.InsertText("Start").FontWeight = FontWeights.Bold;
p = tblMilestone.Rows[0].Cells[2].Blocks.AddParagraph();
editor.MoveToParagraphStart(p);
editor.InsertText("End").FontWeight = FontWeights.Bold;
int x = 1;
foreach (FlatModel fm in JobMilestones)
{
p = tblMilestone.Rows[x].Cells[0].Blocks.AddParagraph();
editor.MoveToParagraphStart(p);
editor.InsertText(fm.TaskTitle);
p = tblMilestone.Rows[x].Cells[1].Blocks.AddParagraph();
editor.MoveToParagraphStart(p);
editor.InsertText(fm.StartDate.ToShortDateString());
p = tblMilestone.Rows[x].Cells[2].Blocks.AddParagraph();
editor.MoveToParagraphStart(p);
editor.InsertText(fm.EndDate.ToShortDateString());
tblMilestone.Rows[x].Cells[0].Borders = tcb;
tblMilestone.Rows[x].Cells[1].Borders = tcb;
tblMilestone.Rows[x].Cells[2].Borders = tcb;
x += 1;
}
editor.MoveToTableEnd(tblMilestone);
//editor.InsertLine("");
editor.InsertBreak(BreakType.LineBreak);
}
Hi,
I need the older version of CSS (2.9.0) for Blazor for telerik. I visited the site as follows but get error:
https://blazor.cdn.telerik.com/blazor/2.9.0/kendo-theme-default/all.css
An error occurred.
Sorry, the page you are looking for is currently unavailable.
Find CSS until 2.22.0. the following link works
https://blazor.cdn.telerik.com/blazor/2.22.0/kendo-theme-default/all.css
Could you fix the link or please provide me the CSS for 2.9.0 ASAP.
Regards
Shuvra
Internally it looks like you are using RadSpreadStreamProcessing for grid.ExportToExcelAsync() if you gave us an optional lamdba to manipulate IRowExporter while you are processing, it would make things a lot easier.
There were a couple other feature requests out there that you closed offering alternatives ways of doing this and we are actually just importing the stream back to RadSpreadProcessing object and then manipulating that way. Adding the Lambda would be a much more efficient way of handling this use case and probably very simple for you to implement.
----
ADMIN EDIT
The Excel export seems to honor it, so it can be used as a workaround.
Reproducible with the workaround commented out:
<TelerikButton OnClick="@CurrentPage">Current Page</TelerikButton>
<TelerikButton OnClick="@AllPages">All Pages</TelerikButton>
<TelerikGrid Data="@GridData"
@ref="@GridRef"
Pageable="true"
Sortable="true"
Resizable="true"
Reorderable="true"
FilterMode="@GridFilterMode.FilterRow"
Groupable="true">
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
</GridExport>
<GridColumns>
<GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
<GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
<GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
<GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
<GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
<GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
</GridColumns>
</TelerikGrid>
@code {
async Task AllPages()
{
ExportAllPages = true;
await Task.Delay(20); // allow the component to rerender with the new parameter
await GridRef.SaveAsCsvFileAsync();
//await GridRef.SaveAsExcelFileAsync(); // this works
}
async Task CurrentPage()
{
ExportAllPages = false;
await Task.Delay(20); // allow the component to rerender with the new parameter
await GridRef.SaveAsCsvFileAsync();
//await GridRef.SaveAsExcelFileAsync(); // this works
}
private TelerikGrid<SampleData> GridRef { get; set; }
List<SampleData> GridData { get; set; }
bool ExportAllPages { get; set; }
protected override void OnInitialized()
{
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
{
ProductId = x,
ProductName = $"Product {x}",
UnitsInStock = x * 2,
Price = 3.14159m * x,
Discontinued = x % 4 == 0,
FirstReleaseDate = DateTime.Now.AddDays(-x)
}).ToList();
}
public class SampleData
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int UnitsInStock { get; set; }
public decimal Price { get; set; }
public bool Discontinued { get; set; }
public DateTime FirstReleaseDate { get; set; }
}
}
Currently when setting up a new Blazor app I need to go to the docs each time or look at a reference project to remember the resource paths for the CSS files. Additionally once you have a project if you are relying on a CDN but later update the NuGet package your app will be referencing the wrong css bundle unless you remembered to also update your layout.
Instead of having this as a magic string that is required in each project, it would be great if a new helper class could be introduced. As an example it might look something like:
public class TelerikResources
{
public class Cdn
{
public class Default
{
public string Path = "";
}
public class Bootstrap
{
public string Path = "";
}
public class Material
{
public string Path = "";
}
}
public class Local
{
public class Default
{
public string Path = "";
}
public class Bootstrap
{
public string Path = "";
}
public class Material
{
public string Path = "";
}
}
}
This would have the benefit that in the layout you might simply have:
<link href="@TelerikResources.Cdn.Bootstrap.Path" rel="stylesheet" />
This has a few benefits. It's easier to remember, easier to discover the other available prebuilt styles, and removes issues with pointing at the wrong path after updating library versions (assuming that you're using the Cdn rather than local resource).
Hello, I would like to have a mutiselect dropdown like you have for ajax:
https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx
Syncfusion and radzen have this support for blazor :
https://blazor.syncfusion.com/demos/multiselect-dropdown/checkbox?theme=bootstrap5
https://blazor.radzen.com/dropdown
I know that you have a proposed solution for the MultiSelect component:
But the design of this one is not what I'm after, the box still expands downwards when selecting multiple items and it makes it hard to design a coherent page that does not make the dom "jump around". Also the implementation is cumbersome for more complex objects .
It would be better with a solution like you have for ajax where it just shows the first items that fits and then "+X items".
Hi!
I'd like to request a method "Select" or similiar for input controls. The goal is to select the content of the input control through the component reference.
Hello,
I would love to see an auto sizing for a TileLayoutItem. Specifically, in my case, the RowSpan. I feel like this would make a great addition as a parameter in the future as (also AutoSizeColumn would be nice)
<TileLayoutItem AutoSizeRow="true"></TileLayoutItem>I am working on an application that has dynamic data displayed within the TileLayoutItem. In my current implementation, I'm going through a process of attempting to calculate for resizing the RowSpan. The calculations are based on an inner body div that holds an id, finds the parent k-tilelayout-item and then the the k-tilelayout itself. I can't positively say my math is perfect but it (mostly) gets the job done. Keeping in mind that I have created other altered other areas of the TileLayout as well, specifically setting the TelerikTileLayout grid to autofit.
For an idea of what I am currently doing as a means of possibly finding a (better) way to implement this in the future, this is the long ugly javascript code I have that is used to gather a minimum size and return it to blazor via JsInterop.
function (tileId, minSpanSize = 4) {
try {
var el = document.getElementById(tileId);
var tileLayout = $(el).closest(".k-tilelayout")[0];
var parentTile = $(el).closest(".k-tilelayout-item")[0];
var headerHeight = $(el).parent().siblings(".k-tilelayout-item-header")[0].offsetHeight;
var parentSpan = parseInt(parentTile.style.gridRowEnd.split("span ")[1]);
var gap = parseInt(tileLayout.style.gap.replace("px", ""));
var rowHeight = parseInt(tileLayout.style.gridAutoRows.split(",")[1].split("px")[0]);
// cannot recall where I got 1.25 from
var minSize = Math.ceil((headerHeight + el.offsetHeight) / ((gap / 1.25) + rowHeight));
// if parent is less than minsize
if (parentSpan < minSize) {
parentTile.style.gridRowEnd = "span " + minSize;
return { id: tileId, minSize: minSize };
// Otherwise, if min size is greater than or equal to minSpanSie
} else if (minSize >= minSpanSize) {
parentTile.style.gridRowEnd = "span " + minSize;
return { id: tileId, minSize: minSize };
}
} catch { }
return { id: tileId, minSize: -1 };
After the upgrade to 3.0 the auto size feature of TextArea when used inside the Window component no longer works.
I just updated to Telerik.UI.for.Blazor 2.30.0 and the grid search boxes look a little screwy. Not a huge deal but thought I would report it.
Consider the following Blazor markup:
This will be rendered as a disabled HTML button with the class k-disabled. If a malicious user edits the DOM to remove the disabled attribute and said class, the button will become enabled. If the user then clicks the button, the registered OnClick EventCallback gets executed, even though Enabled is set to false.
Telerik-REPL link https://blazorrepl.telerik.com/QcumwJPA47xzAake54
Here is a JavaScript function that can be used to enable the disabled button (please make sure to use the correct JavaScript context when using it inside the Browsers DevTools):
}
We are not sure if this can be considered a bug or if the registered OnClick EventCallback is supposed to make sure the button is enabled. It would, however, make sense for a Blazor Server environment if the TelerikButton component would check its Enabled state before triggering the EventCallback.
It would be great if the controls supported arbitrary attributes. Similar to how it is done in the native form editing controls in Blazor framework.
ASP.NET Core Blazor forms and validation
"All of the input components, including EditForm, support arbitrary attributes. Any attribute that doesn't match a component parameter is added to the rendered HTML element."
<input class="form-control" readonly="@(!EditMode)" type="text" @bind="@FormField.TextValue"/>As far as I can tell none of the Telerik input controls support a read only mode. Putting the same attribute on TelerikDropDownList for instance (not surprisingly) results in this: