.png){kind=avatar}
Hello
I noticed the DateRangePicker "OnChange" fires "on blur".
Confirmed by the docs;
https://docs.telerik.com/blazor-ui/components/daterangepicker/events#onchange
Is it possible to expose OnInput even for a "react style" onchange event?
https://linguinecode.com/post/onblur-vs-onchange-react-text-inputs
I think the StartValueChanged and EndValueChanged events have the same behaviour so unbinding might not be a solution..?
Attached is a use case where it is confusing because the events are not in sync... You'll see the grid data changes (data bound), but OnChange after you click out.
Create code snippets for all Blazor controls.
Provide either automation for installing into the Visual Studio toolbox or just provide as a web page for users to copy paste them into the Toolbox.
A stack panel component that creates a layout of items that are vertically positioned.
It could also have a wrap layout to make the items horizontal with wrapping
or horizontal without wrapping
Can you add Debounce to the filtering?
---
ADMIN EDIT
At the moment, you can use the OnRead to implement custom filtering and also debounce the operations: https://docs.telerik.com/blazor-ui/components/combobox/events#onread and the particular example the article links is shown here: https://docs.telerik.com/blazor-ui/knowledge-base/combo-debounce-onread
You may also want to look at item virtualization in the dropdowns - Follow it here: https://feedback.telerik.com/blazor/1457808-combobox-virtualization
There is also a sample attached of implementing debouncing in a WASM app as a reference too.
---
Please Add DropDown Container so it will be possible to add Nested Custom Editors inside Grid Cell
Regards
Andrzej
---
ADMIN EDIT
A dropdown container we would create would be a popup that ties to its anchor and gives you a template to render your own content rather than render its own items based on Data. It cannot, however, be tied to a specific case for a grid or other editor, it will be up to the developer to use the container and tie it to the application logic.
It should also expose events like PopupShowing (preferred to also cater for keyboard navigation) or ExpandClick so you can know when it is going to be expanded and, for example, fetch fresh data for scenarios with highly volatile data (example here).
---
I would like to pass a defined piece of data in when I add a new row in a hierarchical Blazor grid. in the example below, I have a hierarchy of Agency > District > School. When I add a new school within a district, I would like to pass the District ID so that the user does not have to select it or type it in.
I have a district ID column in the schools grid, but (a) it would be better if the user did not see this and (b) when I click "Add school" that field is always passed as empty. Is there any way to pass the
districtSchools.Dist.DISTRICT_ID
variable when I add a row?
<TelerikGrid Data="@Agencies" Sortable="true" Reorderable="true" OnUpdate="@UpdateHandlerAgency">
<DetailTemplate Context="granteeAgency">
@{
var leadAgency = granteeAgency as Agency;
<TelerikGrid Data="leadAgency.Districts" OnUpdate="@UpdateHandlerDistrict" OnRowRender="@OnRowRenderHandlerDistrict">
<GridColumns>
<GridColumn Field="@(nameof(District.Dist.DistrictName))" Editable="false">
<Template>
@((context as District).Dist.DistrictName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(District.DistAlloc))">
<Template>
@((context as District).DistAlloc.ToString("C"))
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
<DetailTemplate Context="districtSchools">
<TelerikGrid Data="districtSchools.Schools" OnCreate="@CreateHandlerSchool" OnDelete="@DeleteHandlerSchool" OnUpdate="@UpdateHandlerSchool" OnRowRender="@OnRowRenderHandlerSchool">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add School</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field="@(nameof(School.SchoolName))">
<Template>
@((context as School).SchoolName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(School.SchoolAlloc))">
<Template>
@((context as School).SchoolAlloc.ToString("C"))
</Template>
</GridColumn>
<GridColumn Field="" Visible="true">
<Template>
@districtSchools.Dist.DISTRICT_ID
</Template>
<EditorTemplate>
@districtSchools.Dist.DISTRICT_ID
</EditorTemplate>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
</DetailTemplate>
</TelerikGrid>
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="@(nameof(Agency.AgencyName))" Editable="false">
<Template>
@((context as Agency).AgencyName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(Agency.AgencyAlloc))">
<Template>
@((context as Agency).AgencyAlloc.ToString("C"))
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
I would like components like the TextBox, NumericTextBox, TextArea, Button to have a method in their reference similar to the FocusAsync() which Microsoft included to the ElementReference in .NET5.
---
ADMIN EDIT
For the time being, you can use JS interop and prepare a suitable selector. Here is a basic example for the button:
@inject IJSRuntime _js
Notes:<br />
- Move this script to a proper place, it is hacked into the component to make this snippet short
- Make sure the ID is unique if you use IDs. THere are other selectors you can use (such as classes, or you can even cascade your selectors to make them more specific)
<br /><br />
<script suppress-error="BL9992">
function focusElement(selector) {
var elem = document.querySelector(selector);
if (elem && elem.focus) {
setTimeout(function () {
elem.focus();
}, 30);
}
}
</script>
<TelerikButton OnClick="@FocusBtn">Focus the other button</TelerikButton>
<br /><br />
<TelerikButton Id="@btnId" OnClick="@SpecialBtnAction">I will be focused programmatically</TelerikButton>
@code{
string btnId = "my-special-btn";
async Task FocusBtn()
{
await _js.InvokeVoidAsync("focusElement", $"#{btnId}");
}
async Task SpecialBtnAction()
{
Console.WriteLine("special button clicked");
}
}---
Hi
I would like a "Steper" as the one you have in your MVC product.
I saw a few other posts that requested this feature which in all of the cases was denied saying to use Enabled instead...
The reason we need a ReadOnly state is because the user can not highlight to select the text to copy/paste if desired... that would be the reason we need ReadOnly vs disabled...
Disabled does not allow you to select the text to copy/paste...
---
ADMIN EDIT
A workaround is to re-enable the pointer events and to, optionally, set a highlight color:
<style>
/* Re-enable selection and scrolling of disabled textboxes.
Apply text selection style.
Can cause some side effects with appearance of hover and focus states */
/* UI for Blazor 3.0 + */
.k-input-inner.k-disabled,
.k-disabled > .k-input-inner,
input.k-textbox[disabled] {
pointer-events: initial;
}
.k-input-inner[disabled]::selection {
color: #fff;
background-color: #ff6358;
}
/* UI for Blazor 2.30 - */
.k-input.k-state-disabled,
.k-state-disabled > .k-input,
.k-state-disabled > .k-dateinput-wrap > .k-input,
input.k-textbox[disabled] {
pointer-events: initial;
}
.k-input[disabled]::selection {
color: #fff;
background-color: #ff6358;
}
</style>
<TelerikTextBox @bind-Value="@tbText" Enabled="false" />
<TelerikTextArea @bind-Value="@taText" Enabled="false" />
<TelerikDatePicker @bind-Value="@dpDate" Enabled="false" />
<TelerikDropDownList @bind-Value="@ddlVal" Data="@ddlData" Enabled="false" />
@code{
string tbText { get; set; } = "lorem ipsum";
string taText { get; set; } = "lorem ipsum\ndolor sit amet\nlorem ipsum\ndolor sit amet";
DateTime dpDate { get; set; } = DateTime.Now;
List<int> ddlData { get; set; } = Enumerable.Range(1, 10).ToList();
int ddlVal { get; set; } = 2;
}---
This is more or less a question and request.
With the new "Lazy Loading" feature of Blazor .Net 5, is it possible that Telerik can use this feature internally, to load only components/library as the app needs it at runtime to save initial load time?
Thanks!