Questions on UI for Blazor Forum

1 answer

338 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

936 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

138 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

935 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

696 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

168 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

157 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>

The code works great but when I hit the Add button the popup opens up like this:

And it does not stretch in size to accommodate the fields accordingly. Is there a way to fix this?

Also, is it possible to implement a custom popup if I don't want to use this one? If yes, do we have examples here?

Thanks in advance.

Grid

answered on 22 Sep 2023

0 answers

171 views

Display the number of records matching the current filter

I have a Blazor Server app using TelerikGrid. The grid has lots of columns and I have FilterMode set to FilterRow and the default filtering works great. However, since the grid is also set to ScrollMode Virtual, there is no immediate indication of how well the filter is defined. To fix this I want to display the number of records that are actually "filtered in" in comparison to the total number of records possible so that the user can tell if they've (for example) selected nearly all the records.

I've looked everywhere and I cannot find a way to ask the grid how many records are currently filtered in.

It seems like I could take the FilterDescriptors, convert them to SQL for a where clause, and run the query every time they change the filter, but that seems like such a waste to essentially run the filter twice every time it reloads. Even though my dataset is currently small enough that I cache the whole thing on the server, I'm still doing twice the work to get to a number the grid must know.

Here is a snippet from my Razor file:

@code {
    privateint  _filteredCount = 0; // How to set this?
}
<TelerikGrid Data="@_applications"
             Pageable="false"
             Sortable="true"
             Resizable="true"
             FilterMode="@GridFilterMode.FilterRow"
             Width="100%"
             ScrollMode="@GridScrollMode.Virtual"
             OnStateInit="(GridStateEventArgs<ApplicationListDTO> args) => StateInitHandler(args)"
             OnStateChanged="(GridStateEventArgs<ApplicationListDTO> args) => StateChangedHandler(args)"
             Height="540px" RowHeight="60">
    <GridColumns>
    Column definitions left outfor brevity
    </GridColumns>
</TelerikGrid>
<div class="applicationCount">@(_applications.Count()) applications found, @_filteredCount listed</div>

Suggestions?

Filter

Grid

updated question on 22 Sep 2023

1 answer

241 views

Project from template is empty

I am trying to create a new project using Telerik C# Blazor Application template in Visual Studio 2022. I am able to go through the template steps however on finish no project is created. The message bar at the bottom of visual studio says it was successful. I have Telerik UI for Blazor Extension installed and enabled.