1. Home
  2. Forum
  3. Blazor
  4. Custom Component

Custom Component

Hi,

I want to create an AutoComplete component. Unfortunately, I did not find a sample for this on the site.

Thank you



19 Replies
PM Ponmani Murugaiyan Syncfusion Team February 24, 2022 02:25 PM UTC

Hi Sarah, 

We have prepared custom component for AutoComplete, please find below. 

[AutoComplete.razor] 
<SfAutoComplete TValue="TVal" TItem="TItemss" DataSource="@customData"> 
    <AutoCompleteFieldSettings Text="Text" Value="Text"></AutoCompleteFieldSettings> 
</SfAutoComplete> 
 
@code { 
 
    [Parameter] 
    public List<TItemss> customData { get; set; } 
   
    [Parameter] 
    public EventCallback<TVal> DDLValueChanged { get; set; } 
} 

[Index.razor] 
<AutoComplete TVal="string" TItemss="Games" customData="@LocalData"></AutoComplete> 
 
@code{ 
    public string value { get; set; } 
    public class Games 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
    } 
    List<Games> LocalData = new List<Games> { 
new Games() { ID= "Game1", Text= "American Football" }, 
new Games() { ID= "Game2", Text= "Badminton" }, 
new Games() { ID= "Game3", Text= "Basketball" }, 
new Games() { ID= "Game4", Text= "Cricket" }, 
new Games() { ID= "Game5", Text= "Football" }, 
new Games() { ID= "Game6", Text= "Golf" }, 
new Games() { ID= "Game7", Text= "Hockey" }, 
new Games() { ID= "Game8", Text= "Rugby"}, 
new Games() { ID= "Game9", Text= "Snooker" }, 
new Games() { ID= "Game10", Text= "Tennis"}, 
  }; 
} 

Regards, 
Ponmani M 


SA Sarah February 27, 2022 01:27 PM UTC

Hi Ponmani Murugaiyan,


Thanks for the tips. How can @ bind-value and ValidationMessage  be introduced as a component parameter?


Thank you


PM Ponmani Murugaiyan Syncfusion Team February 28, 2022 05:40 AM UTC

Hi Sarah, 

Query: How can @ bind-value and ValidationMessage  be introduced as a component parameter? 
 
We have prepared sample as per your requirement using the bind-value and with edit form. 

Regards, 
Ponmani  


SA Sarah March 1, 2022 07:35 PM UTC

Hi  Ponmani Murugaiyan,


Thank you very much. The bug was fixed. Is it possible to include error text ValidationMessage inside the component?


Thank you


PM Ponmani Murugaiyan Syncfusion Team March 2, 2022 07:36 AM UTC

Hi Sarah, 

The error message is added to the component as per your requirement.  

 

Regards, 
Ponmani M 


SA Sarah March 2, 2022 01:25 PM UTC

Hi  Ponmani Murugaiyan,


The uploaded source does not appear to be valid. ValidationMessage is not included in the component.


<EditForm Model="@annotation">

        <DataAnnotationsValidator />

        <div>

            <CustomTextbox TVal="string" TItemss="Countries" Country="@Country" 

                                                  @bind- Value="@annotation.NameCustom">

            </CustomTextbox>

            <ValidationMessage For="@(() => annotation.NameCustom)" />

            </div>

    <div class="sfButton">

        <SfButton type="submit" IsPrimary="true">Submit</SfButton>

    </div>

</EditForm>


Thank you


PM Ponmani Murugaiyan Syncfusion Team March 3, 2022 12:11 PM UTC

Hi Sarah, 

As per our previous screenshot, the error message is added below the respective component as per the intended behaviour. So, we are unable to replicate your reported issue in our end. We request you to share the issue reproducing video demonstration and sample to investigate further at our end. 

Regards, 
Ponmani M  


SA Sarah March 4, 2022 02:46 PM UTC

Hi Ponmani Murugaiyan,


I want to remove the following code from the page and add it to the AutoComplete component.

 <ValidationMessage For="@(() => annotation.NameCustom)" />


And if possible as follows


<EditForm Model="@annotation">

        <DataAnnotationsValidator />

        <div>

            <CustomTextbox TVal="string" TItemss="Countries" Country="@Country"

                                                  @bind- Value="@annotation.NameCustom"

                                                   ShowValidationMessage="true" 

                                                   ValidationMessageFor="@annotation.NameCustom "  >

            </CustomTextbox>

            </div>

    <div class="sfButton">

        <SfButton type="submit" IsPrimary="true">Submit</SfButton>

    </div>

</EditForm>


Thank you


PM Ponmani Murugaiyan Syncfusion Team March 7, 2022 07:19 AM UTC

Hi Sarah, 

We couldn’t add the ValidationMessage to the component as attribute. You have to use the <ValidationMessage> tag with the “For” attribute lambda expression pointing to the form field. For more information please find the below blog for reference. 


Regards, 
Ponmani M 


SA Sarah replied to Ponmani Murugaiyan March 7, 2022 05:19 PM UTC

Hi  Ponmani Murugaiyan,


Thank you for your help.


PM Ponmani Murugaiyan Syncfusion Team March 8, 2022 04:01 AM UTC

Hi Sarah, 

Thanks for the update. Please get back us if you need further assistance. 

Regards. 
Ponmani M 


SA Sarah replied to Ponmani Murugaiyan August 6, 2022 09:20 AM UTC

Hi Ponmani Murugaiyan,


In the custom component for AutoComplete, how can I give focus to the custom component for AutoComplete?


thank you


UD UdhayaKumar Duraisamy Syncfusion Team August 8, 2022 02:41 PM UTC

Hi Sarah,


We can add the focus to the component using JSInterop and the ID of the component. We have prepared a sample for the reported query and shared the sample link below for reference.


<SfAutoComplete ID="AutoComplete1" @ref="AutoCompleteObj" Value="@Value" ValueChanged="ValueChanged" @oninput="@InputHandler" ValueExpression="@ValueExpression" TValue="TVal" TItem="TItemss" ShowClearButton="true" Placeholder="e.g. Australia" DataSource="@Country">

    <AutoCompleteFieldSettings Text="Name" Value="Name"></AutoCompleteFieldSettings>

</SfAutoComplete>


protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        await JSRuntime.InvokeAsync<object>("Focus");

    }


[Script.js]

function Focus() {

    document.getElementById("AutoComplete1").focus();

}


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppTest1503940368


Kindly try the above suggestion and let us know if this meets your requirement.


Regards,

Udhaya Kumar D



SA Sarah replied to UdhayaKumar Duraisamy August 9, 2022 10:54 AM UTC

Hi UdhayaKumar Duraisamy,


Is it possible to send the name of AutoComplete1 as a parameter? This is because the component has different names on different pages.


thank you


UD UdhayaKumar Duraisamy Syncfusion Team August 10, 2022 02:50 PM UTC

Hi Sarah,


You can focus the autocomplete component using ref and created event and FocusAsync method instead of ID property as like mentioned in the below code snippet. Please refer to the sample for more reference.


<SfAutoComplete ID="AutoComplete1" @ref="AutoCompleteObj" Value="@Value" ValueChanged="ValueChanged" @oninput="@InputHandler" ValueExpression="@ValueExpression" TValue="TVal" TItem="TItemss" ShowClearButton="true" Placeholder="e.g. Australia" DataSource="@Country">

    <AutoCompleteEvents TValue="TVal" TItem="TItemss" Created="OnCreated"></AutoCompleteEvents>

    <AutoCompleteFieldSettings Text="Name" Value="Name"></AutoCompleteFieldSettings>

</SfAutoComplete>

protected async Task OnCreated()

    {

        this.AutoCompleteObj.FocusAsync();

    }


Sample
: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppTest12116143152


Regards,

Udhaya Kumar D


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.



SA Sarah replied to UdhayaKumar Duraisamy August 11, 2022 04:35 AM UTC

Hi UdhayaKumar Duraisamy,


Thank you very much for the help. There are two cases:

1- Naturally, we can have multi CustomAutoCompleteComponents on one page, so we want to focus on a specific component.

2- We want to give focus to the component at different times (page loading time, after loading and performing certain operations).

Perhaps it is better to consider a parameter for the component, for example Focused, that whenever this parameter becomes True, focus will be given to the component.



UD UdhayaKumar Duraisamy Syncfusion Team August 12, 2022 03:33 PM UTC

Hi Sarah,


Yes, we can get the instances of the custom component using the @ref property wherever necessary. You can refer to the following blog for more details about it.


https://www.syncfusion.com/faq/blazor/components/how-do-i-get-a-specific-instance-of-a-custom-blazor-component


https://stackoverflow.com/questions/59446464/ho-to-get-a-specific-instance-of-a-custom-blazor-component


Regards,

Udhaya Kumar D



SA Sarah replied to UdhayaKumar Duraisamy October 21, 2022 06:35 AM UTC

Hi  UdhayaKumar Duraisamy ,


I rechecked the source below, but the focus is not transferred to the component when the page is loaded.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppTest12116143152



Thank you


UD UdhayaKumar Duraisamy Syncfusion Team October 24, 2022 01:01 PM UTC

Hi Sarah,


We have validated the shared sample on our end. The reported issue is not reproduced in the latest NuGet version as per your scenario. So, we suggest you upgrade to the latest version to resolve the reported issue on your end. Please refer to the below sample for more details.


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppTest1271487863


Regards,

Udhaya Kumar D


Loader.
Up arrow icon