Unable to insert the html in editor using inbuilt HtmlCommandArgs feature provided by the Editor. It only inserts the first element. Tried to wrap the entire html in a div but it doesnt work.
The sample code is below.
@page "/editor/overview"
@using Telerik.Blazor.Components.Editor
<TelerikEditor @ref="Editor" @bind-Value="@Value"
Tools="@Tools"
Height="880px">
<EditorCustomTools>
<EditorCustomTool Name="InsertField">
<TelerikButton OnClick="@OnInsertField">Insert</TelerikButton>
</EditorCustomTool>
</EditorCustomTools>
</TelerikEditor>
@code{
private TelerikEditor Editor {get;set;}
public List<IEditorTool> Tools { get; set; } =
new List<IEditorTool>()
{
new CustomTool("InsertField")
};
public string Value { get; set; } =
@"
<p>Hi</p><p>
<img src=""data:image/png;base64,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"" alt="""" contenteditable=""false"" draggable=""true"">
<img class=""ProseMirror-separator"" alt=""""><br class=""ProseMirror-trailingBreak"">
</p><p><a href=""https://www.google.com/?safe=active&ssui=on"">Link</a></p><p>Phone</p>
";
private async Task OnInsertField()
{
await Editor.ExecuteAsync(new
HtmlCommandArgs("insertHtml",
$"<div>{Value}</div>", true));
}
}
Hello,
i am fighting with ability to have inputs inside grid->gridtoolbar, but Tabindex of all inputs are automtically somehow reset to tabindex="-1" except the first one. All inputs mean: both telerik and standard html.
Is there any steps how tell the grid to NOT reset the tabindex?
Here is repo, focus on seccond,third input on finall html colde(all except "eAA") are with tabindex=-1
https://blazorrepl.telerik.com/GdalYJby04A79c4X38
Expected behaviour:
- maintain tabindex as it was set
or - if automatic indexing is necessary, number it incrementaly
Thank You for info
In my blazor application, I have to use a numeric box component . In order to do that, I have created a custom numeric box component like below. my issue is while I am typing something on the numeric box, time to time some characters are automatically getting cleared. I have to type those again and again .i don't know what is the issue behind this.
<span @onfocusin="@FocusComponentAsync" @ref="@InputWrapperRef">
<TelerikNumericTextBox Value="Amount"
ValueChanged="(decimal val)=>OnBlNumercChanged(val)"
Arrows=false>
</TelerikNumericTextBox>
</span>
@code{
private ElementReference InputWrapperRef { get; set; }
private decimal Amount;
protected override void OnParametersSet()
{
this.StateHasChanged();
base.OnParametersSet();
}
private async void OnBlNumercChanged(decimal value)
{
//code
}
public async void OnNumericBoxKeyUp(KeyboardEventArgs e){
//code
}
public async Task FocusComponentAsync()
{
await _jsRuntime.InvokeVoidAsync("highlightInput", InputWrapperRef);
}
}
window.highlightInput = (inputWrapper) => {
var input = inputWrapper.querySelector("input");
if (!input) return;
input.select();
}
The demo for onseriesclicked does not work. I get the error: An unhandled error has occurred. Reload. Reload is a link, when I select it, I still get the error. I can just rip out the demo code and try it myself, but I thought you might want to know, it doesn't work for me:
Widows Edge Browser
Windows 10 OS
In my @code {
TelerikGrid<ClientViewDto>? MainGrid;
It seems I'm missing Height, MinHeight, and MaxHeight settings here.
I have found an issue with editing currency values.
Steps to reproduce:
1. Fill up a value 56.55
2. Try to click between 55
3. Cursor is at the end
The same issue about clicking between 56, the cursor will be before the dot.
When user click into the date picker textbox, the placeholder value is changed to what's set to "format" for the date picker. For example, I have the following configured:
<TelerikTimePicker Placeholder="dd/mm/yyyy" Format="dd/MM/yyyy"></TelerikTimePicker>
The control will display "dd/mm/yyy" in the textbox, however, when user click into the textbox, the placeholder value changes to "dd/MM/yyyy".
In the example below, the home icon is displayed correctly but the two with underscores are not. Moving the span outside the drawer does display correctly.
<TelerikRootComponent>
<TelerikDrawer Data="@NavigablePages"
@bind-Expanded="@DrawerExpanded"
MiniMode="true"
Mode="@DrawerMode.Push"
@ref="@DrawerRef"
@bind-SelectedItem="@SelectedItem">
<Template>
<div class="k-drawer-items">
<ul>
<li class="k-drawer-item" style="white-space:nowrap">
<span class="k-icon material-icons" style="margin-right: 8px;">home</span>
@if (DrawerExpanded)
{
<span class="k-item-text">Home</span>
}
</li>
<li class="k-drawer-item" style="white-space:nowrap">
<span class="k-icon material-icons" style="margin-right: 8px;">shopping_cart</span>
@if (DrawerExpanded)
{
<span class="k-item-text">Shopping Cart</span>
}
</li>
<li class="k-drawer-item" style="white-space:nowrap">
<span class="k-icon material-icons" style="margin-right: 8px;">content_paste_search</span>
@if (DrawerExpanded)
{
<span class="k-item-text">Clipboard</span>
}
</li>
</ul>
</div>
</Template>
<DrawerContent>
<div class="content px-4">
@Body
</div>
</div>
</DrawerContent>
</TelerikDrawer>
</TelerikRootComponent>
Hi good morning. I am implementing a FileManager control, but by business logic only certain users have permission to rename files. So in the onEdit method I validate the permission and if it doesn't have it I send a DialogFactory and after that I send an args.IsCancelled = true. And at the end of the event if I click on another item (file) inside the folder. throw an exception:
public async Task OnEdit(FileManagerEditEventArgs args)
{
Dialogs.AlertAsync(message, "FileManager");
args.IsCancelled = true;
}
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
at Telerik.Blazor.Extensions.ReflectionExtensions.GetPropertyValue(Object target, String propertyName)
at Telerik.Blazor.Components.TelerikFileManager`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ConvertToFileEntry(Object dataItem)
at Telerik.Blazor.Components.FileManager.FileView.FileManagerFileViewBase`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ConvertToFileEntry(Object dataItem)
at Telerik.Blazor.Components.FileManager.FileView.FileManagerListFileView`1.<>c__DisplayClass17_2[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<BuildRenderTree>b__8(RenderTreeBuilder __builder3)
at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
at Telerik.Blazor.Components.ListView.ListViewItem`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<BuildRenderTree>b__17_0(RenderTreeBuilder __builder2)
at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
at Microsoft.AspNetCore.Components.CascadingValue`1[[Telerik.Blazor.Components.ListView.IListViewCommandContainer, Telerik.Blazor, Version=3.3.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8]].Render(RenderTreeBuilder builder)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
Hi I have noticed that if the dropdown for an enum cannot wordwrap the item then the styling is broken, see the following the screenshot:
As you can see IN_PROGRESS is so long that it exceeds the column width and creates empty space above.
To me it appears as though an attempt to try to wordwrap the IN_PROGRESS but IN_PROGRESS has no applicable breaks in it.
Thanks,
Daniel
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.
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;
}
}
}
}
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.