Column Binding in Syncfusion Query Builder Control
14 Jun 202424 minutes to read
The column definitions are used as the DataSource schema in the Query Builder. This plays a vital role in rendering column values. The query builder operations such as create or delete conditions and create or delete groups are performed based on the column definitions. The Field property of the Columns is necessary to map the data source values in the query builder columns.
NOTE
If the column field is not specified in the data source, the column values will be empty.
Auto generation
The Columns are automatically generated when the Columns declaration is empty or undefined while initializing the query builder. All the columns in the DataSource are bound as the query builder columns.
<ejs-querybuilder id="querybuilder" width="100%" dataSource="ViewBag.dataSource" >
</ejs-querybuilder>public ActionResult Index()
{
QueryBuilderRule rule = new QueryBuilderRule()
{
Condition = "and",
Rules = new List<QueryBuilderRule>()
{
new QueryBuilderRule { Label="Employee ID", Field="EmployeeID", Type="number", Operator="equal", Value = 1 },
new QueryBuilderRule{ Label="Title", Field="Title", Type="string", Operator="equal", Value = "Sales Manager" }
}
};
ViewBag.rule = rule;
ViewBag.dataSource = EmployeeView.GetAllRecords();
return View();
}
public class EmployeeView
{
public EmployeeView()
{
}
public EmployeeView(int EmployeeID, string FirstName, string LastName, string Title, DateTime BirthDate, DateTime HireDate, int ReportsTo, string Address, string PostalCode, string Phone, string City, string Country)
{
this.EmployeeID = EmployeeID;
this.FirstName = FirstName;
this.LastName = LastName;
this.Title = Title;
this.BirthDate = BirthDate;
this.HireDate = HireDate;
this.ReportsTo = ReportsTo;
this.Address = Address;
this.PostalCode = PostalCode;
this.Phone = Phone;
this.City = City;
this.Country = Country;
}
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Title { get; set; }
public DateTime BirthDate { get; set; }
public DateTime HireDate { get; set; }
public int ReportsTo { get; set; }
public string Address { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
public string City { get; set; }
public string Country { get; set; }
public static List<EmployeeView> GetAllRecords()
{
List<EmployeeView> Emp = new List<EmployeeView>();
Emp.Add(new EmployeeView(1, "Nancy", "Davolio", "Sales Representative", new DateTime(1948, 12, 08), new DateTime(1992, 05, 01), 2, "507 - 20th Ave. E.Apt. 2A ", " 98122", "(206) 555-9857 ", "Seattle ", "USA"));
Emp.Add(new EmployeeView(2, "Andrew", "Fuller", "Vice President, Sales", new DateTime(1952, 02, 19), new DateTime(1992, 08, 14), 4, "908 W. Capital Way", "98401 ", "(206) 555-9482 ", "Kirkland ", "USA"));
Emp.Add(new EmployeeView(3, "Janet", "Leverling", "Sales Representative", new DateTime(1963, 08, 30), new DateTime(1992, 04, 01), 3, " 4110 Old Redmond Rd.", "98052 ", "(206) 555-8122", "Redmond ", "USA "));
Emp.Add(new EmployeeView(4, "Margaret", "Peacock", "Sales Representative", new DateTime(1937, 09, 19), new DateTime(1993, 05, 03), 6, "14 Garrett Hill ", "SW1 8JR ", "(71) 555-4848 ", "London ", "UK "));
Emp.Add(new EmployeeView(5, "Steven", "Buchanan", "Sales Manager", new DateTime(1955, 03, 04), new DateTime(1993, 10, 17), 8, "Coventry HouseMiner Rd. ", "EC2 7JR ", " (206) 555-8122", "Tacoma ", " USA"));
Emp.Add(new EmployeeView(6, "Michael", "Suyama", "Sales Representative", new DateTime(1963, 07, 02), new DateTime(1993, 10, 17), 2, " 7 Houndstooth Rd.", " WG2 7LT", "(71) 555-4444 ", "London ", "UK "));
Emp.Add(new EmployeeView(7, "Robert", "King", "Sales Representative", new DateTime(1960, 05, 29), new DateTime(1994, 01, 02), 7, "Edgeham HollowWinchester Way ", "RG1 9SP ", "(71) 555-5598 ", "London ", " UK"));
Emp.Add(new EmployeeView(8, "Laura", "Callahan", "Inside Sales Coordinator", new DateTime(1958, 01, 09), new DateTime(1994, 03, 05), 9, "722 Moss Bay Blvd. ", "98033 ", " (206) 555-3412", "Seattle ", "USA "));
Emp.Add(new EmployeeView(9, "Anne", "Dodsworth", "Sales Representative", new DateTime(1966, 01, 27), new DateTime(1994, 11, 15), 5, "4726 - 11th Ave. N.E. ", "98105 ", "(71) 555-5598 ", " London", "UK "));
return Emp;
}
}NOTE
When columns are auto-generated, the column type will be determined from the first record of the data source.
Labels
By default, the column label is displayed from the column Field value. To override the default label, you have to define the Label value.
NOTE
If both the field and headerText are not defined in the column, the column renders with “empty” header text.
Operators
The operator for a column can be defined in the columns property.
The available operators and its supported data types are:
| Operators | Description | Supported Types | ||
|---|---|---|---|---|
| startswith | Checks whether the value begins with the specified value. | String | ||
| endswith | Checks whether the value ends with the specified value. | String | ||
| contains | Checks whether the value contains the specified value. | String | ||
| equal | Checks whether the value is equal to the specified value. | String | Number/Date/Boolean | |
| notequal | Checks for values not equal to the specified value. | String/Number | Date | Boolean |
| greaterthan | Checks whether the value is greater than the specified value. | Date/Number | ||
| greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Date/Number | ||
| lessthan | Checks whether the value is less than the specified value. | Date/Number | ||
| lessthanorequal | Checks whether the value is less than or equal to the specified value. | Date/Number | ||
| between | Checks whether the value is between the two-specific value. | Date/Number | ||
| notbetween | Checks whether the value is not between the two-specific value. | Date/Number | ||
| in | Checks whether the value is one of the specific values. | String/Number | ||
| notin | Checks whether the value is not in the specific values. | String/Number |
Step
The Query Builder allows you to set the step values to the number fields. So that, you can easily access the numeric textbox. Use the Step property, to set the step value for number values.
Format
The Query Builder formats date and number values. Use the Format property, to format date and number values.
<ejs-querybuilder id="querybuilder" width="73%" rule="ViewBag.rule" dataSource="ViewBag.dataSource" step="10" operators="ViewBag.Operator">
<e-querybuilder-columns>
<e-querybuilder-column field="EmployeeID" label="Employee ID" type="number"></e-querybuilder-column>
<e-querybuilder-column field="FirstName" label="First Name" type="string"></e-querybuilder-column>
<e-querybuilder-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" values="ViewBag.values"></e-querybuilder-column>
<e-querybuilder-column field="Title" label="Title" type="string"></e-querybuilder-column>
<e-querybuilder-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-querybuilder-column>
<e-querybuilder-column field="Country" label="Country" type="string"></e-querybuilder-column>
<e-querybuilder-column field="City" label="City" type="string"></e-querybuilder-column>
</e-querybuilder-columns>
</ejs-querybuilder>public ActionResult Index()
{
QueryBuilderRule rule = new QueryBuilderRule()
{
Condition = "and",
Rules = new List<QueryBuilderRule>()
{
new QueryBuilderRule { Label="Employee ID", Field="EmployeeID", Type="number", Operator="equal", Value = 1 },
new QueryBuilderRule { Label="Title", Field="Title", Type="string", Operator="equal", Value = "Sales Manager" }
}
};
List<object> Operator = new List<object> {
new { key = "Equal", value = "equal" },
new { key = "Not Equal", value = "notequal" },
new { key = "In", value = "in" },
new { key = "Not In", value = "notin" }
};
ViewBag.rule = rule;
ViewBag.Operator = Operator;
ViewBag.dataSource = EmployeeView.GetAllRecords();
return View();
}
public class EmployeeView
{
public EmployeeView()
{
}
public EmployeeView(int EmployeeID, string FirstName, string LastName, string Title, DateTime BirthDate, DateTime HireDate, int ReportsTo, string Address, string PostalCode, string Phone, string City, string Country)
{
this.EmployeeID = EmployeeID;
this.FirstName = FirstName;
this.LastName = LastName;
this.Title = Title;
this.BirthDate = BirthDate;
this.HireDate = HireDate;
this.ReportsTo = ReportsTo;
this.Address = Address;
this.PostalCode = PostalCode;
this.Phone = Phone;
this.City = City;
this.Country = Country;
}
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Title { get; set; }
public DateTime BirthDate { get; set; }
public DateTime HireDate { get; set; }
public int ReportsTo { get; set; }
public string Address { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
public string City { get; set; }
public string Country { get; set; }
public static List<EmployeeView> GetAllRecords()
{
List<EmployeeView> Emp = new List<EmployeeView>();
Emp.Add(new EmployeeView(1, "Nancy", "Davolio", "Sales Representative", new DateTime(1948, 12, 08), new DateTime(1992, 05, 01), 2, "507 - 20th Ave. E.Apt. 2A ", " 98122", "(206) 555-9857 ", "Seattle ", "USA"));
Emp.Add(new EmployeeView(2, "Andrew", "Fuller", "Vice President, Sales", new DateTime(1952, 02, 19), new DateTime(1992, 08, 14), 4, "908 W. Capital Way", "98401 ", "(206) 555-9482 ", "Kirkland ", "USA"));
Emp.Add(new EmployeeView(3, "Janet", "Leverling", "Sales Representative", new DateTime(1963, 08, 30), new DateTime(1992, 04, 01), 3, " 4110 Old Redmond Rd.", "98052 ", "(206) 555-8122", "Redmond ", "USA "));
Emp.Add(new EmployeeView(4, "Margaret", "Peacock", "Sales Representative", new DateTime(1937, 09, 19), new DateTime(1993, 05, 03), 6, "14 Garrett Hill ", "SW1 8JR ", "(71) 555-4848 ", "London ", "UK "));
Emp.Add(new EmployeeView(5, "Steven", "Buchanan", "Sales Manager", new DateTime(1955, 03, 04), new DateTime(1993, 10, 17), 8, "Coventry HouseMiner Rd. ", "EC2 7JR ", " (206) 555-8122", "Tacoma ", " USA"));
Emp.Add(new EmployeeView(6, "Michael", "Suyama", "Sales Representative", new DateTime(1963, 07, 02), new DateTime(1993, 10, 17), 2, " 7 Houndstooth Rd.", " WG2 7LT", "(71) 555-4444 ", "London ", "UK "));
Emp.Add(new EmployeeView(7, "Robert", "King", "Sales Representative", new DateTime(1960, 05, 29), new DateTime(1994, 01, 02), 7, "Edgeham HollowWinchester Way ", "RG1 9SP ", "(71) 555-5598 ", "London ", " UK"));
Emp.Add(new EmployeeView(8, "Laura", "Callahan", "Inside Sales Coordinator", new DateTime(1958, 01, 09), new DateTime(1994, 03, 05), 9, "722 Moss Bay Blvd. ", "98033 ", " (206) 555-3412", "Seattle ", "USA "));
Emp.Add(new EmployeeView(9, "Anne", "Dodsworth", "Sales Representative", new DateTime(1966, 01, 27), new DateTime(1994, 11, 15), 5, "4726 - 11th Ave. N.E. ", "98105 ", "(71) 555-5598 ", " London", "UK "));
return Emp;
}
}Validations
Validation allows you to validate the conditions and it display errors for invalid fields while using the validateFields method. To enable validation in the query builder, set AllowValidation to true. Column fields are validated after setting AllowValidation to true. So, you should manually configure the validation for Operator and Value fields through Validation.
NOTE
Set
isRequiredvalidation for Operator and Value fields.
Setmin,maxvalues for number values.
<ejs-querybuilder id="querybuilder" width="73%" allowValidation="true" dataSource="ViewBag.dataSource">
<e-querybuilder-columns>
<e-querybuilder-column field="EmployeeID" label="Employee ID" type="number"></e-querybuilder-column>
<e-querybuilder-column field="FirstName" label="First Name" type="string"></e-querybuilder-column>
<e-querybuilder-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" values="ViewBag.values"></e-querybuilder-column>
<e-querybuilder-column field="Title" label="Title" type="string"></e-querybuilder-column>
<e-querybuilder-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-querybuilder-column>
<e-querybuilder-column field="Country" label="Country" type="string"></e-querybuilder-column>
<e-querybuilder-column field="City" label="City" type="string"></e-querybuilder-column>
</e-querybuilder-columns>
</ejs-querybuilder>
<ejs-button id="validate" cssClass='e-primary' content="Validate Fields" ></ejs-button>
<script>
document.getElementById('validate').onclick = function () {
var querybuilderObj = ej.base.getInstance(document.getElementById("querybuilder"), ej.querybuilder.QueryBuilder);
querybuilderObj.validateFields();
}
</script>public ActionResult Index()
{
ViewBag.dataSource = EmployeeView.GetAllRecords();
return View();
}
public class EmployeeView
{
public EmployeeView()
{
}
public EmployeeView(int EmployeeID, string FirstName, string LastName, string Title, DateTime BirthDate, DateTime HireDate, int ReportsTo, string Address, string PostalCode, string Phone, string City, string Country)
{
this.EmployeeID = EmployeeID;
this.FirstName = FirstName;
this.LastName = LastName;
this.Title = Title;
this.BirthDate = BirthDate;
this.HireDate = HireDate;
this.ReportsTo = ReportsTo;
this.Address = Address;
this.PostalCode = PostalCode;
this.Phone = Phone;
this.City = City;
this.Country = Country;
}
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Title { get; set; }
public DateTime BirthDate { get; set; }
public DateTime HireDate { get; set; }
public int ReportsTo { get; set; }
public string Address { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
public string City { get; set; }
public string Country { get; set; }
public static List<EmployeeView> GetAllRecords()
{
List<EmployeeView> Emp = new List<EmployeeView>();
Emp.Add(new EmployeeView(1, "Nancy", "Davolio", "Sales Representative", new DateTime(1948, 12, 08), new DateTime(1992, 05, 01), 2, "507 - 20th Ave. E.Apt. 2A ", " 98122", "(206) 555-9857 ", "Seattle ", "USA"));
Emp.Add(new EmployeeView(2, "Andrew", "Fuller", "Vice President, Sales", new DateTime(1952, 02, 19), new DateTime(1992, 08, 14), 4, "908 W. Capital Way", "98401 ", "(206) 555-9482 ", "Kirkland ", "USA"));
Emp.Add(new EmployeeView(3, "Janet", "Leverling", "Sales Representative", new DateTime(1963, 08, 30), new DateTime(1992, 04, 01), 3, " 4110 Old Redmond Rd.", "98052 ", "(206) 555-8122", "Redmond ", "USA "));
Emp.Add(new EmployeeView(4, "Margaret", "Peacock", "Sales Representative", new DateTime(1937, 09, 19), new DateTime(1993, 05, 03), 6, "14 Garrett Hill ", "SW1 8JR ", "(71) 555-4848 ", "London ", "UK "));
Emp.Add(new EmployeeView(5, "Steven", "Buchanan", "Sales Manager", new DateTime(1955, 03, 04), new DateTime(1993, 10, 17), 8, "Coventry HouseMiner Rd. ", "EC2 7JR ", " (206) 555-8122", "Tacoma ", " USA"));
Emp.Add(new EmployeeView(6, "Michael", "Suyama", "Sales Representative", new DateTime(1963, 07, 02), new DateTime(1993, 10, 17), 2, " 7 Houndstooth Rd.", " WG2 7LT", "(71) 555-4444 ", "London ", "UK "));
Emp.Add(new EmployeeView(7, "Robert", "King", "Sales Representative", new DateTime(1960, 05, 29), new DateTime(1994, 01, 02), 7, "Edgeham HollowWinchester Way ", "RG1 9SP ", "(71) 555-5598 ", "London ", " UK"));
Emp.Add(new EmployeeView(8, "Laura", "Callahan", "Inside Sales Coordinator", new DateTime(1958, 01, 09), new DateTime(1994, 03, 05), 9, "722 Moss Bay Blvd. ", "98033 ", " (206) 555-3412", "Seattle ", "USA "));
Emp.Add(new EmployeeView(9, "Anne", "Dodsworth", "Sales Representative", new DateTime(1966, 01, 27), new DateTime(1994, 11, 15), 5, "4726 - 11th Ave. N.E. ", "98105 ", "(71) 555-5598 ", " London", "UK "));
return Emp;
}
}Template
Template allows you to define your own input widgets for columns. To implement the template, you can define the following functions.
-
create: Creates the custom component. -
write: Wire events for the custom component. -
destroy: Destroy the custom component.
In the following sample, dropdown is used as the custom component in Payment Mode column.
<div class="col-lg-8 control-section">
<ejs-querybuilder id="querybuilder" width="100%" rule="ViewBag.rule" dataSource="ViewBag.dataSource">
<e-querybuilder-columns>
<e-querybuilder-column field="Category" label="Category" type="string"></e-querybuilder-column>
<e-querybuilder-column field="PaymentMode" label="Payment Mode" type="string" template="ViewBag.template[0]" operators="ViewBag.paymentOperator"></e-querybuilder-column>
<e-querybuilder-column field="TransactionType" label="Transaction Type" type="boolean" operators="ViewBag.transactionOperator"></e-querybuilder-column>
<e-querybuilder-column field="Description" label="Description" type="string"></e-querybuilder-column>
<e-querybuilder-column field="Date" label="Date" type="date"></e-querybuilder-column>
<e-querybuilder-column field="Amount" label="Amount" type="number" operators="ViewBag.amountOperator"></e-querybuilder-column>
</e-querybuilder-columns>
</ejs-querybuilder>
</div>
<script>
function paymentCreate() {
var elem = document.createElement('input');
elem.setAttribute('type', 'text');
return elem;
}
function paymentDestroy(args) {
var selectObj = ej.base.getComponent(document.getElementById(args.elementId), 'multiselect');
if (selectObj) {
selectObj.destroy();
}
var dropdown = ej.base.getComponent(document.getElementById(args.elementId), 'dropdownlist');
if (dropdown) {
dropdown.destroy();
}
}
function paymentWrite(args) {
var ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet'];
var inOperators = ['in', 'notin'];
var qryBldrObj = ej.base.getComponent(document.getElementById("querybuilder"), 'query-builder');
if (inOperators.indexOf(args.operator) > -1) {
var multiSelectObj = new ej.dropdowns.MultiSelect({
dataSource: ds,
value: args.values,
mode: 'CheckBox',
placeholder: 'Select Transaction',
change: function (e) {
qryBldrObj.notifyChange(e.value, e.element);
}
});
multiSelectObj.appendTo('#' + args.elements.id);
}
else {
var dropDownObj = new ej.dropdowns.DropDownList({
dataSource: ds,
value: args.values ? args.values : ds[0],
change: function (e) {
qryBldrObj.notifyChange(e.itemData.value, e.element);
}
});
dropDownObj.appendTo('#' + args.elements.id);
}
}
</script>
<style>
.e-control-wrapper.e-slider-container.e-horizontal {
height: 0;
}
.e-querybuilder {
margin: 3% auto;
}
#ruleContent {
border: 1px solid #d3d3d3;
width: 100%;
height: 500px;
overflow: auto;
}
.highcontrast textarea#ruleContent {
background-color: #000;
}
</style>public ActionResult Template()
{
QueryBuilderRule rule = new QueryBuilderRule()
{
Condition = "and",
Rules = new List<QueryBuilderRule>()
{
new QueryBuilderRule { Label="Category", Field="Category", Type="string", Operator="equal", Value = new string[] { "Clothing" } },
new QueryBuilderRule { Condition="or", Rules = new List<QueryBuilderRule>() {
new QueryBuilderRule { Label="Transaction Type", Field="TransactionType", Type="boolean", Operator="equal", Value = "Income" },
new QueryBuilderRule { Label="Payment Mode", Field="PaymentMode", Type="string", Operator="equal", Value = "Cash" }
} },
new QueryBuilderRule { Label="Amount", Field="Amount", Type="number", Operator="equal", Value = 10 }
}
};
Temp template = new Temp()
{
create = "paymentCreate",
destroy = "paymentDestroy",
write = "paymentWrite"
};
List<object> paymentOperator = new List<object> {
new { key = "Equal", value = "equal" },
new { key = "Not Equal", value = "notequal" },
new { key = "In", value = "in" },
new { key = "Not In", value = "notin" }
};
List<object> transactionOperator = new List<object> {
new { key = "Equal", value = "equal" },
new { key = "Not Equal", value = "notequal" }
};
List<object> amountOperator = new List<object> {
new { key = "Equal", value = "equal" },
new { key = "Greater than", value = "greaterthan" },
new { key = "Less than", value = "lessthan" },
new { key = "Less than or equal", value = "lessthanorequal" },
new { key = "Greater than or equal", value = "greaterthanorequal" },
new { key = "Not equal", value = "notequal" }
};
ViewBag.rule = rule;
ViewBag.paymentOperator = paymentOperator;
ViewBag.transactionOperator = transactionOperator;
ViewBag.amountOperator = amountOperator;
ViewBag.template = template;
return View();
}
public class Temp
{
public string create { get; set; }
public string destroy { get; set; }
public string write { get; set; }
}