Property Binding in Blazor
- 2 minutes to read
The DxDashboard component supports the Razor syntax. You can configure basic options in the Razor markup:
<DxDashboard style="height: 800px;" Endpoint="api/dashboard">
<DxBackendOptions RequestHttpHeaders="@headers"></DxBackendOptions>
<DxExtensions>
<DxDataInspector AllowInspectAggregatedData="true" AllowInspectRawData="true"></DxDataInspector>
</DxExtensions>
</DxDashboard>
@code {
public Dictionary<string, string> headers = new Dictionary<string, string>() { { "Auth", "AuthToken123" } };
}
The component also supports two-way data binding for DashboardId and WorkingMode properties. This means you can use the @bind attribute to implement binding between a component’s property and a data field.
The code below uses the @bind-DashboardId
attribute to bind the DashboardId property to a DashboardIdValue
field. When the component is rendered, the property’s value comes from the bound field. When a user selects a new value in a drop-down selection component, the property’s value is updated and the corresponding dashboard is displayed.
<select id="dashboard-selector" @bind="DashboardIdValue">
<option value="companies">Companies</option>
<option value="products">Products</option>
<option value="support">Support</option>
</select>
<DxDashboard style="height: 600px" Endpoint="@endpoint" @bind-DashboardId="@DashboardIdValue">
</DxDashboard>
@code {
string endpoint = "api/dashboard";
public string DashboardIdValue { get; set; } = "companies";
}
The following code allows you to switch the working mode when a user clicks the button. The button text depends on the current working mode:
<button id="workingModeSwitcher" @onclick="ChangeWorkingMode">
@ButtonText
</button>
<DxDashboard style="height: 800px" Endpoint="api/dashboard" @bind-WorkingMode="@workingMode">
</DxDashboard>
@code {
WorkingMode workingMode = WorkingMode.Designer;
public void ChangeWorkingMode() {
workingMode = workingMode == WorkingMode.Designer ? WorkingMode.Viewer : WorkingMode.Designer;
}
public string ButtonText {
get {
string value = workingMode == WorkingMode.Designer ? "Viewer" : "Designer";
string mode = "Switch to " + value;
return mode;
}
}
}
You can use JavaScript for additional customization. Refer to the following topic for details: JavaScript Customization.