Multiple AutoComplete with dynamic data bindind

[Neelima]

Hi there,

I have a textbox where the user can enter multiple partnumbers (as comma separated) and the partnumber should have the autocomplete feature enabled for every selection. This was possible with the kendo autocomplete feature easily. But in my case, there were around 2 lakh partnumbers in the DB and so, the page was stuck up, when it tries to load the data. So, instead we wanted to only pull the top 20 matching partnumbers in the autocomplete functionality.

With this being said, we should be making Server Filtering instead of getting all the data in one shot. I did see multiple similar examples, but nothing was working in my case, as I was trying to fetch the data from the DB using stored procedure call. Below is my code.

 $("#txtPartNumbers").kendoAutoComplete({
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: ApiBaseUrl.val + 'mycontroller/getParts',
                        type: "get",
                        dataType: "json",
                        data: { partNumber: 200, maxCount = 20}
                    }
                }
            },
            filter: "startswith",
            placeholder: "Select Inventory Parts..",
            minLength: 3,
            separator: ", "
        });

 

partNumber (is the search text) and maxCount(20 in my case) are the parameters that I used to pass to the controller method and then to the stored procedure.

 

 

Appreciate your help on this.

 

Thanks!

Regards

Neelima

 

 

 

 

 

 

[Neelima]

$("#txtPartNumbers").kendoAutoComplete({
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: ApiBaseUrl.val + 'inventoryLocation/getParts',
                        type: "get",
                        dataType: "json",
                        data: { partNumber: 20013}
                    }
                }
            },
            filter: "startswith",
            placeholder: "Select Inventory Parts..",
            minLength: 3,
            separator: ", "
        });

 

This is actually working fine. Except that I dont know how to pass the parameters dynamically. If you see above, I have hardcoded the partNumber as 200. Instead I should take this value from what the user has entered in the textbox.

[Neelima]

$("#txtPartNumbers").kendoAutoComplete({
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: ApiBaseUrl.val + 'inventoryLocation/getParts',
                        type: "get",
                        dataType: "json",
                        data: { partNumber: 20013}
                    }
                }
            },
            filter: "startswith",
            placeholder: "Select Inventory Parts..",
            minLength: 3,
            separator: ", "
        });

 

This is actually working fine now. Except that I am unable to pass the parameter values dynamically. I have hardcoded partNumber as 200 above. Instead I wante to get that value from what the user has entered and accordingly pull the data.

Any thoughts please.

 

 

[Neelima]

$("#txtPartNumbers").kendoAutoComplete({
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: ApiBaseUrl.val + 'inventoryLocation/getParts',
                        type: "get",
                        dataType: "json",
                        data: { partNumber: 20013}
                    }
                }
            },
            filter: "startswith",
            placeholder: "Select Inventory Parts..",
            minLength: 3,
            separator: ", "
        });

This is actually working fine now. Except that I am unable to pass the parameter values dynamically. I have hardcoded partNumber as 200 above. Instead I wante to get that value from what the user has entered and accordingly pull the data.

Any thoughts please.

[Neelima]

Apologies for the duplicate replies. There was some problem with the site while submitting :)

[Neelima]

https://www.telerik.com/forums/autocomplete-server-filtering-and-webapi2-controller#poOGd9rMXUOjQlhSC1qUFg

Exactly the same scenario.

[Neli]

Hi Neelima,

You could configure the transport.read.data configuration to retrieve the result from function.
In the function you could retrieve and return the value, entered by the user.

transport: {
    read: {
        url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        dataType: "json",
        data: function (){
            return { partNumber: $('#partNumber').val() };
        }
    }
}

As you could see in the attached screencast, the value is send with the request as parameter.

I hope that the enclosed Dojo will help.


Regards,
Neli
Progress Telerik

[Neelima]

Thanks for the reply Neli. I am still facing the issue. I could pass the parameters from my autocomplete fucntion. However, the same is not received by the controller class.

 

Below is the error message:

 

{"message":"No HTTP resource was found that matches the request URI 'https://localhost/myAPI/mycontroller/getParts?filter[logic]=and&filter[filters][0][value]=200&filter[filters][0][operator]=startswith&filter[filters][0][field]=PartNumber&filter[filters][0][ignoreCase]=true'.","messageDetail":"No action was found on the controller 'InventoryLocationSearch' that matches the request."}

 

Below is how my API method and js code looks like:

 

$("#txtPartNumbers").kendoAutoComplete({
            dataSource: {
                serverFiltering: true,
                enforceMinLength: true,
                transport: {
                    read: {
                        url: ApiBaseUrl.val + 'mycontroller/getParts',
                        type: "get",
                        dataType: "json",
                        params: { partNumber: $scope.autoCompleteText }
                        //data: function () {
                        //    return { partNumber: $scope.autoCompleteText }
                        //}
                    }
                },
            },
            dataTextField: "PartNumber",
            change: function(e) {
                $scope.autoCompleteText = this.value();
                alert($scope.autoCompleteText);
            },
            filter: "startswith",
            placeholder: "Select Inventory Parts..",
            minLength: 3,
            separator: ", "
        });

 

MVC Controller:

 

        [HttpGet]
        [Route("getParts")]
        public IHttpActionResult GetInventoryParts(string partNumber)
        {

          //get partNumber value here and pass it to the service

            return Execute(() => this.myService.GetParts(partText));
        }

 

 

Am I defining something wrong?

 

If I modify the change that you suggested as below:

params: { partNumber: $scope.autoCompleteText }
                        data: function () {
                           return { partNumber: $scope.autoCompleteText }
                        }

 

{"Message":"Unhandle Exception","Exception":{"ClassName":"System.FormatException","Message":"The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters. ","Data":null,"InnerException":null,"HelpURL":null,"StackTraceString":" at System.Convert.FromBase64_Decode(Char* startInputPtr, Int32 inputLength, Byte* startDestPtr, Int32 destLength)\r\n at System.Convert.FromBase64CharPtr(Char* inputPtr, Int32 inputLength)\r\n at System.Convert.FromBase64String(String s)\r\n at Warp.Foundation.Auth.Web.Common.WebTokenResolver.GetToken() in C:\\T\\S1\\warp.foundation.auth\\src\\Warp.Foundation.Auth.Web\\Common\\WebTokenResolver.cs:line 70\r\n at Warp.Foundation.Auth.Core.Resolver.AuthResolver.FilterAuthProviders() in C:\\T\\S1\\warp.foundation.auth\\src\\Warp.Foundation.Auth.Core\\Resolver\\AuthResolver.cs:line 216\r\n at Warp.Foundation.Auth.Core.Resolver.AuthResolver.Resolve() in C:\\T\\S1\\warp.foundation.auth\\src\\Warp.Foundation.Auth.Core\\Resolver\\AuthResolver.cs:line 121\r\n at Warp.Foundation.Auth.Web.WebApi.Filters.ApiAuthorizeFilter.AuthenticateAsync(HttpAuthenticationContext context, CancellationToken cancellationToken) in C:\\T\\S1\\warp.foundation.auth\\src\\Warp.Foundation.Auth.Web.WebApi\\Filters\\ApiAuthorizeFilter.cs:line 67","RemoteStackTraceString":null,"RemoteStackIndex":0,"ExceptionMethod":"8\nFromBase64_Decode\nmscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089\nSystem.Convert\nInt32 FromBase64_Decode(Char*, Int32, Byte*, Int32)","HResult":-2146233033,"Source":"mscorlib","WatsonBuckets":null}}

 

[Neelima]

The change I meant was removing params and defining data as below

                  //params: { partNumber: $scope.autoCompleteText },
                  data: function () {
                           return { partNumber: $scope.autoCompleteText }
                  }

 

 

[Neelima]

Was able to resolve the issue:

using the below in my controller. Wasn't able to pass it as a normal parameter though.

string partText = HttpContext.Current.Request.QueryString.Get("filter[filters][0][value]"); 

 

Thanks for your help.

 

Regards

Neelima