Essential Studio for Blazor Release Notes

v17.4.39

December 17, 2019

• All
• Features
• Bug Fixes
• Breaking Changes

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
RAZOR <EjsGrid ModelType="Model" DataSource="@Employees> </EjsGrid> @code { public EmployeeData Model = new EmployeeData(); }	RAZOR <EjsGrid DataSource="@Employees> </EjsGrid>

• ModelType’s type has been changed from object to Type for better user experiance in tag generation for non generic type component templates.

Before v17.4.0.39	After v17.4.0.39
RAZOR <EjsAccumulationChart ModelType="ChartModel"> </EjsAccumulationChart> @code { IAccumulationChartTemplate ChartModel = new IAccumulationChartTemplate(); }	RAZOR <EjsAccumulationChart ModelType="@typeof(IAccumulationChartTemplate)"> </EjsAccumulationChart>

• 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 from string to Query class.
• The EnablePlaceHolder API has been removed and its functionalities are handled internally.

Data Manager

Breaking Changes

• EjsDataManager now uses HttpClient to interact with remote services. Hence to customize HttpClient such as adding authentication headers can be done injecting it into your component or configuring it in the Startup.cs class.
• WebApiAdaptor now strictly expects response as Items and Count. Fallback to Result/result property for getting collection when Items is not present in the response is removed.
• Count must be send in the response if and only if the RequiresCount 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 from Array to IEnumerable.

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 and TItem with a named model, while rendering the component without Value and DataSource 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 from object to Syncfusion.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 bind QueryCellInfo event to a CustomFormat 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 for RowSelecting event.
• #257681 - Improved performance of Grid when using RowDataBound and QueryCellInfo events.

Breaking Changes

• Date format yMd is now not supported. You can show equivalent format using d.

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 to Query 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 for GridTemplates.

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 of Columns 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, Instead C# date standards are used in the Format property.

• Type of Cell property in QueryCellInfoEventArgs class is now CellDOM and it supports only AddClass method.

• Type of Row property in RowDataBoundEventArgs class is now CellDOM and it supports only AddClass method.

ListView

Breaking Changes

• The ModelType property is now removed for ListViewTemplates.

Previous

<EjsListView ModelType="@Model">
</EjsListView>

Now

<EjsListView >
</EjsListView>

Maps

Bug Fixes

• #257390 - The name of the marker is passed as an argument in the markerClick 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 – The NumericTextBox 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 and QuickInfoOnSelectionEnd 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 use TValue type for template argument and for other templates will use TemplateContext for template argument.

Previous

<EjsSchedule ModelType="@Model">
</EjsSchedule>

Now

<EjsSchedule>
</EjsSchedule>

• Query property type is changed from object to Syncfusion.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 for ScheduleResource 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 in items.

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 from object to Syncfusion.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 use C# 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 now CellDOM and it supports only AddClass method.
• Type of Row property in RowDataBoundEventArgs class is now CellDOM and it supports only AddClass method.

TreeView

Breaking Changes

• The ModelType property is now removed for TreeViewTemplates.

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 the RefreshNode 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.