Need to be able to call a function in an autocomplete template

[Thomas Hare]

Given this code:

                    <SfAutoComplete ID="EmployeeId" @bind-Value="EmployeeNumber"

                                    @ref="employeeACObj"

                                    TValue="string"

                                    TItem="COSEmployeeAutocomplete"

                                    Highlight="true"

                                    MinLength=3

                                    Placeholder="Type name then select an employee"

                                    DataSource="@_employeeList"

                                    AllowFiltering="true">

                        <SfDataManager Url="Employee/AutoComplete"

                                       Adaptor="Adaptors.WebApiAdaptor"

                                       CrossDomain="true">

                        </SfDataManager>

                        <AutoCompleteTemplates TItem="COSEmployeeAutocomplete">

                            <ItemTemplate Context="ACEmployee">

                                <div class="d-inline-flex w-100 auto-result">

                                    <div class="p-1"><img height=38 src="@GetEmployeeImageAsync(ACEmployee.Email))" asp-append-version="true" width=38></div>

                                    <div class="p-1 col" style="margin-top: 2px;">

                                        @if (!string.IsNullOrEmpty(ACEmployee.BadgeNumber))

                                        {

                                            <div class="m-0 small font-weight-bold">

                                                @ACEmployee.FullName

                                                &nbsp;<i class="fa fa-id-badge"></i><span class="font-weight-bold">&nbsp;@ACEmployee.BadgeNumber.Trim()</span>

                                            </div>

                                        }

                                        else

                                        {

                                            <div class='m-0 small font-weight-bold'>@ACEmployee.FullName</div>

                                        }

                                        <div class='m-0 row ellipsis2 h6 small text-secondary'>@ACEmployee.Title</div>

                                    </div>

                                </div>

                            </ItemTemplate>

                        </AutoCompleteTemplates>

                        <AutoCompleteFieldSettings Value="EmployeeId" Text="FullName"></AutoCompleteFieldSettings>

                        <AutoCompleteEvents ValueChange="@AutoCompleteEventHandler" TItem="COSEmployeeAutocomplete" TValue="string"></AutoCompleteEvents>

                    </SfAutoComplete>

when each item template calls the GetEmployeeImageAsync function, passing in the current email address, the call to the server returns the image string for the src attribute, but instead of return the string it returns the following to each item:

https://localhost:44309/signatureauthority/System.Runtime.CompilerServices.AsyncTaskMethodBuilder`1+AsyncStateMachineBox`1[System.String,SignatureAuthority.Blazor.Features.Employee.Pages.AddEmployee+<GetEmployeeImageAsync>d__40]

Is that not the proper syntax?

I also tried a calling a different function that returns some html code for creating dynamic markup in the template, but the markup is displayed as a string instead of being rendered. (this is a separate question but still related to templates).

[Sevvandhi Nagulan]

Hi Thomas, 

Greetings from Syncfusion support. 

We checked your query. Based on the provided code example, we prepared the sample and attached it below. We return the image string by calling the method and source element is returned from the method. Please refer the below code, 

  

<SfAutoComplete TValue="string" TItem="EmployeeData" cssClass="template" Placeholder="Select a customer" DataSource="@Data"> 

    <AutoCompleteTemplates TItem="EmployeeData"> 

        <ItemTemplate> 

            <div> 

                <img class="empImage" src="@GetEmployeeImageAsync(((context as EmployeeData).Designation))/@((context as EmployeeData).EmployeeId).png"  alt="employee" /> 

                <div class="ename"> @((context as EmployeeData).FullName) </div> 

            </div> 

        </ItemTemplate> 

    </AutoCompleteTemplates> 

    <AutoCompleteFieldSettings Value="FullName"></AutoCompleteFieldSettings> 

</SfAutoComplete> 

   public string GetEmployeeImageAsync(string a) 

    { 

        var link = "https://ej2.syncfusion.com/react/demos/src/drop-down-list/Employees"; 

        return link; 

    } 

} 

Please find the sample below. 

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

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Pon Geetha A J]

Sent: Thursday, January 21, 2021 12:42 PM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 161674, Need to be able to call a function in an autocomplete template, has been updated. 

And a little more info, as I mentioned I could get it to return a string with the url but the url is never executed in the template 

Here’s my result, and that is a valid url: 

 

 

Just doesn’t display it. 

------------------------------------------------------- 

Sent: Thursday, January 21, 2021 11:48 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 161674, Need to be able to call a function in an autocomplete template, has been updated. 

To added the last message I sent which showed the context error, my autocomplete is wrapped in an EditForm tag: 

<EditForm Model="@model" OnValidSubmit="@ValidFormSubmitted" class="d-inline"> 

So notice that the SfAutoComplete is bound to an internal variable EmployeeNumber whose TItem is the same as the the template COSEmployeeAutocomplete. It’s also using a data adaptor to a web api method for the data use by the autocomplete. 

Tom 

----------------------------------------------------------------  

Sent: Thursday, January 21, 2021 11:42 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 161674, Need to be able to call a function in an autocomplete template, has been updated.  

  

Doesn’t work for me: 

 

And if I add Context=”COSEmployeeAutocomplete” to the <ItemTemplate> element then the call fails. Also, as I mentioned, in my initial attempts, just putting the url in the src attribute of the img element in the template wouldn’t execute those links. 

Tom 

[Sevvandhi Nagulan]

Hi Thomas, 

Query 1: And a little more info, as I mentioned I could get it to return a string with the url but the url is never executed in the template 

We checked the query. We could not reproduce the reported issue. We can get the images from the mentioned link. So we suggest you to ensure whether the image is present at the provided url.  If still issue persists, please modify the below sample to replicate the issue in our end. It would be helpful to validate the issue further. 

Screenshot: 

 

Query 2: And if I add Context=”COSEmployeeAutocomplete” to the <ItemTemplate> element then the call fails. Also, as I mentioned, in my initial attempts, just putting the url in the src attribute of the img element in the template wouldn’t execute those links. 

If you add Context=”COSEmployeeAutocomplete” to the ItemTemplate, then you should use that variable for accessing properties of the class inside class. Please refer the below code. 

 

<SfAutoComplete TValue="string" TItem="EmployeeData" cssClass="template" Placeholder="Select a customer" DataSource="@Data"> 

    <AutoCompleteTemplates TItem="EmployeeData"> 

        <ItemTemplate Context="COSEmployeeAutocomplete"> 

            <div> 

                <img class="empImage" src="@GetEmployeeImageAsync(((COSEmployeeAutocomplete as EmployeeData).Designation))/@((COSEmployeeAutocomplete as EmployeeData).EmployeeId).png"  alt="employee" /> 

                <div class="ename"> @((COSEmployeeAutocomplete as EmployeeData).FullName) </div> 

            </div> 

        </ItemTemplate> 

    </AutoCompleteTemplates> 

    <AutoCompleteFieldSettings Value="FullName"></AutoCompleteFieldSettings> 

</SfAutoComplete> 

Please find the sample below. 

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

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Pon Geetha A J]

To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 161674, Need to be able to call a function in an autocomplete template, has been updated. 

You’re autocomplete is not using a datamanager to get data from a webapi so your test is invalid.