Using query builder with multiple data types

[Ryan Ngoh]

I have a data set of multiple types of data (string, number, date, boolean). An example array of objects could be 

[{

string: 'sample',

number: 1,

isValid: true,

date: new Date()

},

{

string: 'sample2',

number: 2,

isValid: false,

date: new Date()

},

string: 'sample3',

number: 3,

isValid: false,

date: random date

}, ... and so forth]

What my columns on my QueryBuilderComponent  is 

[{field: 'string', label: 'String', type: 'string'},

{field: 'number', label: 'Number', type: 'number'},

{field: 'isValid', label: 'Is Valid', type: 'boolean'},

{field: 'date', label: 'Date', type: 'date'}]

1. It was difficult finding the specific docs for the column options but I attempted to use type boolean for one of the qb columns and when building a query, the predicate value returned from qbObj.getPredicate are strings True and False. This fails the equal query because it is trying to compare string 'True' with boolean true. How can I get query builder to compare boolean values properly?

2. When attempting the above, I also tried changing the QueryBuilderComponent column into {field: 'isValid', label: 'Is Valid', type: 'boolean', values: [true, false]}. This would actually query the data properly but then the text for false would not show up. If this is the right way to go about querying for bool, how would I properly get the text for false?

 

3. T.his may be a bug or just myself but when adding a new collection or first attempting to make a query, I open the query builder via button click. I load the query builder into a modal

Select a field

Select operator

but I DO NOT select a value true, false, or any other value for the other operators and click Apply, it triggers getPredicate but returns undefined, although clearly there is something 'selected' (false appears selected by default). How do I actually apply a default value when a collection is added?

4. Is there a way to show the full query string applied to the data source? For instance, if I use the query builder to filter isValid equals true AND number isgreaterthan 1, output that query string into a div or component something along the lines of "isValid = true AND number > 1".

5. How would I clear the query and reset the data source grid on click of a 'clear' button?

[Silambarasan I]

Hi Ryan, 

 

Thank you for contacting Syncfusion support. 

 

Query #1 This fails the equal query because it is trying to compare string 'True' with boolean true. How can I get query builder to compare boolean values properly? 

Query#2: I also tried changing the QueryBuilderComponent column into {field: 'isValid', label: 'Is Valid', type: 'boolean', values: [true, false]}. This would actually query the data properly but then the text for false would not show up 

Query #3: I DO NOT select a value true, false, or any other value for the other operators and click Apply, it triggers getPredicate but returns undefined 

 

We confirmed that the above issues are defects and we have logged a defect reports for the same. And, the fix for these issues will be included in our Essential Studio 2019 Volume 1 Service Pack 1 release which has been scheduled to be rolled out in the month of April 2019. 

 

Query #4: How do I actually apply a default value when a collection is added? 

 

Based on our current implementation behavior, we don’t have provided option for setting the default value because we have mapped only the column and data source may vary accordingly, so it not feasible. 

 

Query#5: Is there a way to show the full query string applied to the data source? 

 

According to our current architecture, we generate only the predicate not the attribute and relation in the query string. If you want to make get the full query string, you have to make in your end based on your table name with generated predicates in query builder. 

 

Query#6: For instance, if I use the query builder to filter isValid equals true AND number isgreaterthan 1, output that query string into a div or component something along the lines of "isValid = true AND number > 1". 

 

Your requirement to show the predicates in the div or component is achievable. We have showcased the generated predicates in our demo sample itself, please find the below link for more details. 

 

Demo Link:  

https://ej2.syncfusion.com/react/demos/#/material/query-builder/template 

 

Query#7: How would I clear the query and reset the data source grid on click of a 'clear' button? 

 

We have checked your reported requirement and it can be achievable by using 'reset()' client side method. For your convenience, we have prepared a sample that clear the query and refresh the datasource of grid in a button click event. Please find the sample link below. 

 

Sample Link: 

https://stackblitz.com/edit/react-z2mfa4?file=index.js 

 

Could you please check the above information and get back to us if you need any further assistance on this? 

 

Regards, 

Silambarasan 

[Ryan Ngoh]

For Query #4: How do I actually apply a default value when a collection is added? , I was thinking more along the lines of how to set custom selection options. For instance, If [STRING] equals [Selection]. How would I input my own custom selection options 

[Silambarasan I]

Hi Ryan, 

 

Thanks for your update. 

 

As we stated earlier, we don’t have provided option for setting the custom selection value because we have mapped only the column as per our current implementation. However, we considered this requirement as improvement and logged improvement task for “Provide support to set the default selection option for fields”. This will be available with our Essential Studio 2019 Volume 1 Service Pack 1 release which has been scheduled to be rolled-out in the month of April, 2019. We appreciate your patience until then. 

 

Meanwhile, you can now track the current status of this improvement and contact us for any further inquiries through the below link from our feedback portal. 

https://www.syncfusion.com/feedback/5133/need-to-provide-support-to-set-the-default-selection-option-for-fields 

 

Regards, 

Silambarasan 

[Evin Lewis]

Thanks for the link you gave and I also got to know more about it from https://netgears.support/netgear-genie-support 

[Silambarasan I]

Hi Evin, 

 

Thanks for your update. 

 

Based on the provided information (I also got to know more about it from https://netgears.support/netgear-genie-support), we are unclear about your exact reported requirement. Could you please check and get back to us with more information about your query with our components so, that we can analyze and provide you a solution sooner? 

 

Regards, 

Silambarasan 

[Ryan Ngoh]

When is the proposed fix going to be implemented?

[Vinoth Kumar Sundara Moorthy]

Hi Ryan,  

 

As we stated earlier, this support will be available with our Essential Studio 2019 Volume 1 Service Pack 1 release which has been scheduled to be rolled-out in the end of April 2019. We will inform you once release has been rolled out and we appreciate your patience until then.  

 

Also, you can track the status of this improvement using the below link from our feedback portal.  

https://www.syncfusion.com/feedback/5133/need-to-provide-support-to-set-the-default-selection-option-for-fields 

  

Regards,  

Vinoth Kumar S 

[Vinoth Kumar Sundara Moorthy]

Hi Ryan,  

 

Good day to you.  

 

We have added the support to set the default selection option for fields in our latest version (17.1.49). For your convenience, we have prepared the sample and the same can be found in below link, 

 

https://stackblitz.com/edit/vvrrye?file=index.ts 

 

Could you please check the above sample and get beck to us if you need any further assistance on this?  

 

Regards,  

Vinoth Kumar S 

[Ryan Ngoh]

This doesn't solve the main reason for this ticket. I need a way to compare for boolean and now it just accepts true always. https://stackblitz.com/edit/vvrrye-yy5dvh?file=index.ts

[Sangeetha Priya Murugan]

Hi Ryan, 

 

Thank you for your update. 

 

We have checked your reported issue in the version (17.1.50) and we suspect the cause of the issue is due to you haven’t refer the value property for the field. So we would suggest you to use value property as like in the below code example to avoid this issue. 

 

Code Example: 

let columnData: ColumnsModel[] = [ 

..// 

{ field: 'Hired', label: 'Hired', type: 'boolean', values: ['true', 'false'] }, 

]; 

 

For your convenience, we have modified your sample based on your requirement. Please find the link below. 

 

Sample Link: https://stackblitz.com/edit/vvrrye-dike6s?file=index.ts 

 

Note: Use the latest package (17.1.50) for querybuilder. 

 

Could you please check the above details and get back to us, if you need any further assistance on this. 

 

Regards, 

Sangeetha M