In the TelerikForm component, you have "FormItem" with a string parameter of Field and from the string, you somehow bind the data to that field.
For other components, we must use the @bind-Value to get this 2-way binding.
I would like to request the "Field" parameter for more controls like TelerikTextBox where we can bind using the string name of the field like we do in FormItem.
So instead of:
<TelerikTextBox @bind-Value="@customer.CustomerName" />
we would be able to do this:
<TelerikTextBox Field="CustomerName" />
Peter
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);
}
}
}
When edit is initiated from code with virtual scroll, a duplicate OnRead request is also triggered.
But this is not the case when built-in edit command button is used.
https://docs.telerik.com/blazor-ui/common-features/icons#fonticon-component
in the SvgIcon Component section, there is this sample code, needs to be updated.
<TelerikSvgIcon Icon="@SvgIcon.Calendar" />
<TelerikSvgIcon Icon="@SvgIcon.Audio"
Size="@ThemeConstants.Icon.Size.Large"
ThemeColor="@ThemeConstants.Icon.ThemeColor.Primary" />Should be
ThemeConstants.SvgIcon or ThemeConstants.FontIcon
Hi
I'm using the month view for the Telerik Blazor scheduler which works so great and is really easy to use. But I'm missing a feature where I can control how many weeks of the month are visible at once to the user. For example, I don't want to show the entire month, but only two weeks of the month.
I know there is the MultiDay view, but this shows everything in one horizontal row. It would be great to have a feature where the user sees the month with a custom number of weeks.
My suggestion is to add a property to the SchedulerMonthView component called e.g. "WeekCount".
<SchedulerMonthView WeekCount="2"></SchedulerMonthView>Something like this also exists in Telerik UI for WinForms.
Best Regards,
Roman
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.
Hi,
Could you expose the Print Command of Blazor PDF Viewer? I would like to call it from within my code.
Regards
Gerald Man
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
The Image Thumbnail Viewer Component should have features like:
- Face detection-based image cropping
- Overlay an image over detected faces [To hide faces]
- Blur or pixelate faces
- Thumbnail masking within different shapes like:
- Circle
- Square
- Rectangle
- Hexagon
- Star etc.
- Content Aware Padding of images to fix the container size
- Set transparent background
- Text overlay
- Image watermark overlays
- Recolor a picture
- Antic Effect
This Thumbnail Viewer can then be used within Data Grid, File Manager/Explorer, Card View, Drop down lists, List Views, Tiles etc.
The Theme Builder contains a really nice looking Popover control, and I was a bit disappointed to discover that this doesn't seem to be documented or supported in UI for Blazor.
I realize I can probably use the Tooltip to achieve a similar effect, with two caveats:
- Tooltip requires of substantial CSS hacking to appear as the Popover control.
- The Popover closes on an explicit event, whereas Tooltip closes when it loses focus.
Is there any chance a Popover control is planned for a future release?
I would like to disable the browser autocomplete.
Applicable components:
ComboBox, AutoComplete, MultiSelect
Telerik.Blazor.Components.TelerikSwitch`1[System.Boolean] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'
This error occurs when the component is used with the EditForm component.
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();
}
For God's sakes I've spent 20 minutes on your site trying to figure out how to download your demos. Every link takes me that USELESS TelererkUIForBlazorSetup.exe. Syncfusion my be the worst but at least you don't have to google something that should be so redundant it's everywhere.
I finally gave up and had to google it to find it on Github. Absolutely worst experience ever.
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
When I place a tooltip on drawer item, it just flickers randomly
![[video-to-gif output image]](https://im3.ezgif.com/tmp/ezgif-3-4372cd0f87.gif)
https://blazorrepl.telerik.com/wQbbmbGb05hzznPh45
Hi,
Could it be possible to add an option to automatically add title property (containing text value) on every td?
We don't like 'multi-row' rows in a grid, so we use ellipsis with white-space no-wrap.. So it would be very useful to automatically add a title containing the text value of the cell (of course only for cells without a Template).
Otherwise we need to add a Template with a title to every column we already have, which is...
Thanks in advance!
Greetings.
Please add group header template for the select components. There are two goals:
- Customize the group items' appearance.
- Implement custom behaviors, for example - batch select or unselect of all items in the group by clicking on the group header.