Issue with filtering causing uncaught promise in edit screen and not getting all available data

[David Wisenbaugh]

Hello 

I am working with the combobox component I have it setup as a custom component in my application right now I am having issues with switching to my edit screen and the controls I have are throwing an uncaught (in promise) error in the console. After further investigation I have tracked it down to an issue with the filtering query. I am one getting datamanager undefined, and second getting this error  from the query 

https://localhost:5001/odata/Manufacturers?$select=ManufacturerName,Id&$filter=startswith(tolower(ManufacturerName),%27acer%27)%20and%20Id%20eq%20%27Acer%27

"error": {

        "code": "",

        "message": "The query specified in the URI is not valid. A binary operator with incompatible types was detected. Found operand types 

'Edm.Int32' and 'Edm.String' for operator kind 'Equal'.",

        "details": [],

        "innererror": {

            "message": "A binary operator with incompatible types was detected. Found operand types 'Edm.Int32' and 'Edm.String' for operator kind 'Equal'.",

            "type": "Microsoft.OData.ODataException",

            "stacktrace": "   at Microsoft.OData.UriParser.BinaryOperatorBinder.PromoteOperandTypes

(BinaryOperatorKind binaryOperatorKind, SingleValueNode& left, SingleValueNode& right, TypeFacetsPromotionRules facetsPromotionRules)\r\n   

at Microsoft.OData.UriParser.ODataUriResolver.PromoteBinaryOperandTypes(BinaryOperatorKind binaryOperatorKind, SingleValueNode& leftNode, SingleValueNode& 

rightNode, IEdmTypeReference& typeReference)\r\n   at Microsoft.OData.UriParser.BinaryOperatorBinder.BindBinaryOperator(BinaryOperatorToken binaryOperatorToken)\r\n

   at Microsoft.OData.UriParser.MetadataBinder.BindBinaryOperator(BinaryOperatorToken binaryOperatorToken)\r\n   at Microsoft.OData.UriParser.MetadataBinder.Bind

(QueryToken token)\r\n   at Microsoft.OData.UriParser.BinaryOperatorBinder.GetOperandFromToken(BinaryOperatorKind operatorKind, QueryToken queryToken)\r\n   

at Microsoft.OData.UriParser.BinaryOperatorBinder.BindBinaryOperator(BinaryOperatorToken binaryOperatorToken)\r\n   at Microsoft.OData.UriParser.MetadataBinder.

BindBinaryOperator(BinaryOperatorToken binaryOperatorToken)\r\n   at Microsoft.OData.UriParser.MetadataBinder.Bind(QueryToken token)\r\n   at 

Microsoft.OData.UriParser.FilterBinder.BindFilter(QueryToken filter)\r\n   at Microsoft.OData.UriParser.ODataQueryOptionParser.

ParseFilterImplementation(String filter, ODataUriParserConfiguration configuration, ODataPathInfo odataPathInfo)\r\n   

at Microsoft.OData.UriParser.ODataQueryOptionParser.ParseFilter()\r\n   at Microsoft.AspNet.OData.Query.FilterQueryOption.get_FilterClause()\r\n  

 at Microsoft.AspNet.OData.Query.Validators.FilterQueryValidator.Validate(FilterQueryOption filterQueryOption, ODataValidationSettings settings)\r\n   

at Microsoft.AspNet.OData.Query.FilterQueryOption.Validate(ODataValidationSettings validationSettings)\r\n   at Microsoft.AspNet.OData.Query.Validators

.ODataQueryValidator.Validate(ODataQueryOptions options, ODataValidationSettings validationSettings)\r\n   at Microsoft.AspNet.OData.Query.ODataQueryOptions.

Validate(ODataValidationSettings validationSettings)\r\n   at Microsoft.AspNet.OData.EnableQueryAttribute.ValidateQuery(HttpRequest request, ODataQueryOptions 

queryOptions)\r\n   at Microsoft.AspNet.OData.EnableQueryAttribute.CreateAndValidateQueryOptions(HttpRequest request, ODataQueryContext queryContext)\r\n   

at Microsoft.AspNet.OData.EnableQueryAttribute.<>c__DisplayClass1_0.<OnActionExecuted>b__1(ODataQueryContext queryContext)\r\n   at Microsoft.AspNet.OData.

EnableQueryAttribute.ExecuteQuery(Object responseValue, IQueryable singleResultCollection, IWebApiActionDescriptor actionDescriptor, Func`2 modelFunction, 

IWebApiRequestMessage request, Func`2 createQueryOptionFunction)\r\n   at Microsoft.AspNet.OData.EnableQueryAttribute.OnActionExecuted(Object responseValue,

 IQueryable singleResultCollection, IWebApiActionDescriptor actionDescriptor, IWebApiRequestMessage request, Func`2 modelFunction, Func`2 createQueryOptionFunction, Action`1 createResponseAction,

 Action`3 createErrorAction)"

        }

    }

}

When I run the query https://localhost:5001/odata/Manufacturers?$select=ManufacturerName,Id&$filter=startswith(tolower(ManufacturerName),%27acer%27)%20and%20Id%20eq%20%27Acer%27

I get the error, when i remove the FILTER perameter i get a good reponse.

I have tried using a custom filter script in my code but the component is not using it it is still using the built in filtering option.

here is my component .

<ejs-combobox id="category" ref="categoryObj" :popupHeight="height" :query="query" :ignoreCase="true" :autofill="autoFill" :allowFiltering="allowFiltering" :filtering="onfiltering" :noRecordsTemplate="nTemplate" :fields="fields" :dataSource="data" :placeholder="waterMark" floatLabelType="Auto" :focus="onFocus" v-model="inputValue" :cssClass="className"> </ejs-combobox>

and here is my custom filter code

onfiltering: function (e) {

                var data = new DataManager({

                    url: "https://localhost:5001/odata/Categories",

                    crossDomain: true

                });

                if (e.text == "") e.updateData(data);

                else {

                    var query = new Query().select(["Id", "CategoryName"]);

                    query = (e.text !== "") ? query.where('CategoryName', 'endswith', e.text, true) : query;

                    e.updateData(data, query);

                }

            }

Again the custom filtering code is not being picked up on by the component.

Can you help me figure out why this is happening so that I can get it resolved. I need the filtering capabilities of my custom value combobox but this is just not working as expected.

I have already updated to the latest components as well and the issue still persists.

please advise

David

[Vignesh Srinivasan]

Hi David, 

 

Greetings from Syncfusion support.  

 

We checked your reported query. We have prepared sample based on the give code snippet. But unfortunately we couldn’t replicate the reported issue in our end. Please find the sample below for reference.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox-Vue-20655457 

 

Kindly check with the above sample. If we misunderstood the query, please revert us with the below details.  

 

1. Share Video demonstration with issue replicating sample.
2. If possible try to replicate the issue in the above provided sample.

 

The above requested details will help us to check and provide you the solution at earliest.  

 

Regards, 

 

Vignesh Srinivasan. 

 

[David Wisenbaugh]

Attached is a video example of the issues 

As you can see when the screen is swiched to edit view I only get a single item in the combobox, I do not get the full list of items. 

I then show you the errors in the console window . the URI that is generated from the component errors out with an error 400 bad request . the uri is not formated correctly this is not my error but yours as I do not know where i can change this functionality. 

also It is not using the custom onFiltering method for the filtering but the built in filering option not sure that is the issue but the main part is the fact that I am getting that bad uri which I think is causing the whole thing to explode and not work right. How can I fix this uri issue so that we have the correct one going through to get the data properly for the dropdown of the combo box ?

Attachment: videoexample_44c33f24.zip

[Ponmani Murugaiyan]

Hi David, 

Thanks for the update. 

We have checked your provided video demonstration. Based on the code we have prepared sample and ensured in our end. But unfortunately we couldn’t replicate the issue in our end. Please find the sample and video demonstration for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox-Vue-20655457  

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_20-01-2021_7.38.26_AM.mp4-1856780766  

Kindly check with the above sample and video. If we are missing anything in our end to reproduce the issue. Please try to replicate the issue in the above provided sample which helps us to check and provide you the solution at earliest. 

Regards, 

Ponmani M 

[David Wisenbaugh]

The provided video sample does not show my issue .

the way to replicate this issue is to use the v-model directive with the combobox have it populate from remote data source it looks like it runs a query with a filter in my case the filter is like this 

1. filter=startswith(tolower(categoryName),%27computers%27)%20and%20id%20eq%20%27Computers%27

this part of the url that is generated by the component is throwing an Odata Exception error

 "message": "A binary operator with incompatible types was detected. Found operand types 'Edm.Int32' and 'Edm.String' for operator kind 'Equal'.",

            "type": "Microsoft.OData.ODataException",

From my research it is because the filter is not formated correctly it is filtering by ID I need it to filter by categoryName how can I set this up to do that ?

please advise

[Ponmani Murugaiyan]

Hi David, 

 

Thanks for the update. 

 

Query: From my research it is because the filter is not formatted correctly it is filtering by ID I need it to filter by categoryName how can I set this up to do that ? 

 

You can filter by categoryName as per your requirement using custom filtering through filtering event as like below code. 

 

https://ej2.syncfusion.com/vue/documentation/combo-box/filtering/ 

 

methods: { 

   filtering: function(e) { 

   var query = new Query(); 

   //frame the query based on search string with filter type. 

   query = (e.text != "") ? query.where("categoryName ", "startswith", e.text, true) : query; 

   //pass the filter data source, filter query to updateData method. 

    e.updateData(searchData, query); 

  } 

} 

 

Kindly check with the above suggestion to meet your requirement. Please get back us if you need further assistance.  

 

Regards, 

Ponmani M 

[David Wisenbaugh]

Thanks you for your assistance between some code issues on my end and a further look at some other examples given for the filtering we were able to resolve the issues surrounding the errors everything works now when switching over to the edit screen ... 

just one other question if I may.  with the filtering the combobox has the autoclear with the x is there a way to have that and show the entire list of items at the same time so that something can be selected without having to clear the box first ? 

any further assistance would be great .. 

thank you again for all your help .

[Sureshkumar P]

Hi David, 

 

Thanks for your update, 

 

Query: with the filtering the combobox has the autoclear with the x is there a way to have that and show the entire list of items at the same time so that something can be selected without having to clear the box first? 

 

Answer:  

             This is the default behaviour of our component when filtering the data in combobox the suggestion list will be showcased only with the matching items. So, we need to clear the filtering value to showcase all the list items.   

 

Please explain your exact scenario of your requirement with image or video representation that will help us to provide exact solution as earlier as possible. 

 

Regards, 

Sureshkumar P