Essential Studio for Blazor Release Notes
Accordion
Bug Fixes
-
#146379
- The issue with Header template rendering in Firefox Browser has been fixed now.
Breaking Changes
- ModelType type is changed as System.Type instead of Object.
Previous
<EjsAccordion ModelType="AccordionModel">
</EjsAccordion>
@code {
AccordionData AccordionModel = new AccordionData();
public class AccordionData
{
public int Id { get; set; }
public string CompanyName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public int Zipcode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public string Website { get; set; }
}
}
Now
<EjsAccordion ModelType="@typeof(AccordionData)">
</EjsAccordion>
@code {
public class AccordionData
{
public int Id { get; set; }
public string CompanyName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public int Zipcode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public string Website { get; set; }
}
}
Accumulation Chart
Breaking Changes
- ModelType type is changed as System.Type instead of Object.
Previous
<EjsAccumulationChart ModelType="ChartModel">
</EjsAccumulationChart>
@code {
IAccumulationChartTemplate ChartModel = new IAccumulationChartTemplate();
}
Now
<EjsAccumulationChart ModelType="@typeof(IAccumulationChartTemplate)">
</EjsAccumulationChart>
@code {
IAccumulationChartTemplate ChartModel = new IAccumulationChartTemplate();
}
Bullet Chart
Bullet Chart is the variation of bar chart, which displays one or more measures, and compares it to a target value. You can also display the measures in a qualitative range of performance such as poor, satisfactory, or good. All stock elements are rendered by using Scalable Vector Graphics (SVG).
- Data Binding - Binds the data to the data source locally and remotely.
- Animation - The Feature and the Target bar will be animated when rendering.
- Tooltip - Supports tooltip for the Feature and Target bar.
- Orientation - Supports horizontal and vertical rendering.
- Flow Direction - Supports right-to-left rendering.
- Multiple Target - Supports multiple targets.
- Data Labels - Supports data labels to enhance the data.
Calendar
Breaking Changes
- The
EjsCalendar
is now a generic component. - Event initialization has been changed. Now, you need to specify events using the
CalendarEvents
component - Now, the ChangedEventArgs class is generic.
Previous Event Name | Current Event Name |
---|---|
ChangedEventArgs |
ChangedEventArgs<TValue> |
Previous
<EjsCalendar ValueChange="onChange"></EjsCalendar>
Now
<EjsCalendar TValue="DateTime?">
<CalendarEvents TValue="DateTime?" ValueChange="onChange"></CalendarEvents>
</EjsCalendar>
Chart
Breaking Changes
- Tag name changed for primaryXAxis, primaryYAxis and axes striplines.
Previous
<EjsChart>
<ChartPrimaryXAxis>
<ChartStripLines>
<ChartStripLine>
<ChartPrimaryXAxisStripLineFont></ChartPrimaryXAxisStripLineFont>
<ChartPrimaryXAxisBorder>
</ChartPrimaryXAxisBorder>
</ChartStripLine>
</ChartStripLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis>
<ChartStripLines>
<ChartStripLine>
<ChartPrimaryYAxisStripLineFont></ChartPrimaryYAxisStripLineFont>
<ChartPrimaryYAxisBorder>
</ChartPrimaryYAxisBorder>
</ChartStripLine>
</ChartStripLines>
</ChartPrimaryYAxis>
</EjsChart>
Now
<EjsChart>
<ChartPrimaryXAxis>
<ChartStriplines>
<ChartStripline>
<ChartStriplineTextStyle></ChartStriplineTextStyle>
<ChartStriplineBorder></ChartStriplineBorder>
</ChartStripline>
</ChartStriplines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis>
<ChartStriplines>
<ChartStripline>
<ChartStriplineTextStyle></ChartStriplineTextStyle>
<ChartStriplineBorder></ChartStriplineBorder>
</ChartStripline>
</ChartStriplines>
</ChartPrimaryYAxis>
</EjsChart>
- ModelType type is changed as System.Type instead of Object.
Previous
<EjsChart ModelType="ChartModel">
</EjsChart>
@code {
IChartTemplate ChartModel = new IChartTemplate();
}
Now
<EjsChart ModelType="@typeof(IChartTemplate)">
</EjsChart>
@code {
IChartTemplate ChartModel = new IChartTemplate();
}
DropDownButton
New Features
- Provided tag directive support for ‘Items’.
Breaking Changes
Previously, we have defined ‘ItemModel’ class for constructing items for Dropdown button Now we have changed this to ‘DropdownButtonItem’.
Previous
<EjsDropDownButton Content="profile" Items="@DropItems" CssClass="e-danger" OnOpen="OnOpen" OnItemRender="@OnItemRender"> </EjsDropDownButton>
@{
public List<Syncfusion.EJ2.Blazor.SplitButtons.ItemModel> DropItems { get; set; } = new List<Syncfusion.EJ2.Blazor.SplitButtons.SplitButtonItem>
{
new Syncfusion.EJ2.Blazor.SplitButtons.ItemModel { Text = "Dashboard", IconCss = "e-ddb-icons e-dashboard" },
new Syncfusion.EJ2.Blazor.SplitButtons.ItemModel { Text = "Notifications", IconCss = "e-ddb-icons e-notifications" }
};
}
Now
<EjsDropDownButton Content="profile" Items="@DropItems" CssClass="e-danger">
<DropDownButtonEvents OnOpen="OnOpen"></DropDownButtonEvents>
</EjsDropDownButton>
@{
public List<Syncfusion.EJ2.Blazor.SplitButtons.DropDownButtonItem> DropItems { get; set; } = new List<Syncfusion.EJ2.Blazor.SplitButtons.DropDownButtonItem>
{
new Syncfusion.EJ2.Blazor.SplitButtons.DropDownButtonItem { Text = "Dashboard", IconCss = "e-ddb-icons e-dashboard" },
new Syncfusion.EJ2.Blazor.SplitButtons.DropDownButtonItem { Text = "Notifications", IconCss = "e-ddb-icons" }
};
}
Chip
Bug Fixes
-
#250583
- Now, the selected chips values are maintained after selecting and deselecting the chips.
Common
- Syncfusion Blazor components are now production ready.
- Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Refer to this help topic for more information.
New Features
- Migrated to .NET Core 3.1.
- Migrated the package to
netstandard2.1
.
Breaking Changes
- Syncfusion Blazor service has been implemented and the Blazor applications will throw compilation errors, if it is not registered in
Startup.cs
. Refer to this link to register Syncfusion Blazor services in the application. - The
ModelType
is deprecated and no longer needed for generic type component templates.
Before v17.4.0.39 | After v17.4.0.39 |
|
|
-
ModelType
’s type has been changed fromobject
toType
for better user experiance in tag generation for non generic type component templates.
Before v17.4.0.39 | After v17.4.0.39 |
|
|
- The Syncfusion Blazor JS interop (ejs.interop.min.js) file has been removed from NuGet package and this should be added to ‘~wwwroot/index.html’ file for Blazor WebAssembly application.
<script src="https://cdn.syncfusion.com/ej2//dist/ejs.interop.min.js"></script>
Example
<head>
....
....
<script src="https://cdn.syncfusion.com/ej2/17.4.39/dist/ejs.interop.min.js"></script>
</head>
- Component’s
Query
property type is now changed fromstring
toQuery
class. - The
EnablePlaceHolder
API has been removed and its functionalities are handled internally.
Data Manager
Breaking Changes
-
EjsDataManager
now usesHttpClient
to interact with remote services. Hence to customizeHttpClient
such as adding authentication headers can be done injecting it into your component or configuring it in theStartup.cs
class. -
WebApiAdaptor
now strictly expects response asItems
andCount
. Fallback toResult/result
property for getting collection whenItems
is not present in the response is removed. -
Count
must be send in the response if and only if theRequiresCount
is added in the query. Sending count from server when no count is requested from client, will throw response type casting exception. - Type of
Json
property is now changed fromArray
toIEnumerable
.
Previous
<EjsDataManager Json=@Orders></EjsDataManager>
private Order[] Orders;
Now
<EjsDataManager Json=@Orders></EjsDataManager>
private IEnumerable<Order> Orders;
DatePicker
Breaking Changes
- The
EjsDatePicker
is now a generic component. - Event initialization has been changed. Now, you need to specify events using the
DatePickerEvents
component - Now, the ChangedEventArgs class is generic.
Previous Event Name | Current Event Name |
---|---|
ChangedEventArgs |
ChangedEventArgs<TValue> |
Previous
<EjsDatePicker ValueChange="onChange"></EjsDatePicker>
Now
<EjsDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" ValueChange="onChange"></DatePickerEvents>
</EjsDatePicker>
DateTimePicker
Breaking Changes
- The
EjsDateTimePicker
is now a generic component. - Event initialization has been changed. Now, you need to specify events using the
DateTimePickerEvents
component - Now, the ChangedEventArgs class is generic.
Previous Event Name | Current Event Name |
---|---|
ChangedEventArgs |
ChangedEventArgs<TValue> |
Previous
<EjsDateTimePicker ValueChange="onChange"></EjsDateTimePicker>
Now
<EjsDateTimePicker TValue="DateTime?">
<DateTimePickerEvents TValue="DateTime?" ValueChange="onChange"></DateTimePickerEvents>
</EjsDateTimePicker>
DropDownList
Breaking Changes
- Now, support for generic type to
DataSource
property has been provided. - You need to set the
TValue
andTItem
with a named model, while rendering the component withoutValue
andDataSource
property.
Previous
<EjsDropDownList TValue="string" DataSource="@OrdersList">
<DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
</EjsDropDownList>
@code {
private IEnumerable<Order> OrdersList
}
Now
<EjsDropDownList TValue="string" TItem="Order" DataSource="@OrdersList">
<DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
</EjsDropDownList>
@code {
private IEnumerable<Order> OrdersList;
}
-
Query
property type is changed fromobject
toSyncfusion.EJ2.Blazor.Data.Query
Class type.
Previous
@using Syncfusion.EJ2.Blazor.Data
<EjsDropDownList Query="@QueryData">
</EjsDropDownList>
private string QueryData = "new ej.data.Query().where('TaskID', 'equal', '3')";
Now
@using Syncfusion.EJ2.Blazor.Data
<EjsDropDownList Query="@QueryData">
</EjsDropDownList>
private Query QueryData = new Query().Where("TaskID", "equal", "3");
Grid
#Bug Fixes
-
#F149598
- Standard date formats are not applied to grid is now resolved. -
#257259
- Unable to open Detail Template by using an external button is now resolved. -
#257556
,#F149808
- Script error thrown when bindQueryCellInfo
event to aCustomFormat
enabled Grid is now resolved. -
#254877
- Problem with filtering enum values in Excel filtering is now resolved. -
#255597
- Not able to edit date column with default value and Dialog Editing is now resolved.
New Features
-
#254822
- Provided event callback support forRowSelecting
event. -
#257681
- Improved performance of Grid when usingRowDataBound
andQueryCellInfo
events.
Breaking Changes
- Date format
yMd
is now not supported. You can show equivalent format usingd
.
Previous
<GridColumns>
<GridColumn Field=@nameof(Order.OrderDate) Format="yMd" Type="ColumnType.Date"></GridColumn>
</GridColumns>
Now
<GridColumns>
<GridColumn Field=@nameof(Order.OrderDate) Format="d" Type="ColumnType.Date"></GridColumn>
</GridColumns>
-
Query
property type is now changed from string toQuery
class.
Previous
@using Syncfusion.EJ2.Blazor.Data
<EjsGrid Query="@QueryData">
</EjsGrid>
private string QueryData = "new ej.data.Query().where('CustomerID', 'equal', 'VINET')";
Now
@using Syncfusion.EJ2.Blazor.Data
<EjsGrid Query="@QueryData">
</EjsGrid>
private Query QueryData = new Query().Where("CustomerID", "equal", "VINET");
-
ModelType
property is now removed forGridTemplates
.
Previous
<EjsGrid ModelType="@Model">
</EjsGrid>
Now
<EjsGrid>
</EjsGrid>
- For foreign key column with remote data you need to define the column options by using a new tag called
<GridForeignColumn>
, if it is local data then you can simply define it by using<GridColumn>
tag itself.
Previous
<GridColumn TValue="EmployeeData" Field=@nameof(Order.FirstName) HeaderText="Employee Name" ForeignKeyField="CustomerID" ForeignKeyValue="CompanyName" DataSource="@ForeignData" Width="150">
</GridColumn>
private Syncfusion.EJ2.Blazor.DataManager ForeignKeyData = new Syncfusion.EJ2.Blazor.DataManager ( Uri = "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers", CrossDomain = true, Adaptor = Adaptors.ODataAdaptor );
Now
<GridForeignColumn TValue="EmployeeData" Field=@nameof(Order.FirstName) HeaderText="Employee Name" ForeignKeyField="CustomerID" ForeignKeyValue="CompanyName" Width="150">
<Syncfusion.EJ2.Blazor.Data.EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers" CrossDomain="true" Adaptor="Adaptors.ODataAdaptor">
</Syncfusion.EJ2.Blazor.Data.EjsDataManager>
</GridForeignColumn>
- Now you can define stacked header column declaratively. Also now use
GridColumns
instead ofColumns
property.
Previous
<GridColumn HeaderText="Order Details" Columns="@( new List<GridColumn>() {
new GridColumn { Field = "OrderDate", Width = "130", HeaderText = "Order Date", Format="yMd", TextAlign= TextAlign.Right, MinWidth="10" },
new GridColumn { Field = "Freight", Width = "135", HeaderText = "Freight", Format="C2", TextAlign= TextAlign.Right, MinWidth="10" } } )">
</GridColumn>
Now
<GridColumn HeaderText="Order Details">
<GridColumns>
<GridColumn Field="OrderDate" Width="130" HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" MinWidth="10"></GridColumn>
<GridColumn Field="Freight" Width="135" HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" MinWidth="10"></GridColumn>
</GridColumns>
</GridColumn>
-
CustomFormat
property is now removed, InsteadC#
date standards are used in the Format property. -
Type of Cell property in
QueryCellInfoEventArgs
class is nowCellDOM
and it supports onlyAddClass
method. -
Type of Row property in
RowDataBoundEventArgs
class is nowCellDOM
and it supports onlyAddClass
method.
ListView
Breaking Changes
- The
ModelType
property is now removed forListViewTemplates
.
Previous
<EjsListView ModelType="@Model">
</EjsListView>
Now
<EjsListView >
</EjsListView>
Maps
Bug Fixes
-
#257390
- The name of the marker is passed as an argument in themarkerClick
event. -
#257147
- Now the Maps sizing issue, when the height of the control is set as a percentage got fixed. -
#256121
- Marker tooltip template support is provided in the maps component.
NumericTextBox
Bug Fixes
-
#256598
– TheNumericTextBox
now accept the nullable decimal value.
Pivot Table
Breaking Changes
-
ModelType
property is now removed for ‘Cell template’ feature.
Previous
<EjsPivotView ModelType="@Model">
</EjsPivotView>
Now
<EjsPivotView>
</EjsPivotView>
RichTextEditor
Bug Fixes
-
#256452
- Resolved the issue with image resize when the read-only mode is enabled.
Scheduler
New Features
-
AllowMultiRowSelection
andQuickInfoOnSelectionEnd
properties has been introduced. -
GetResourceCollections
public methods has been introduced.
Bug Fixes
-
#257510
- Validation message populate on editor window cancellation has been fixed now. -
#148325
- Event template will now applied to the events within more event container. -
#148511
,#149075
,#149518
- The issue with field value disappeared on clicking the same appointment in editor template popup has been fixed.
Breaking Changes
-
ModelType
property has been removed. For templates using event and resource fields will useTValue
type for template argument and for other templates will useTemplateContext
for template argument.
Previous
<EjsSchedule ModelType="@Model">
</EjsSchedule>
Now
<EjsSchedule>
</EjsSchedule>
-
Query
property type is changed fromobject
toSyncfusion.EJ2.Blazor.Data.Query
Class type.
Previous
@using Syncfusion.EJ2.Blazor.Data
<EjsSchedule Query="@QueryData">
</EjsSchedule>
private string QueryData = "new ej.data.Query().where('Subject', 'equal', 'Meeting')";
Now
@using Syncfusion.EJ2.Blazor.Data
<EjsSchedule Query="@QueryData">
</EjsSchedule>
private Query QueryData = new Query().Where("Subject", "equal", "Meeting");
- Now
TValue
is mandatory forScheduleResource
tag directive.
Previous
<ScheduleResources>
<ScheduleResource></ScheduleResource>
</ScheduleResources>
Now
<ScheduleResources>
<ScheduleResource TValue="AirlinesData"></ScheduleResource>
</ScheduleResources>
SplitButton
New Features
- Provided tag directive support for ‘Items’.
Breaking Changes
Previously, we have defined ‘ItemModel’ class for constructing items for Split button Now we have changed this to ‘SplitButtonItem’.
Previous
<EjsSplitButton Content="profile" Items="@SplitItems" CssClass="e-danger" OnOpen="OnOpen" OnItemRender="@OnItemRender"></EjsSplitButton>
@{
public List<Syncfusion.EJ2.Blazor.SplitButtons.ItemModel> SplitItems { get; set; } = new List<Syncfusion.EJ2.Blazor.SplitButtons.SplitButtonItem>
{
new Syncfusion.EJ2.Blazor.SplitButtons.ItemModel { Text = "Dashboard", IconCss = "e-ddb-icons e-dashboard" },
new Syncfusion.EJ2.Blazor.SplitButtons.ItemModel { Text = "Notifications", IconCss = "e-ddb-icons e-notifications" }
};
}
Now
<EjsSplitButton Content="profile" Items="@SplitItems" CssClass="e-danger">
<SplitButtonEvents OnOpen="OnOpen"></SplitButtonEvents>
</EjsSplitButton>
@{
public List<Syncfusion.EJ2.Blazor.SplitButtons.SplitButtonItem> SplitItems { get; set; } = new List<Syncfusion.EJ2.Blazor.SplitButtons.SplitButtonItem>
{
new Syncfusion.EJ2.Blazor.SplitButtons.SplitButtonItem { Text = "Dashboard", IconCss = "e-ddb-icons e-dashboard" },
new Syncfusion.EJ2.Blazor.SplitButtons.SplitButtonItem { Text = "Notifications", IconCss = "e-ddb-icons e-notifications" }
};
}
Tab
New Features
-
#253114
,#146997
,#148829
- Now we can pass RenderFragment to the ContentTemplate of TabItem in code-behind.
Bug Fixes
-
#147651
- Now tab item count has been maintained properly initems
.
Breaking Changes
-
HeightAdjustMode
property has been removed. - Providing HTML element for tab items has been not supported now.
<EjsTab>
<div class='e-tab-header'></div>
<div class='e-content'></div>
</EjsTab>
TreeGrid
New Features
- Provided support for Filtering by default without using the Json Adaptor.
Breaking Changes
-
ModelType
property is deprecated.
Previous
<EjsTreeGrid ModelType="@Model">
</EjsTreeGrid>
Now
<EjsTreeGrid>
</EjsTreeGrid>
-
Query
property type is changed fromobject
toSyncfusion.EJ2.Blazor.Data.Query
Class type.
Previous
@using Syncfusion.EJ2.Blazor.Data
<EjsTreeGrid Query="@QueryData">
</EjsTreeGrid>
private string QueryData = "new ej.data.Query().where('TaskID', 'equal', '3')";
Now
@using Syncfusion.EJ2.Blazor.Data
<EjsTreeGrid Query="@QueryData">
</EjsTreeGrid>
private Query QueryData = new Query().Where("TaskID", "equal", "3");
- Only
C#
formats are supported for column formatting i.e. ‘yMd’ is not supported for date columns, so useC#
format ‘d’ for the date columns.
Previous
<TreeGridColumns>
<TreeGridColumn Field=@nameof(TreeData.StartDate) Format="yMd" Type="ColumnType.Date"></TreeGridColumn>
</TreeGridColumns>
Now
<TreeGridColumns>
<TreeGridColumn Field=@nameof(TreeData.StartDate) Format="d" Type="ColumnType.Date"></TreeGridColumn>
</TreeGridColumns>
- Type of Cell property in
QueryCellInfoEventArgs
class is nowCellDOM
and it supports onlyAddClass
method. - Type of Row property in
RowDataBoundEventArgs
class is nowCellDOM
and it supports onlyAddClass
method.
TreeView
Breaking Changes
- The
ModelType
property is now removed forTreeViewTemplates
.
Previous
<EjsTreeView ModelType="@Model" TValue="TreeData">
</EjsTreeView>
Now
<EjsTreeView TValue="TreeData">
</EjsTreeView>
Bug Fixes
-
#254977
- Issue with TreeView rendering when using observable collection in OnAfterRender method has been resolved. -
#149555
,#149694
- Issue with template rendering while providing model class with lower case property names has been resolved.
New Features
-
#249238
- Provided the support for refreshing specific node in tree view using theRefreshNode
method.
Visual Studio Code extensions
New Features
- Added the new extension with conversion support for changing existing Blazor applications into Syncfusion Blazor applications.
- Added the new extension with migration support for updating the Syncfusion Blazor components from one version to another.
- Upgraded the .NET Core 3.1 project templates.
Visual Studio extensions
New Features
- Enhanced the user experience by including Visual Studio Scaffolding templates for Grid, Chart, Schedule, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer.
- Upgraded the .NET Core 3.1 project templates.