How can I create a empty field like "placeholder"?

[Lucas]

Hi, how can I set by default an empty field to my Query Builder like a placeholder (empty data)?

And how can I show the "+" button when my data is empty?

Thanks.

[Vinoth Kumar Sundara Moorthy]

Hi Lucas, 

 

Thank you for contacting syncfusion support. 

 

#1: how can I set by default an empty field to my Query Builder like a placeholder (empty data)? 

We have checked your requirement and we suspect that you need to display the place holder value for DropDownList at initial rendering. And we would like to let you know that, if you haven’t referred the rule property, so the QueryBuilder renders as like in your provided screenshot. For your convenience, we have prepared the below sample based on your requirement. 

 

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

 

Could you please check the above sample and get back to us with more details, if we misunderstood your requirement? 

 

#2: how can I show the "+" button when my data is empty? 

Before we provide solution for this, we would like to know your exact use case requirement about “adding ‘+’ button when data is empty”. Could you please let us know where you want to add plus button and when it should be added? 

 

Regards, 

Vinoth Kumar S 

[Lucas]

Hi, thanks for reply. I found the problem: when I use the method reset(), my query builder don't show the default empty field that I want, instead just show the buttons (AND, OR and Plus).



My code works like this:

I have a tree view, and when I select a node the query builder changes using the dataSource inside the selected node.
To refresh the query builder, I have two conditions:

if selectedNode contains defined rules (is not empty) 

    builder.setRules(selectedNode.rules);

else  // could be null, empty object {}, undefined

   builder.reset();

Is the reset() the right method to my situation?

Thanks.

[Vinoth Kumar Sundara Moorthy]

Hi Lucas, 

 

Good day to you. 

 

Yes, you can use the reset() method to achieve your requirement. For your convenience, we have prepared sample for your requirement and same can be found in below link, 

 

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

 

Could you please check the above sample and get back to us if we misunderstood your requirement or you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S