AutoComplete show not found

[Jimmy]

Hi I have the code and result below, but Auto Complete show not fund any thing i missing or got it wrong here?

@(Html.Kendo().AutoComplete()
.Name("ceaSearch")
.HtmlAttributes(new { style = "width:100%" })
.DataTextField("salesperson_name")
.MinLength(1)
.DataSource(source =>{
    source.Read(read =>
    {
        read.Url("https://data.gov.sg/api/action/datastore_search")
        .Data("getCEAData");
    })
    .ServerFiltering(true)
    .Custom()
    .Schema(schema => schema
        .Data("records")
        .Type("json")
        .Model(model =>
        {
            model.Id("salesperson_nam");
            model.Field("registration_no", typeof(string));
            model.Field("estate_agent_name", typeof(string));
            model.Field("estate_agent_license_no", typeof(string));
        })
    );
}).Template("<span>#: records.salesperson_name#</span>"))

 

 

function getCEAData() {

    var value = $("#ceaSearch").data("kendoAutoComplete").value();
    return {
        resource_id: 'a41ce851-728e-4d65-8dc5-e0515a01ff31', // the resource id
        q: value
    };
}

 

The API returned data below. but Autocomplate show not found

 

{"help": "https://data.gov.sg/api/3/action/help_show?name=datastore_search", "success": true, "result": {"resource_id": "a41ce851-728e-4d65-8dc5-e0515a01ff31", "fields": [{"type": "int4", "id": "_id"}, {"type": "text", "id": "salesperson_name"}, {"type": "text", "id": "registration_no"}, {"type": "text", "id": "registration_start_date"}, {"type": "text", "id": "registration_end_date"}, {"type": "text", "id": "estate_agent_name"}, {"type": "text", "id": "estate_agent_license_no"}, {"type": "int8", "id": "_full_count"}, {"type": "float4", "id": "rank"}], "q": "merita", "records": [{"registration_end_date": "2019-12-31", "estate_agent_license_no": "L3008536D", "salesperson_name": "MERITA LOUISE TIN GUEK PING (DENG YUEPING) (MERITA LOUISE TIN)", "registration_no": "R000662B", "rank": 0.0706241, "_full_count": "2", "registration_start_date": "2015-11-03", "estate_agent_name": "LANDPLUS PROPERTY NETWORK PTE LTD", "_id": 30808}, {"registration_end_date": "2019-12-31", "estate_agent_license_no": "L3008536D", "salesperson_name": "MERITA LOUISE TIN GUEK PING (DENG YUEPING) (MERITA LOUISE TIN)", "registration_no": "R000662B", "rank": 0.0706241, "_full_count": "2", "registration_start_date": "2015-11-03", "estate_agent_name": "LANDPLUS PROPERTY NETWORK PTE LTD", "_id": 32886}], "_links": {"start": "/api/action/datastore_search?q=merita&resource_id=a41ce851-728e-4d65-8dc5-e0515a01ff31", "next": "/api/action/datastore_search?q=merita&offset=100&resource_id=a41ce851-728e-4d65-8dc5-e0515a01ff31"}, "total": 2}}

[Jimmy]

I have managed to get the records now by changing the schema data to result.data. but I still have a few other issues.

as the API provider is returning the result based on my "q" value, I set .ServerFiltering(true), but this will cause the url to include extra filter paramaters, how to i remove that and just pass the value I specified?

https://data.gov.sg/api/action/datastore_search?resource_id=a41ce851-728e-4d65-8dc5-e0515a01ff31&q=m&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=m&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=contains&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=salesperson_name&filter%5Bfilters%5D%5B0%5D%5BignoreCase%5D=true&filter%5Blogic%5D=and

another problem is after entering more than 2 character, kendo stopped calling the API.

[Ivan Danchev]

Hi,

By default the DataSource will send a query string in the following format with the request to the server:

filter[logic]   and
filter[filters][0][value]
filter[filters][0][field]
filter[filters][0][operator]    startswith
filter[filters][0][ignoreCase]  true

To send only the parameters you want you can either use the dataSource's data function or the parameterMap function. 

The DataSource parameterMap configuration in MVC or Core context would look like this:

.DataSource(d => d
    .Custom()
    .Schema(schema => schema
        .Data("records")
        .Type("json")
        .Model(model =>
        {
            model.Id("salesperson_name");
            model.Field("registration_no", typeof(string));
        }))
        .Transport(transport =>
        {
            transport.Read(read =>
                read.Url("https://data.gov.sg/api/action/datastore_search")
            );
            transport.ParameterMap("parameterMap");
        })
        .ServerFiltering(true)
)

and the function:

function parameterMap(options, operation) {
    if (operation == "read") {
        return {
            q: $("#ceaSearch").val()
        };
    }
}

On a side note I noticed a difference in the field set as DataTextField:

.DataTextField("salesperson_name")

and the one set to the model:

model.Id("salesperson_nam");

It could be a typo, but it's something to check. 

Regards,
Ivan Danchev
Progress Telerik

[Jimmy]

Thanks Ivan for the reply. Yes I figure that out and managed to get it work. We really like Keno when it works, but the problem for new user is that we need to dig everywhere to find an answer, the above issue took me 1 day to figure out. The demo site only provide standard practice. if something like above is also included in the demo site, it will be easier for new user to get all the information we need and that really cut short our development time.

 

[Ivan Danchev]

Hi Jimmy,

Unfortunately we would not be able to cover all possible configuration and usage scenarios with demos. More complex widgets such as the DataSource or the Grid, have dozens of configuration options, methods and events, therefore in the demos we are showing only the most commonly used scenarios, whereas the API documentation contains more details on the available configuration, methods and events along with examples of their usage.

Having said that, currently we are in the process of updating and improving the UI for ASP.NET Core documentation and bringing it more on par with the Kendo UI for jQuery documentation.

Regards,
Ivan Danchev
Progress Telerik

[Jimmy]

Hi Ivan

Glad the know you guys are working on updating the documentation. Understand that it is not possible to cover all area but it is still good to be as comprehensive as possible to help us developer on our work. Currently we spend around 50% of our time on figuring out how to use the more advance feature of kendo's component.

 

Thank You!

[Michael]

I would also suggest that the documentation should at least contain examples where the data is retrieved from a server side source as well. Not just hard coding the data in an array.

[Ivan Danchev]

Hello Michael,

We already are including such examples. Since this thread is about the AutoComplete, here's the binding documentation article of the helper, which demonstrates how to populate it with data from the server.

Regards,
Ivan Danchev
Progress Telerik

[Michael]

Thanks. What I should have written was using a datasource with a complex list, i.e.,

List<Fruit> fruit = new List<Fruit>();
fruit.Add(new Fruit(){Id=1, Name="Apple", Description="A fruit that supposedly fell on Newton's head."});
fruit.Add(new Fruit(){Id=2, Name="Banana", Description="A fruit that is yellow and loved by monkeys."});

[Ivan Danchev]

Michael,

In the article I linked the data returned is an IEnumerable<ProductViewModel>. It can be substituted with a List<ProductViewModel>. And while in this example ProductViewModel has only ProductID and ProductName properties, it can have an arbitrary amount properties of different types depending on your needs. Or do you refer to another helper's documentation?

Regards,
Ivan Danchev
Progress Telerik