You can add a search box in the grid toolbar that lets the user type their query and the grid will look up all visible string columns with a case-insensitive Contains
operator, and filter them accordingly. You can change the filter delay, and the fields the grid will use - see the Customize the SearchBox section below.
-----
I have an int and a string field and would love to be able to let the user search in both at the same time.
Workaround is now:
public int number {get; set;}
public string numberString => number.ToString();
public string name {get; set;}
But I would love to see it without the need to use the numberString
I would like to be able to override the No Data message in DropDownList component when there are no elements in the Data.
--
ADMIN EDIT
Until this feature is implemented, here is a workaround.
If you already have localization in your project, just set "DropDownList_NoData" key to an empty string in your resources.
If you don't have localization, here are the steps you should do (shortened version of the documentation):
1. Create a class for your localizer:
public class SampleResxLocalizer : ITelerikStringLocalizer
{
public string this[string name]
{
get
{
return GetStringFromResource(name);
}
}
public string GetStringFromResource(string key)
{
// this will override only DropDownList_NoData message and it will return other messages as they are
if (key == nameof(Messages.DropDownList_NoData))
{
return string.Empty;
}
return Messages.ResourceManager.GetString(key, Messages.Culture); ;
}
}
2. Override the existing Localizer. This step should be done when configuring your services after calling "AddTelerikBlazor()":
builder.Services.AddSingleton(typeof(ITelerikStringLocalizer), typeof(SampleResxLocalizer));
--
If I set the Visible parameter to false for either ToolBarButton or ToolBarToggleButton it does not hide them from the UI.
<AdminEdit>
A workaround would be to use the Class parameter and add a display:none CSS rules.
Code snippet for the workaround:
<style>
.hidden-button{
display:none;
}
</style>
<TelerikToolBar>
<ToolBarButton Class="hidden-button">Hidden button</ToolBarButton>
<ToolBarButton Icon="@IconName.Star">Visible button</ToolBarButton>
<ToolBarToggleButton Class="hidden-button">Hidden toggle button</ToolBarToggleButton>
<ToolBarToggleButton @bind-Selected="@isSelected">Visible toggle button</ToolBarToggleButton>
</TelerikToolBar>
@code {
public bool isSelected { get; set; } = true;
}
</AdminEdit>
I would like to have the Label property to all input components, like ComboBox, NumericTextBox, all date inputs and pickers and so on. Right now only TextBox have it.
There a hack using HTML labels and CSS to get that but I think it is necessary to unify and not have to deal with two different concepts within the same form.
Input with Label property:
<TelerikTextBox Label="Container Name" @bind-Value="@ContainerSettings.ContainerName"></TelerikTextBox>
Hack to get same result in other inputs:
<label class="k-label" for="port">
Port <br>
<TelerikNumericTextBox Id="port" Arrows="false" @bind-Value="@ContainerSettings.Port"></TelerikNumericTextBox>
</label>
in blazor ui version 2.24.1 I use this code in program.cs for globalization:
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddTelerikBlazor();
// register a custom localizer for the Telerik components, after registering the Telerik services
builder.Services.AddSingleton(typeof(ITelerikStringLocalizer), typeof(SampleResxLocalizer));
var host = builder.Build();
await SetCultureAsync(host);
await host.RunAsync();
}
private static async Task SetCultureAsync(WebAssemblyHost host)
{
var jsRuntime = host.Services.GetRequiredService<IJSRuntime>();
var cultureName =await jsRuntime.InvokeAsync<string>("blazorCulture.get");
if (cultureName != null)
{
var culture = new CultureInfo("fa-IR");
DateTimeFormatInfo info = culture.DateTimeFormat;
info.AbbreviatedDayNames = new string[] { "ی", "د", "س", "چ", "پ", "ج", "ش" };
info.DayNames = new string[] { "یکشنبه", "دوشنبه", "ﺳﻪشنبه", "چهارشنبه", "پنجشنبه", "جمعه", "شنبه" };
info.AbbreviatedMonthNames = new string[] { "فروردین", "ارديبهشت", "خرداد", "تير", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };
info.MonthNames = new string[] { "فروردین", "ارديبهشت", "خرداد", "تير", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };
info.AMDesignator = "ق.ظ";
info.PMDesignator = "ب.ظ";
info.ShortDatePattern = "yyyy/MM/dd";
info.FirstDayOfWeek = DayOfWeek.Saturday;
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;
}
}
when use TelerikDatePicker , id dosenot work properly. the code of my component in here:
<div class="demo-section k-form k-form-vertical">
<div class="k-form-field">
<label for="travel-date" class="k-label k-form-label">Travel Date</label>
<div class="k-form-field-wrap">
<TelerikDatePicker Min="@Min" Max="@Max" @bind-Value="@selectedDate" Id="travel-date"></TelerikDatePicker>
</div>
</div>
<div class="k-form-field">
<p>The selected travel date is: <strong>@selectedDate?.ToShortDateString()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToString()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToUniversalTime()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToLongDateString()</strong></p>
</div>
</div>
@code {
public DateTime Max = new DateTime(2050, 12, 31);
public DateTime Min = new DateTime(1950, 1, 1);
private DateTime? selectedDate=DateTime.Now;
}
when click the datepicker the date is not correct :
I am experiencing this problem with version 2.29 when the dropdown list is in a "component"
It seems to be intermittent but dependent on how long the async method takes to complete.
Edit page
@page "/"
@using System.Diagnostics
@using System.Threading
@using BlazorApp1.Components
<h1>Hello, world!</h1>
<EditForm class="form-inline" Model="@Model">
<MyComponent />
</EditForm>
Welcome to your new app.
@code {
object Model = new();
private Guid InstanceId;
public Index()
{
InstanceId = Guid.NewGuid();
Debug.WriteLine($"Index - {InstanceId}");
}
protected override Task OnInitializedAsync()
{
Debug.WriteLine("Index - OnInitializedAsync");
return base.OnInitializedAsync();
}
protected override Task OnParametersSetAsync()
{
Debug.WriteLine("Index - OnParametersSetAsync");
return base.OnParametersSetAsync();
}
}
Component
@using System.Diagnostics
<h3>My Component</h3>
<br />
<TelerikDropDownList @bind-Value=_selectedValue Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" TValue="int" TItem="MyDdlModel"></TelerikDropDownList>
<br />
<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton><br />
@helloString
<br />
@code {
private Guid InstanceId;
MarkupString helloString;
int _selectedValue { get; set; } = 2; // Preselected value
IEnumerable<MyDdlModel> myComboData { get; set; } = Enumerable.Empty<MyDdlModel>();
void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}
public MyComponent()
{
InstanceId = Guid.NewGuid();
Debug.WriteLine($"MyComponent - {InstanceId}");
}
protected override async Task OnInitializedAsync()
{
Debug.WriteLine("MyComponent - OnInitializedAsync");
myComboData = await LoadData();
await base.OnInitializedAsync();
}
protected override Task OnParametersSetAsync()
{
Debug.WriteLine("MyComponent - OnParametersSetAsync");
return base.OnParametersSetAsync();
}
private async Task<IEnumerable<MyDdlModel>> LoadData()
{
await Task.Delay(100);
return Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
Further to issue reported in https://feedback.telerik.com/blazor/1545177-selected-items-are-not-preserved-when-loading-the-state-when-the-component-is-bound-to-expandoobjects wrt Expando Object, the column menu reset also does not work when grid is bound to Expando Object
Regards
Naved
--- FOR FUTURE REQUEST ---
Could be very useful to scrolling tha grid to a specific item\row (in Normal Grd and also in Virtual Grid mode, both) programmatically. Whithout javascript.
For example after loading a grid that show 20 items, programmatically is it possible to go (and display in grid) not the first 20 rows but for example at row 100. So the vertical scrolling bar muso go dow sice arriving and show that row.
Best Regards
Paolo Leonesi
Have been pouring through all your release videos, (Great Job Sam, Ed Et Al...) to be better informed as to what project type to select for a new Enterprise Admin App. The FilterView control stood out as a means of potentially saving me more than a week of work, but I just can't see making a new forms app going forward. Blazor and Maui seem like the only logical choices going forward, please add if convenient...
Thanks.
This feature is requesting a Blazor version of the RadPropertyGrid, or a more modern Material Design(ish) equivalent.
https://docs.telerik.com/devtools/wpf/controls/radpropertygrid/overview
As more customers are adopting Blazor, we're porting our rich design time tooling to the web in SaaS type offers. No Blazor control vendor has this type of control today, and it's sorely needed. Even finding a Web/Angular version of this type of control is practically impossible.
Having this control combined with the existing Telerik Blazor property editors (combo boxes, edit fields, boolean controls, color pickers, font pickers, etc.) would give you a strong leg up on your competitors.
Note: Our company is already licensing your Blazor controls and I speak to Maria every few months on the roadmap.
Hi team,
I know we have Diagram like Kendo UI for Blazor, But it's confusing and gets very messy with more customizations. I would be very helpful if we have native Blazor component for diagram rather than integrating JQuery with Kendo. Hence making a feature request.
let me know if there is any plan in pipeline for this feature.
Regards,
Rikam
We would like a parameter for Grid to set the placeholder of the DateTime filter in FilterRow (e.g. instead of 'yyyy. MM. dd' an own pattern).
We think of a parameter like the FormatPlaceholder parameter of the DatePicker component.
The feature request is to provide a way for Telerik customers to define custom validation classes. It seems appropriate to have the FieldCssClassProvider override in Telerik components. Thus, if required customers would be able to apply custom styling and remove the default theme classes for valid and invalid state.
Related #1564471