Populating the in and not in dropdown in querybuilder without using data binding

Question

Is it possible to populate the "In" and "Not In" operator dropdown without using the data binding feature of the querybuilder?

What I'd like to do is only get and populate a "In/Not In" operator dropdown when the operator is selected for a field and only for that field.

Aravinthan Seetharaman · Answer

Hi Michael Aston,

Thanks for contacting Syncfusion support.

We have checked your reported issue, and we can able to bind operators for particular field without using data binding options.

@using Syncfusion.Blazor.QueryBuilder

<SfQueryBuilder TValue="EmployeeDetails">

<QueryBuilderColumns>

<QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number" Operators="@operators"></QueryBuilderColumn>

</QueryBuilderColumns>

</SfQueryBuilder>

@code {

private List<OperatorsModel> operators = new List<OperatorsModel> {

new OperatorsModel { Text="In",Value="in"},

new OperatorsModel{Text="NotIn",Value="notin"}

};

public class EmployeeDetails{

public int EmployeeID { get; set; }

}

Based on your requirement, we have prepared sample here:

Sample: https://www.syncfusion.com/downloads/support/forum/160359/ze/QueryBuilder-1119873884

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

Regards,

Aravinthan S.

Michael Aston · Answer

This is not quite what I'm after. I'm not looking to restrict the available operators but rather I'm looking to hook into the population of the dropdowns that support the "In" and "Not In" operators.

I want to avoid using the databind feature of the querybuilder to populate the dropdowns as I have many columns and its takes a long to retrieve all the data to bind. Rather I'd like to just get the list for the "In" or "Not In" operator dropdown when the column is selected in the querybuilder component.

Aravinthan Seetharaman · Answer

Hi Michael Aston, Sorry for the inconvenience caused, we have checked your requirement and we can able to achieve it by using QueryBuilderTemplate tag attribute. In the template we can define and use our required component. In the below sample we have rendered DropdownList for in and notin operator, and local data has been used for listing the items, and you can use remote data also. code snippet: @if (context.Operator == "notin" || context.Operator == "in") { } else { } Sample: https://www.syncfusion.com/downloads/support/directtrac/160359/ze/QueryBuilder-431743141 Could you please check with above details, and get back to us if you need any further assistance on this. Regards, Aravinthan S.

Michael Aston · Answer

That's great, just what I was after.One more question, do you have a sample that shows how to use the ColumnTemplate of the QueryBuilder?

Mohan Kumar Ramasamy · Answer

Hi Michael, 
 
We have checked your reported query. The Querybuilder ColumnTemplate same as ValueTemplate. 
 
Regards, 
Mohan kumar R

Mohan Kumar Ramasamy · Answer

Hi Michael, Please ignore previous update. We have prepared a sample for ColumnTemplate, please refer below code snippets and sample link. Sample Link: https://www.syncfusion.com/downloads/support/forum/160359/ze/QueryBuilderWithColumnTemplate1202424995 Code snippets

We have rendered ColumnTemplate for EmployeeID Field Please let us know, if you need any further assistance. Regards, Mohan kumar R

Michael Aston · Answer

Thanks for the sample, unfortunately the ColumnTemplate feature does not solve my issue.

The issue I'm trying to solve is that I have some long Column labels that are being truncated in the Column dropdown. To solve this I'm trying to add PopupWidth="Auto" to the dropdown. I had hoped that the ColumnTemplate would allow me to do this, which it does, but I hadn't realised that I'd loose the operator and value fields in the process, which I need to keep.

Do you have any suggestions on how to solve the truncation of long labels in the column dropdown?

Aravinthan Seetharaman · Answer

Hi Michael Aston,

We have checked your reported issue, and we suspect that this exception occurs due to not setting value for Field option while framing Rules in QueryBuilder.

<QueryBuilderRule Condition="or" Rules="Rules"></QueryBuilderRule>

List<RuleModel> Rules = new List<RuleModel>()

{

new RuleModel { Field="Country", Label="Country", Type="String", Operator="equal", Value = "England" },

new RuleModel { Field="EmployeeID", Label="EmployeeID", Type="Number", Operator="notequal", Value = 1001 }

};

Documentation: https://blazor.syncfusion.com/documentation/query-builder/import-export/#initial-rendering

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

Regards,

Aravinthan S

Michael Aston · Answer

Thanks for that, but its the column dropdown that I need to add the popupwidth="auto" to not the value dropdown.

Aravinthan Seetharaman · Answer

Hi Michael Aston, Sorry for the inconvenience caused. We have checked your reported query, and we can also, achieve your requirement in Column Template as like in the sample:

In the sample we are using SfDropDownList for Field and Operater values and SfSlider for Value of the column. Now we can able to set PopupWidth="Auto" to Field and Operator, if required. Sample: https://www.syncfusion.com/downloads/support/forum/160359/ze/QueryBuilder-2028255165 Could you please check the above details and get back to us, if you need further assistance on this. Regards, Aravinthan S

Michael Aston · Answer

Thanks for that. I wonder if you could help me further as run into another problem now. When I assign a list of Rules to the Querybuilder via

I get a NullReference Exception

With the following stack

Syncfusion.Blazor.dll!Syncfusion.Blazor.QueryBuilder.Internal.QueryBuilderRules<vx.Models.DashBoardScopeField>.SetField() Unknown

Syncfusion.Blazor.dll!Syncfusion.Blazor.QueryBuilder.Internal.QueryBuilderRules<vx.Models.DashBoardScopeField>.OnParametersSetAsync() Unknown

Microsoft.AspNetCore.Components.dll!Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync() Unknown

Are you able to tell me what could be causing the exception in SetField?

Aravinthan Seetharaman · Answer

Hi Michael Aston,

We have checked your reported query, and we can able to achieve your requirement that to avoid truncating of labels, by using PopupWidth=”Auto” Property in the SfDropDownList tag.

<QueryBuilderTemplates>

<ValueTemplate>

<SfDropDownList TValue="string" TItem="ItemFields" DataSource="@Items" @bind-Value="@DefaultValue" PopupWidth="Auto">

<DropDownListFieldSettings Text="Id"></DropDownListFieldSettings>

<DropDownListEvents TItem="ItemFields" TValue="string" ValueChange="e => OnChange(e, context)"></DropDownListEvents>

</SfDropDownList>

</ValueTemplate>

</QueryBuilderTemplates>

Based on your requirement we have prepared sample here.

Sample: https://www.syncfusion.com/downloads/support/forum/160359/ze/QueryBuilder358321692

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

Regards,

Aravinthan S