Questions on UI for Blazor Forum

1 answer

193 views

How do I simply remove the text in the textbox in a TelerikAutoComplete?

Tried setting the Value but the textbox refuses to change the displayed text.

AutoComplete

answered on 29 Sep 2023

2 answers

149 views

Custom NoTemplateData template for TelerikComboBox

Good day, everyone

I found this thread today where you can define a custom template for your NoDataTemplate in MVC and it is implemented on an AutoComplete component. I need to implement something similar to this but for a TelerikComboBox instead and in Blazor, is it possible?

Thanks in advance.

PS: Sorry, I wrote the title wrong. Is NoDataTemplate instead of "NoTemplateData"

ComboBox

updated answer on 29 Sep 2023

1 answer

90 views

TimePicker Blazor custom header text

Hello,

I see there is no way to set TimePicker header in the modal of Telerik UI for Blazor component. The default implementation is not very usable in many situations and I would really like to have my own text and logic there. Is it possible to add it there somehow or how should I proceed?

TimePicker

answered on 28 Sep 2023

1 answer

315 views

Grid Command Column Header Template

Can you add a header template to the grid command column?

I would like to put a button in it.

Grid

answered on 27 Sep 2023

1 answer

879 views

How To Clear Blazor AutoComplete Selected Value When Using ValueChanged Event

I am using the below input utilizing the ValueChanged Event to query data results from the backend to populate the list.

In different cases I need to clear the selected value from other Methods, but after it's selected, the only way to clear it is to use the "X" in the autocomplete input.

I saw threads stating to clear the @bind-Value="Model.Property" to clear it. But, when using value changed, it will not let me set @bind-Value, I must use ValueExpression lamda.

My question is, how can I clear this value from my blazor CodeBehind?

Input

<TelerikAutoComplete Class="@(this.ProviderSearch.IsUsingMyLocation ? "my-location-on":"my-location-off")" Placeholder="@this.ProviderSearch.SelectedAutocompleteLocation" Data="@this.AutocompleteSuggestions" TItem="Prediction" ValueField="Description" OnChange="@this.OnAutoCompleteSelectedHandler" ValueChanged="@( (string newValue) => OnAutoCompleteValueChanged(newValue) )" ValueExpression="(() => this.ProviderSearch.SelectedAutocompleteLocation)" />

AutoComplete

answered on 26 Sep 2023

1 answer

128 views

Inconsistent text selection on tab focus

Summary

When tabbing into an input, normally the text of the input is selected, allowing immediate entry of new text. However, when the NumericTextbox has a different display format than the edit format, the input text is selected briefly and then the selection is lost when the format is changed (for example, a dollar sign is removed from a currency format). This prevents text from being entered without further action from the user, such as manually selecting the text or moving the cursor. This may also impact WCAG 2.0 AA compliance.

Steps to Reproduce

Navigate to https://demos.telerik.com/blazor-ui/numerictextbox/formats
Give the General Number Format input the focus.
Press Tab to give the focus to the Currency Format input.

Expected Results

The Currency Format text should be selected and numeric text should be accepted.

Actual Results

The Currency Format text is not selected and the cursor is to the right of the text. If you try to enter a number, nothing will happen. To be able to enter text, the text must manually be selected or the cursor must be moved first.

Notes

You can see the expected behaviour by doing the following:

Navigate to https://demos.telerik.com/blazor-ui/numerictextbox/formats
Give the Currency Format input the focus.
Press the Tab + Shift to give the focus to the General Number Format input.

The General Number Format input text will now be selected and data entry works as expected. The correct behaviour can also be observed on the Telerik Form demo page: https://demos.telerik.com/blazor-ui/form/overview

NumericTextBox

answered on 26 Sep 2023

1 answer

861 views

Placeholder Not DefaultText for TelerikDropDownList

The Blazor TelerikDropDownList doesn't appear to have a Placeholder property, but does have a DefaultText property. Using the latter as a 'Placeholder' initially works, but the problem is the text becomes another option in the list if it's not already in the list.

For example, if I have a list of colors (Red, Green, Blue) and add a DefaultText value of 'Please select a color' the list actually becomes Red, Green, Blue AND Please select a color and the latter has to be accounted for if the user selects it.

Anyone know how to extend the TelerikDropDownList component to include a Placeholder property that does not because part of the list?

Thanks,

Rob

DropDownList

answered on 26 Sep 2023

0 answers

671 views

Form validation with <TelerikForm>

I've run into an issue and searched results have yielded a little, but not quite enough information. My project is in blazor server. I am using telerik form components and fluent validation. Is there a global way to prevent the inputs from submitting as you type? I can use the ValidateOn parameter which is fine but when using a <FormItem> component without a <Template> there is no way to do such. Also, i would like the textboxes and other inputs to not bind at all until onblur to prevent excess server calls. In those instances, i can work around it using the DebounceDelay parameter of the textbox but that seems the wrong approach. Finally, with the debounce delay, is it executed on the server or client? Meaning, if i use the DebounceDelay approach is a c# Timer still running and the component still communicating with the server as you type? Thank you in advance for any help or feedback!

asked on 25 Sep 2023

1 answer

161 views

I want to make the carousel crossfade instead of slide

I want to have a carousel on my page that fades instead of sliding, but there is no parameter that I can find to set this.

The animation container is able to use a fade animation. https://demos.telerik.com/blazor-ui/animationcontainer/overview

I would want it to function similarly to bootstraps version of crossfade. https://getbootstrap.com/docs/5.3/components/carousel/

Would I be better off trying to customize the existing carousel component somehow? Could the effect I want be achieved with CSS? Do I need to make a feature request, and where would I do that?

AnimationContainer

Carousel

answered on 25 Sep 2023

1 answer

154 views

Grid Popup Form does not stretch to accommodate the fields

Good afternoon, everyone.

I've been trying to add a popup for my CRUD operations on my grid, right now I'm only focusing on the "Add" command.

I'll paste the code below:

<TelerikGrid TItem="@MaintenanceCounterpartyModel" OnRead="@GridReadHandler" Pageable="true" Sortable="true" @ref="@GridRef" Id="MA-MaintenanceGrid" EditMode="@Telerik.Blazor.GridEditMode.Popup">
	<GridToolBarTemplate>
		<GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
		<span id="search-on-grid" class="k-textbox k-grid-search k-display-flex" style="width: auto; margin-left: 15px;">
			<span class="k-input-icon">
				<span class="k-icon k-i-search"/>
			</span>
			<TelerikTextBox Value="@SearchValue" ValueChanged="@SearchGrid" Placeholder="Search counterparties..." AutoComplete="off" Id="MA-MaintenanceGridToolbarSearch"/>
			<span unselectable="on" class="k-clear-value" title="clear" role="button" tabindex="-1" @onclick="async () => await ClearSearch()">
				<span class="k-icon k-i-x"/>
			</span>
		</span>
		<GridCommandButton Command="Add" Icon="@FontIcon.Plus" Id="M-AddNewCounterParty" Class="k-button k-primary add-counterparty-button">NEW COUNTERPARTY</GridCommandButton>
	</GridToolBarTemplate>
	<GridExport>
		<GridExcelExport FileName="Counterparties" AllPages="true"/>
	</GridExport>
	<GridSettings>
		<GridPopupEditSettings Title="Add new Counterparty">
		</GridPopupEditSettings>
		<GridPopupEditFormSettings>
			<FormTemplate>
                                @{
                                    CPEditItem = context.Item as MaintenanceCounterpartyModel;

                                    <TelerikForm Model="@CPEditItem" OnValidSubmit="@OnValidSubmit">
					<FormValidation>
						<DataAnnotationsValidator/>
					</FormValidation>
					<FormItems>
						<FormItem Field="@nameof(MaintenanceCounterpartyModel.CounterpartyName)"/>
					</FormItems>
					<FormButtons>
						<TelerikButton Icon="@nameof(FontIcon.Save)">Save</TelerikButton>
						<TelerikButton Icon="@nameof(FontIcon.Cancel)" ButtonType="@ButtonType.Button" OnClick="@OnCancel">Cancel</TelerikButton>
					</FormButtons>
				</TelerikForm>
                                }
			</FormTemplate>
		</GridPopupEditFormSettings>
	</GridSettings>
	<GridColumns>
		<GridColumn Title="Counterparty ID" Field="CounterpartyID"/>
		<GridColumn Title="Counterparty Name" Field="CounterpartyName"/>
		<GridColumn Title="Create User" Field="CreateUser"/>
		<GridColumn Title="Create Datetime" Field="CreateDateTime"/>
		<GridColumn Title="Update User" Field="UpdateUser"/>
		<GridColumn Title="Update Datetime" Field="UpdateDateTime"/>
	</GridColumns>
	<DetailTemplate Context="counterparty">
		<TelerikGrid Data="counterparty.LegalEntities">
			<GridColumns>
				<GridColumn Title="Legal Entity ID" Field=@nameof(MaintenanceCounterpartyLegalModel.LegalEntityID)/>
				<GridColumn Title="Legal Entity Name" Field=@nameof(MaintenanceCounterpartyLegalModel.LegalEntityName)/>
				<GridColumn Title="Jurisdiction" Field=@nameof(MaintenanceCounterpartyLegalModel.Jurisdiction)/>
				<GridColumn Title="Create User" Field=@nameof(MaintenanceCounterpartyLegalModel.CreateUser)/>
				<GridColumn Title="Create Datetime" Field=@nameof(MaintenanceCounterpartyLegalModel.CreateDateTime)/>
				<GridColumn Title="Update User" Field=@nameof(MaintenanceCounterpartyLegalModel.UpdateUser)/>
				<GridColumn Title="Update Datetime" Field=@nameof(MaintenanceCounterpartyLegalModel.UpdateDateTime)/>
			</GridColumns>
			<DetailTemplate Context="legalEntity">
				<TelerikGrid Data="legalEntity.RegistrationNumbers">
					<GridColumns>
						<GridColumn Title="Registration Number ID" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumberID)/>
						<GridColumn Title="Registration Type" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationType)/>
						<GridColumn Title="Registration Number" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumber)/>
						<GridColumn Title="Registration Date" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumber)/>
						<GridColumn Title="Registration Comments" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationDate)/>
					</GridColumns>
				</TelerikGrid>
			</DetailTemplate>
		</TelerikGrid>
	</DetailTemplate>
</TelerikGrid>