Multiple AutoComplete with dynamic data bindind

10 posts, 1 answers
  1. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 08 Nov Link to this post

    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

     

     

     

     

     

     

  2. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 08 Nov in reply to Neelima Link to this post

    $("#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.

  3. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 08 Nov in reply to Neelima Link to this post

    $("#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.

     

     

  4. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 08 Nov in reply to Neelima Link to this post

    $("#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.

  5. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 08 Nov Link to this post

    Apologies for the duplicate replies. There was some problem with the site while submitting :)
  6. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 08 Nov Link to this post

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

    Exactly the same scenario.

  7. Answer
    Neli
    Admin
    Neli avatar
    59 posts

    Posted 10 Nov Link to this post

    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: {
            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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 10 Nov in reply to Neli Link to this post

    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}}

     

  9. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 10 Nov Link to this post

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

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

     

     

  10. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 10 Nov Link to this post

    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

Back to Top