Class QueryBuilderField

Represents the field model of the Syncfusion.Blazor.QueryBuilder, allowing customization of the field dropdown list.

Inheritance

System.Object

QueryBuilderField

Namespace: Syncfusion.Blazor.QueryBuilder

Assembly: Syncfusion.Blazor.dll

Syntax

public class QueryBuilderField : OwningComponentBase

Remarks

This class enables you to customize options such as filtering, popup dimensions, and width of the field dropdown list by setting the corresponding properties. Other necessary properties are configured by default in the dropdown list.

Examples

In the below code example, the field dropdown list is customized using the QueryBuilderField tag directive.

<SfQueryBuilder TValue="Employee">
   <QueryBuilderField AllowFiltering="true"></QueryBuilderField>
   <QueryBuilderColumns>
       <QueryBuilderColumn Field="CustomerID" Label="CustomerID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Values="values">
       </QueryBuilderColumn>
       <QueryBuilderColumn Field="EmployeeID" Label="EmployeeID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number />
   </QueryBuilderColumns>
</SfQueryBuilder>

Constructors

QueryBuilderField()

Declaration

public QueryBuilderField()

Properties

AllowFiltering

Gets or sets a value indicating whether to enable filtering in the field dropdown list.

Declaration

public bool AllowFiltering { get; set; }

Property Value

Type	Description
System.Boolean	`true` to enable filtering; otherwise, `false`. The default is `false`.

Remarks

When set to true, a search box appears in the dropdown, allowing users to filter the fields.

FieldDropDownClosed

Gets or sets an event callback that is raised after the field dropdown list has closed.

Declaration

public EventCallback<object> FieldDropDownClosed { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked after the dropdown closes. It receives an System.Object as its argument.

Remarks

This event can be used to perform actions after the dropdown has been closed.

Examples

In the following code example, the FieldDropDownClosed event is used.

<SfQueryBuilder TValue="Employee">
   <QueryBuilderField FieldDropDownClosed="OnFieldDropDownClosed"></QueryBuilderField>
   <QueryBuilderColumns>
       <QueryBuilderColumn Field="CustomerID" Label="CustomerID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Values="values" />
       <QueryBuilderColumn Field="EmployeeID" Label="EmployeeID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number />
   </QueryBuilderColumns>
</SfQueryBuilder>

@code {
   private void OnFieldDropDownClosed(object args)
   {
       // Custom logic goes here.
   }
}

FieldDropDownFiltering

Gets or sets an event callback that is raised when filtering items in the field dropdown list.

Declaration

public EventCallback<FilteringEventArgs> FieldDropDownFiltering { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<FilteringEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked during filtering. It receives FilteringEventArgs as its argument.

Remarks

This event allows for custom filtering logic. For example, you can use it to perform custom data retrieval based on the filter text.

Examples

In the following example, the FieldDropDownFiltering event is used to handle filtering.

<SfQueryBuilder TValue="Employee">
   <QueryBuilderField FieldDropDownFiltering="OnFiltering"></QueryBuilderField>
   <QueryBuilderColumns>
       <QueryBuilderColumn Field="CustomerID" Label="CustomerID" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.String" />
       <QueryBuilderColumn Field="EmployeeID" Label="EmployeeID" Type="Syncfusion.Blazor.QueryBuilder.ColumnType.Number" />
   </QueryBuilderColumns>
</SfQueryBuilder>

@code {
   private void OnFiltering(FilteringEventArgs args)
   {
       // Custom filtering logic goes here.
   }
}

FieldDropDownOpened

Gets or sets an event callback that is raised after the field dropdown list has opened.

Declaration

public EventCallback<PopupEventArgs> FieldDropDownOpened { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<PopupEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked after the dropdown opens. It receives PopupEventArgs as its argument.

Remarks

This event allows you to interact with the dropdown after it has been rendered.

Examples

In the following code example, the FieldDropDownOpened event is used.

<SfQueryBuilder TValue="Employee">
   <QueryBuilderField FieldDropDownOpened="OnFieldDropDownOpened"></QueryBuilderField>
   <QueryBuilderColumns>
       <QueryBuilderColumn Field="CustomerID" Label="CustomerID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Values="values" />
       <QueryBuilderColumn Field="EmployeeID" Label="EmployeeID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number />
   </QueryBuilderColumns>
</SfQueryBuilder>

@code {
   private void OnFieldDropDownOpened(PopupEventArgs args)
   {
       // Custom logic goes here.
   }
}

FieldDropDownOpening

Gets or sets an event callback that is raised before the field dropdown list opens.

Declaration

public EventCallback<BeforeOpenEventArgs> FieldDropDownOpening { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<BeforeOpenEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked before the dropdown opens. It receives BeforeOpenEventArgs as its argument.

Remarks

You can use this event to customize the dropdown list before it is displayed.

Examples

In the following code example, the FieldDropDownOpening event is used.

<SfQueryBuilder TValue="Employee">
   <QueryBuilderField FieldDropDownOpening="FieldDropDownOpening"></QueryBuilderField>
   <QueryBuilderColumns>
       <QueryBuilderColumn Field="CustomerID" Label="CustomerID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Values="values" />
       <QueryBuilderColumn Field="EmployeeID" Label="EmployeeID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number />
   </QueryBuilderColumns>
</SfQueryBuilder>

@code {
   private void FieldDropDownOpening(BeforeOpenEventArgs args)
   {
       // Custom logic goes here.
   }
}

FilterBarPlaceholder

Gets or sets the placeholder text for the filter bar in the field dropdown list.

Declaration

public string FilterBarPlaceholder { get; set; }

Property Value

Type	Description
System.String	A `string` representing the placeholder text. The default is `"Select a Field"`.

Remarks

This placeholder is displayed in the search box when AllowFiltering is enabled.

FilterType

Gets or sets the filter type for the field dropdown list.

Declaration

public FilterType FilterType { get; set; }

Property Value

Type	Description
FilterType	One of the FilterType enumerations. The default is StartsWith.

Remarks

The available filter types are:

StartsWith: Filters items that start with the specified text.
EndsWith: Filters items that end with the specified text.
Contains: Filters items that contain the specified text.

Placeholder

Gets or sets the placeholder text for the field dropdown list.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	A `string` representing the placeholder text. The default is `"Select a Field"`.

Remarks

This text is displayed when no field is selected in the dropdown.

PopupHeight

Gets or sets the height of the field dropdown list's popup.

Declaration

public string PopupHeight { get; set; }

Property Value

Type	Description
System.String	A `string` that defines the popup height (e.g., "250px", "50%"). The default is `"200px"`.

Remarks

This property allows you to control the vertical size of the dropdown popup.

PopupWidth

Gets or sets the width of the field dropdown list's popup.

Declaration

public string PopupWidth { get; set; }

Property Value

Type	Description
System.String	A `string` that defines the popup width (e.g., "300px", "auto"). The default is `"100%"`.

Remarks

This property allows you to control the horizontal size of the dropdown popup.

ShowClearButton

Gets or sets a value indicating whether to display a clear button in the field dropdown list.

Declaration

public bool ShowClearButton { get; set; }

Property Value

Type	Description
System.Boolean	`true` to display the clear button; otherwise, `false`. The default is `false`.

Remarks

When set to true, the clear button allows the user to quickly reset the selected field.

Width

Gets or sets the width of the field dropdown list.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	A `string` that defines the component's width (e.g., "250px", "100%"). The default is `"100%"`.

Remarks

This property controls the overall width of the field selection component.

Methods

Dispose(Boolean)

Releases the unmanaged resources used by the component and optionally releases the managed resources.

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	`true` to release both managed and unmanaged resources; `false` to release only unmanaged resources.

Remarks

This method cleans up resources by setting the reference to the parent Query Builder to null.

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous initialization operation.

Remarks

This method updates the parent Syncfusion.Blazor.QueryBuilder with this component's properties.