- Primitive Data Types
- Object Data Types
Contact Support
Value binding in ComboBox Component
14 Mar 20242 minutes to read
Value binding in the ComboBox control allows you to associate data values with each list item. This facilitates managing and retrieving selected values efficiently. The ComboBox component provides flexibility in binding both primitive data types and complex objects.
Primitive Data Types
The ComboBox control provides flexible binding capabilities for primitive data types like strings and numbers. You can effortlessly bind local primitive data arrays, fetch and bind data from remote sources, and even custom data binding to suit specific requirements. Bind the value of primitive data to the value property of the ComboBox.
Primitive data types include:
- String
- Number
- Boolean
- Null
The following sample shows the example for preselect values for primitive data type
@{
var data = new Record().RecordModelList();
var value = "Item 5";
}
<div class="control-wrapper">
<div id="default" style='padding-top:75px;'>
<ejs-combobox id="records" dataSource="@data" placeholder="Select a item" allowFiltering="false" value="@value" popupHeight="200px">
</ejs-combobox>
</div>
</div>
Object Data Types
In the ComboBox control, object binding allows you to bind to a dataset of objects. When allowObjectBinding
is enabled, the value of the control will be an object of the same type as the selected item in the value property. This feature seamlessly binds arrays of objects, whether sourced locally, retrieved from remote endpoints, or customized to suit specific application needs.
The following sample shows the example for preselect values for object data type
@{
var data = new Record().RecordModelList();
var value = new { ID = "id5", Text = "Item 5" };
}
<div class="control-wrapper">
<div id="default" style='padding-top:75px;'>
<ejs-combobox id="records" dataSource="@data" placeholder="Select a item" allowFiltering="false" allowObjectBinding="true" value="@value" popupHeight="200px">
<e-combobox-fields value="ID" text="Text"></e-combobox-fields>
</ejs-combobox>
</div>
</div>