We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Strange behavior on Enter key pressed + QueryBuilder

Thread ID:

Created:

Updated:

Platform:

Replies:

145883 Jul 11,2019 09:08 PM UTC Aug 9,2019 12:45 PM UTC ASP.NET Core - EJ 2 10
loading
Tags: Query Builder
pk
Asked On July 11, 2019 09:08 PM UTC

hi, 

I'm having an issue with the autocomplete & queryBuilder components. 
I'm using a UrlAdaptor, a custom itemTemplate and an e-autocomplete-filds to search by a particular field.
the select event calls:

<ejs-autocomplete id="autoCompleteWhereConditions" 
                                                      itemTemplate="@Html.Raw("<div><div class=''> ${name} </div><div class='font-weight-light text-muted text-monospace'> ${sqlRule} </div></div>")"
                                                      select="loadRule" >
                                        <e-data-manager url="@Url.Action("GetPreviousQueryConditions")" adaptor="UrlAdaptor"></e-data-manager>
                                        <e-autocomplete-fields value="name"></e-autocomplete-fields>
                                    </ejs-autocomplete>

function loadRule(args) {
        var querybuilderObj = getMyQueryBuilderInstance();
        querybuilderObj.setRules(args.itemData.rule);
    }

function getMyQueryBuilderInstance() {
        return ej.base.getInstance(document.getElementById("myQuerybuilder"), ej.querybuilder.QueryBuilder);
    }

The queryBuilder loads the new rule, and displays it automatically. 
The rule it's a value in the autocomplete item, and it has this structure:

public class Rule
    {
        public string Condition { get; set; }
        public string Label { get; set; }
        public string Field { get; set; }
        public string Operator { get; set; }
        public string Type { get; set; }
        public string Value { get; set; }
        public List<Rule> Rules { get; set; }
    }

So you know.. the rule is a "group" (as the base rule) with and operator value (and/or) or its a conditions with the other field filled with values..

This works great, with no problem at all.... when I CLICK on the autocomplete item.

But if I select the item pressing ENTER something strange happens.
(the base object contains {operation:"and" and rules:[]})
If the rules array contains only one condition.. the querybuilder loads nothing..
If the rules array contains 2 conditions (in the same base group.. and even if theres more groups).. the first rule doesnt get loaded..

So, the problem is that is getting rid of the first rules array element

Any clue?
Could be something related to an async logic? because, if I debug and go step by step, I dont get this error.

Thanks in advance.




pk
Replied On July 23, 2019 08:15 PM UTC

Any advance on the matter?

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On July 25, 2019 06:54 AM UTC

Hi Pablo, 
 
Good day to you. 
 
We have checked your reported issue and we are not able to reproduce it. For your convenience, we have prepared the sample for your requirement and same can be downloaded from below link, 
 
 
Could you please check the above sample and get back to is with more details like issue replicable sample or video demonstration If you still face the issue? 
 
Regards,  
Vinoth Kumar S 


pk
Replied On August 1, 2019 12:58 PM UTC

hi, 

I tried using a harcoded rule to set, using the structure in your example and regardless the selection, on click, it works, on enter, it doesn't.

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On August 2, 2019 01:05 PM UTC

Hi Pablo, 
 
Good day to you. 
 
We have checked your reported issue and we can achieve it by using filtering event in autocomplete component. By default, filter event will be triggered when you press enter key after entering the word. 
 
Code Example 
<ejs-autocomplete id="autoCompleteWhereConditions" 
                    itemTemplate="@Html.Raw('<div><div class=''> ${ShipCountry} </div></div>')" 
                    select="loadRule" filtering="loadRule"> 
    <e-data-manager url="Home/ACDataSource" adaptor="UrlAdaptor" crossDomain="true"></e-data-manager> 
    <e-autocomplete-fields value="ShipCountry"></e-autocomplete-fields> 
</ejs-autocomplete> 
 
 
For your convenience, we have prepared a sample and the same can be downloaded from the below link, 
 
Could you please check the above details and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 


pk
Replied On August 2, 2019 02:40 PM UTC

Hi Vinoth Kumar S, 

Thanks for the feedback and trying to reproduce my error, but I'm sorry to say that this error you found with filtering event is not the one I'm facing.

I explained in my first comment, the problem is on the select event and that there's a difference between selecting on click than on enter.

It's not that the rule doesn't get loaded on the QueryBuilder when I hit enter, it does, but the only weird thing is that the first rule condition of the first array of rules doesn't get load, only that one.. the rest of the rule gets loaded fine.

for example, in a rule like this:

let ruleToImport = {
                    'condition': 'or',
                    'rules': [{
                        'label': 'ShipCountry',
                        'field': 'ShipCountry',
                        'type': 'string',
                        'operator': 'equal',
                        'value': 'asd'
                    },
                    {
                        'label': 'ShipCountry',
                        'field': 'ShipCountry',
                        'type': 'string',
                        'operator': 'equal',
                        'value': 'zxc'
                    }]
                };

The rule of the "asd" value doesn't get loaded...

But if I use the dev tools of the browser (Chrome) and debug that piece of code step by step, it works.
As I said before, there must be something async or so.

Ok, look, I tried this out, and works... apparently

function loadRule(args){
     if (args !== undefined && args.e.action === 'enter')
           setTimeout(setRule.bind(null, args.itemData.rule));
     else
          setRule(args.itemData.rule);
}

function setRule(rule){
     const querybuilderObj = getMyQueryBuilderInstance();
      querybuilderObj.setRules(rule);
}

So, there's something, if it gets loaded on the end of that call stack..
This might be a solution, but it's not the right one from my point of view. This should be managed by the lib.

Please try to reproduce my issue so at least I get an idea of why the difference in how the select event gets triggered makes such weird thing to happen.

Thanks.

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On August 5, 2019 01:16 PM UTC

Hi Pablo, 
 
Good day to you. 
 
We would like to know the following details to proceed further, 
 
1.       Confirm whether you are loading rules from server side.  
2.       Confirm whether you are using the latest script. If not please check the sample with latest scripts and package. 
 
Could you please provide the above requested information? So that we can analyze based on that and provide you better solution at earliest. 
 
Regards, 
Vinoth Kumar S 


pk
Replied On August 7, 2019 08:15 PM UTC

yes and yes.

Ashokkumar Balasubramanian [Syncfusion]
Replied On August 8, 2019 12:57 PM UTC

Hi Pablo, 
 
This is already known issue (“the first rule condition of the first array of rules doesn't get load, only that one. the rest of the rule gets loaded fine.”)) at our end. Also, we have fixed this issue and included in our Essential JavaScript 2 patch release (v17.1.42). So, we would suggest you use the latest updated package to resolve this issue in your end. Could you please update the Nuget packages and JS file to resolve this issue in your end?  
 
 
Could you please check the above link and upgrade the Syncfusion packages in your end? And kindly get back to us if you still getting the same issue or need further assistance on this. 
 
Regards, 
Ashokkumar B. 


pk
Replied On August 8, 2019 01:22 PM UTC

I'm using nuget package version 17.2.0.34 (higher than 17.1.42), and the js script I load form the cdn, and its the latest.

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On August 9, 2019 12:45 PM UTC

Hi Pablo, 
 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you follow up with the incident for further updates. Please log in using the below link.  
 
 
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon