Kendo UI for jQuery's AutoComplete doesn't work; could it be due to a nullable string field?

[Rod]

I've been following this Kendo UI tutorial: Server filtering in ASP.NET Core AutoComplete Component Demo | Telerik UI for ASP.NET Core

But although I've made the changes I believe need to be to accommodate our data, no textbox for the user to type ahead into appears. Then looking at the code and especially at the model class, I realized that the field I'm trying to bind to the dataTextField property of kendo-autocomplete, is a nullable string. I'm wondering if that is what's causing the problems I'm experiencing? Here's some code snippets from my MVC view:

<div class="demo-section k-content">
	<h5>Find a location</h5>
	<kendo-autocomplete name="locations" style="width:100%"
		dataTextField="LocationCode"
		filter="contains"
		min-length="2">
		<datasource type="DataSourceTagHelperType.Custom" server-filter="true">
			<transport>
				<read url="@Url.Action("GetLocationByLocationCode", "SiteToSite")" data="onAdditionalData" />
			</transport>
		</datasource>
	</kendo-autocomplete>

	<div class="demo-hint">Hint: type "ca"</div>
	<script>
		function onAdditionalData() {
			return {
				text: $("#locations").val()
			};
		}
	</script>
</div>

Here's the Index action method from the controller:

public async Task<IActionResult> Index()
{
	BuildSelectLists();
	SiteToSite siteToSite = new SiteToSite();
	return View(siteToSite);
}

public void BuildSelectLists()
{
	ViewData["EmployeeList"] = new SelectList(db.PharmEmployees.Where(x => x.ActiveYn == true).OrderBy(y => y.EmployeeName).ToList(), "EmployeeId", "EmployeeName");
}

And finally here's a snippet of the PharmLocation model class, which includes LocationCode (which is the nullable string I'm binding the dataTextField to:

public partial class PharmLocation
{
    public PharmLocation()
    {
        PharmItemsReturnedExpiredFromLocs = new HashSet<PharmItemsReturnedExpiredFromLoc>();
        PharmLocation340BRegistrations = new HashSet<PharmLocation340BRegistration>();
        PharmLocationPaprogContracts = new HashSet<PharmLocationPaprogContract>();
    }

    public int LocationId { get; set; }
    public bool? ActiveYn { get; set; }
    public string? LocationCode { get; set; }
    public string? LocationType { get; set; }
    public string? Location { get; set; }

Could the fact that LocationCode is a nullable string be what's preventing the autocomplete from displaying a textbox that the user can type ahead into?

[Aleksandar]

Hello Rod,

I went through both the forum post and the support case, but I am not sure I understand what the issue is. Is the AutoComplete not rendered or data is not binding to the component? Or is filtering not working? I am therefore pasting here the response in case it is beneficial to someone else.

That said, I see you are using TagHelpers to configure the AutoComplete. If the component is not rendering do you have the @addTagHelper directive added to the cshtml file or the _ViewImports.cshtml file?

 @addTagHelper "*, Kendo.Mvc"

Assuming the directive is added calling the LINQ contains on an object property that is null will indeed result in an exception, so that might be a reason why data is not shown in the AutoComplete.

I also see in the forum post the DataSource is of type custom, but the snippet submitted in this ticket the DataSource is of type "odata". Setting the type means the DataSource will use a predefined transport and/or schema.

Note also that the Read endpoint should expect a parameter with the same name as the one returned by the onAdditionalData handler, for example:

<script>
    function onAdditionalData() {
        return {
            SearchByLocationCode: $("#locations").val()
        };
    }
</script>

public JsonResult GetLocationByLocationCode(string SearchByLocationCode)
{
...
}

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Rod]

Hi Aleksandar,

I am new to Kendo UI, so at this point the best I can do is mimic what I see in examples. Somewhere, in one of the examples, I saw this line in the .cshtml file:

@addTagHelper *, Kendo.Mvc

So, that's what I put  in my Index.cshtml file. I don't have it like you did 

@addTagHelper "*, Kendo.Mvc"

but I'll try that next.

The issue for me now is the AutoComplete does not render. I've looked at the generated HTML, there's nothing there for AutoComplete.

When I first started to mimic what was presented in an answer to a previous question, I was given this link: Server filtering in ASP.NET Core AutoComplete Component Demo | Telerik UI for ASP.NET Core

I want to draw you attention to this line:

<datasource type="DataSourceTagHelperType.Custom" server-filtering="true">

In particular, the use of DataSourceTagHelperType.Custom to assign to type. NO WHERE in that example does it explain WHY I should use DataSourceTagHelperType.Custom!! Its just TA-DA, use this! 

WHY??
WHY??
WHY??

However, since I have to proceed without any explanation, I just mimiced what's on that page. (An aside an aside, notice that there's no double quotes around the '*, Kendo.Mvc' on that page.) So, after a totally useless day of struggling with the app, not getting AutoComplete to render at all, I decided I'd better try to find out what in heck that type parameter is all about. So, I tried to figure that out. I came across another page, which mentioned 3 parameters for type applied to datasource. Unfortunately at the moment I cannot find that page, but I do remember it had odata, odata-v4 and a third that I cannot remember. But what I do remember is that it did NOT have DataSourceTagHelperType.Custom! That greatly confused me, because on one page, the example I gave in the link above, it used DataSourceTagHelperType.Custom. But then on a page describing how to set the type parameter of datasource, it doesn't even mention DataSourceTagHelperType.Custom as an option?! Huh??? What in heck is going on? The only explanation I could come up with is your documentation is out of date, but which one? I thought I'd try using odata, in a desparate move to try to get the AutoComplete control to render. It didn't work. So, I'm more confused. I can only conclude that either (a) there is at least 4 options that type could be assigned, and perhaps even more than 4, because I might not have come across additional pages and the documentation can't be bothered to enumerate through all possible values to assign to type, or (b) the documentation is inconsistent, or some is out of date.

But at the end of the day, the number 1 issue is this: I CANNOT READ MINDS!!!

There's no explanation anywhere, on any of the pages, saying WHY the person chose to use odata, or DataSourceTagHelperType.Custom, or anything else. And if you're like me, with no prior experience using Kendo UI for anything, let alone jQuery, I'm left with hoping that I stumble upon the correct page that I can minic what is used on that page and hope for the best.

Now, FWIW, I have just tried using

@addTagHelper "*, Kendo.Mvc"

that didn't render the AutoComplete control, either.

[Georgi]

Hello, Rod,

I am sorry to hear about your frustrating experience. I will try to briefly explain the purpose of the DataSource.Type setting. It's main idea is to provide some predefined configuration to make the DataSource compatible with different formats of data. For example if you use an oData service. When you choose to use the custom type, you have to configure all these predefined settings yourself - specify which property contains the data, which one contains the count of data, etc.

As for why the component is not rendering, please note that the quotes in the addTagHelper directive are unnecessary, it should be as follows: 

@addTagHelper *, Kendo.Mvc

In case the component still does not render, could you please provide us with a sample that we can examine locally and find out what is causing the problem.

Thanks in advance for your understanding.