Data Binding in Blazor In-place Editor Component
16 Mar 20222 minutes to read
The Razor components load the data either from local data sources or remote data services using the DataSource
property and it supports the data type of an array or DataManager
. Also supports different kinds of data services such as OData, OData V4, Web API, and data formats such as XML, JSON, JSONP with the help of DataManager
adaptors.
Local
To bind local data to the Razor components, you can assign an array of object or string to the DataSource
property. The local data source can also be provided as an instance of the DataManager
.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.InPlaceEditor
<div id="container">
<span class="content-title"> Select customer name: </span>
<SfInPlaceEditor @bind-Value="@DropDownValue" Type="Syncfusion.Blazor.InPlaceEditor.InputType.DropDownList" TValue="string">
<EditorComponent>
<SfDropDownList TItem="string" TValue="string" Placeholder="Select a customer" @bind-Value="@DropDownValue" DataSource="@DataManager">
</SfDropDownList>
</EditorComponent>
</SfInPlaceEditor>
</div>
<style>
#container {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
#element {
width: 150px;
}
.content-title {
font-weight: 500;
margin-right: 20px;
display: flex;
align-items: center;
}
</style>
@code {
public string DropDownValue = "Maria Anders";
public static string[] DataManager = new string[] { "Maria Anders", "Ana Trujillo", "Antonio Moreno", "Thomas Hardy", "Chiristina Berglund", "Hanna Moos" };
}