Skip to content

985851: Need to correct the preview output in data-binding sections #6850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 10, 2025
Merged

985851: Need to correct the preview output in data-binding sections #6850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45ddf7c
985851: Need to correct the preview output in data-binding sections
MalleshRavichandran Oct 8, 2025
a0651d8
Update value-binding.md
MalleshRavichandran Oct 8, 2025
a2d9675
Merge branch 'development' into 985851-PreviewD1
MalleshRavichandran Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 17 additions & 9 deletions blazor/multicolumn-combobox/code-snippet/data-binding/action-begin.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,29 @@
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Data

<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionBegin="@OnActionBeginhandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
<SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
<SfMultiColumnComboBox TItem="OrderDetails" TValue="string" AllowFiltering=true ValueField="CustomerID" OnActionBegin="@OnActionBeginhandler" TextField="CustomerID" PopupWidth="Auto" Placeholder="e.g. Andrew">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" CrossDomain="true" Offline="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
</SfMultiColumnComboBox>

@code {
public Query RemoteQuery = new Query();
public class EmployeeData
public class OrderDetails
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Country { get; set; }
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
private void OnActionBeginhandler(ActionBeginEventArgs args)

private void OnActionBeginhandler(Syncfusion.Blazor.MultiColumnComboBox.ActionBeginEventArgs args)
{
// Here, you can customize your code.
}
}
}
24 changes: 16 additions & 8 deletions blazor/multicolumn-combobox/code-snippet/data-binding/action-failure.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Data

<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionFailure="@OnActionFailurehandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
<SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
<SfMultiColumnComboBox TItem="OrderDetails" TValue="string" AllowFiltering=true ValueField="CustomerID" OnActionFailure="@OnActionFailurehandler" TextField="CustomerID" PopupWidth="Auto" Placeholder="e.g. Andrew">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" CrossDomain="true" Offline="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
</SfMultiColumnComboBox>

@code {
public Query RemoteQuery = new Query();
public class EmployeeData
public class OrderDetails
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Country { get; set; }
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}

private void OnActionFailurehandler(Exception args)
{
// Here, you can customize your code.
Expand Down
29 changes: 15 additions & 14 deletions blazor/multicolumn-combobox/code-snippet/data-binding/web-api-adaptor.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Data

<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionBegin="@OnActionBeginhandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
<SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
<SfMultiColumnComboBox TItem="OrderDetails" TValue="string" AllowFiltering=true ValueField="CustomerID" TextField="CustomerID" PopupWidth="Auto" Placeholder="e.g. Andrew">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" CrossDomain="true" Offline="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
</SfMultiColumnComboBox>

@code {
public Query RemoteQuery = new Query();
public class EmployeeData
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Country { get; set; }
}
private void OnActionBeginhandler(ActionBeginEventArgs args)
public class OrderDetails
{
// Here, you can customize your code.
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
}
}
7 changes: 3 additions & 4 deletions blazor/multicolumn-combobox/data-binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mult

{% endhighlight %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVTXahAKvxlOgaH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVeMZjQHJYqdimB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

### OnActionFailure event

Expand All @@ -137,7 +137,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mu

{% endhighlight %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLpZkrKqPQmofLv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVoWNZwRIdKNBsr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

### OData v4 services

Expand All @@ -163,9 +163,8 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#

{% endhighlight %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhTDaLKUlkAUjhM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhIWjjwnRBWAlvb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor MultiColumn ComboBox with Web API Adaptor](./images/data-binding/blazor_combobox_web-api-adaptor.png)

### Offline mode

Expand Down
6 changes: 3 additions & 3 deletions blazor/multicolumn-combobox/value-binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Data Binding in Blazor MultiColumn ComboBox Component | Syncfusion
title: Value Binding in Blazor MultiColumn ComboBox Component | Syncfusion
description: Checkout and learn here all about value binding in Syncfusion Blazor MultiColumn ComboBox component and more.
platform: Blazor
control: MultiColumn ComboBox
Expand Down Expand Up @@ -103,7 +103,7 @@ First, create a `MultiColumnComboBox.razor` file as a parent component in the `/
public EventCallback<TValue> ComboBoxValueChanged { get; set; }
}

{% endhighlight razor %}
{% endhighlight %}
{% endtabs %}

### Usage of generic component with different type
Expand Down Expand Up @@ -143,5 +143,5 @@ Here, the MultiColumn ComboBox component with TValue as an int nullable type in
};
}

{% endhighlight razor %}
{% endhighlight %}
{% endtabs %}