Telerik Forums
UI for Blazor Forum
0 answers
55 views

Hi

Im using the OnRead event to display data in the autocomplete which works fine as expected for remote data.

What I want to do is display the drop down when the application starts to show some local search results without typing in any text. The OnRead event does fire as it should when the component init runs and ive confirmed the data collection has data in it but the dropdown doesnt open up to show any data unless some text is entered.

Is what im wanting to do possible please?

Phil

Phil
Top achievements
Rank 1
 asked on 12 Mar 2023
3 answers
97 views

Hello,

Blazor WebApp here.

I try TelerikAutoComplete inside a TelerikGird without success.   Do you provide a complete example so I can use it? 

 

How I can get the current field value as searchTerm to send it to the API?


<GridColumn OnCellRender="@((GridCellRenderEventArgs args) => OnCellInfosEmplacementDestinationRenderHandler(args, "emplacementDescriptionCompleteFr"))" Field=@nameof(treltlkpEmplacementViewModel.emplacementDescriptionCompleteFr) Title="Description FRANÇAISE" TextAlign="@ColumnTextAlign.Left" >
        <Template>
            <TelerikAutoComplete TItem="@String"
                Id="TitreFr"
                ScrollMode="@DropDownScrollMode.Scrollable"
                ItemHeight="30"
                PageSize="10"
                OnRead="@OnReadAutoCompleteEmplacementDescriptionCompleteFr"
                @bind-Value="@((context as treltlkpEmplacementViewModel).emplacementDescriptionCompleteFr)"
                FillMode="@Telerik.Blazor.ThemeConstants.AutoComplete.FillMode.Solid">
                <AutoCompleteSettings>
                    <AutoCompletePopupSettings Height="100px" />
                </AutoCompleteSettings>
            </TelerikAutoComplete>
        </Template>
</GridColumn>

 


    async Task OnReadAutoCompleteEmplacementDescriptionCompleteFr(AutoCompleteReadEventArgs args)
    {
        treltlkpEmplacementViewModel item = (treltlkpEmplacementViewModel)args.Data;

        if (!string.IsNullOrWhiteSpace(?????????))
        {
            await ObtenirEmplacementDescriptionCompleteAutoCompleteAsync(args, SafetyStudioSolution.Shared.Constants.cultureNameFr, ?????????);
        }
    }

Thank you for your fast answer.

Svetoslav Dimitrov
Telerik team
 answered on 01 Mar 2023
1 answer
107 views

Hi

Im using the autocomplete component and I want to hide the scrollbar from the popup that displays the results but I don't know which class to modify to set overflow: hidden

Can anyone help?

Thanks

Nadezhda Tacheva
Telerik team
 answered on 10 Feb 2023
1 answer
113 views

Hi,

Is it possible to set the maximum length of the data entered into a TelerikAutoComplete component?

I've tried catching keystrokes on the component and throwing away the surplus but this is not acceptable to our users.

Cheers
Rob

 

Hristian Stefanov
Telerik team
 answered on 28 Oct 2022
0 answers
47 views

Delete this. I had a class on it that was causing the problem

 

Take a look at the picture. The clear content cross is at the left

Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
 updated question on 11 Mar 2022
0 answers
504 views

The user wants to enter several values separated by a comma, but with AutoComplete, when the user selects a value, it always clears the previous values.

Is it possible to have an Append behavior, where the value gets appended rather than the current Overwrite behavior?

What I want to do is actually almost the same as the Tags textbox I used now to create this post. Thanks!

Edit: Never mind, I think Multiselect is what I should use. https://demos.telerik.com/blazor-ui/multiselect/overview

Alex
Top achievements
Rank 1
Iron
Iron
 updated question on 27 Feb 2022
1 answer
260 views

Hi,

I would like to have support for @mentions in your editor, maybe it's already there? 

Any other way i could get this?

Thanks

 

Apostolos
Telerik team
 answered on 01 Dec 2021
1 answer
1.1K+ views

Hello,
I have an issue with Unit tests that used to work.
I’m using bUnit to test the Blazor Autocomplete; before the (latest (not sure though)) update the tests passed.
The tests do the following:
1. bUnit renders the autocomplete
2. I use bUnit to fill in 2 chars in the autocomplete
3. The OnRead for the Autocomplete should get triggered
4. The autocomplete should than call a service method, which I mocked (using Moq)
5. I than assert the Mocked service method to be hit at least once

This used to work like a charm, but now it seems that the OnRead doesn’t get hit.

Were there any changes in when the OnRead Event gets triggered for the Autocomplete?

I decided to create a post here instead of a bUnit github issue; since the bUnit version remained the same (since the working version).

Here is some example code:
a. Component code behind:
public async Task OnRead(AutoCompleteReadEventArgs args)
{
Telerik.DataSource.FilterDescriptor filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;
if (args.Request.Filters.Count < 0)
return;
string userInput = filter.Value.ToString();
if (string.IsNullOrWhiteSpace(userInput))
{
await SetToZero(); //defaults some values
return;
}
await CallService(userInput);
}
b. Component markup: <TelerikAutoComplete Data="@_data "
ClearButton="true" OnRead="@OnRead" OnChange="@OnChange"
FilterOperator="Telerik.Blazor.StringFilterOperator.Contains"
Filterable="true"
MinLength="2" //OnRead only gets hit when min 2 chars are provided
Placeholder="@PlaceHolderValue" @bind-Value="@Value"/>
c. bUnit test
Mock<InterfaceToMock> mock = new Mock<InterfaceToMock>();
mock.Setup(c => c.GetSomethingByInput(It.IsAny<string>()))
.Returns(Task.FromResult(new List<Something>()));
ctx.Services.AddScoped(sp =>
{
return mock.Object;
});
var rootComponentMock = new Mock<TelerikRootComponent>();
var cut = ctx.RenderComponent<TheComponentContainingtheAutocomplete>
(rc => rc.AddCascadingValue(rootComponentMock.Object));
cut.Find("input").Input("t");
cut.WaitForAssertion(() =>
{
//This passes
countryAutocompleteMock.Verify(m => m.GetCountriesByName(It.IsAny<string>()), Times.Never());
});
cut.Find("input").Input("tt");
cut.WaitForAssertion(() =>
{
//This fails, while it should’ve been called by the OnRead
countryAutocompleteMock.Verify(m => m.GetCountriesByName(It.IsAny<string>()), Times.Once());
});

Any idea why the OnRead doesn’t get called when 2 char input is provided in the AutoComplete within the test?
It does get called when debugging the component.
Thanks in advance!

Marin Bratanov
Telerik team
 answered on 20 Apr 2021
3 answers
78 views

Hello,


I have an issue that I'd like to share with you.
I have the following setup:
Razor:
@if (_isEditMode && _aListOfStrings.Any())
{
<TelerikAutoComplete Data="_aListOfStrings"
Filterable="true"
FilterOperator="StringFilterOperator.Contains"
@bind-Value="_aViewModel.aStringProperty">
</TelerikAutoComplete>
}


Code behind:
protected override async Task OnParametersSetAsync()
{
await GetTheStringList();
}


private async Task GetTheStringList ()
{
_aListOfStrings = _aService.GetTheListOfStrings();
}

 

The autocomplete renders like expected. The data is also shown and filtered like expected. For some reason, when I type a string that is present in "_aListOfStrings" and select it for the first time. The string is not filled-in the autocomplete, nor does it get bound to the model. The second time I filter and select the string, it does get filled in and bound to the model.
Do you guys have any idea why this happens? I can't seem to figure it out. This is happening for all autocompletes in this "form". I've tried the following:
1. Render the Autocomplete outside of the Form
2. Set an id
3. Call this.StateHasChanged() after retrieving the data for the list
4. Changed OnParametersSetAsync() to OnInitilizedAsync() to fetch the list
Thanks in advance!

Hristian Stefanov
Telerik team
 answered on 19 Apr 2021
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?