Essential Studio for Blazor Release Notes

Accordion

New Features

• ## 257149, ## 262358, ## 263626, ## 150299 - Now we can pass RenderFragment to the ContentTemplate of ‘AccordionItem’ in code-behind.
• Enchanced the performance of ItemTemplate rendering.
• The ModelType property is not a mandatory API for the features ‘ItemTemplate’ and ‘HeaderTemplate’.
• Provided support to hide/show the accordion items using the Visible property.
• Provided support to disable/enable tha accordion items using the Disabled property.

AutoComplete

New Features

• ## 264858 - Now, you can specify the tab order of the component using the TabIndex property.

Breaking Changes

• Now, support has been provided for generic type to the DataSource property.
• You need to set the TValue and TItem with a named model while rendering the component without Value and DataSource properties.

Previous

<EjsAutoComplete TValue="string" DataSource="@OrdersList">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</EjsAutoComplete>

@code {
    private IEnumerable<Order> OrdersList
}

Now

<SfAutoComplete TValue="string" TItem="Order" DataSource="@OrdersList">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    private IEnumerable<Order> OrdersList;
}

• The Query property type is changed from object to Syncfusion.Blazor.Data.Query Class type.

Previous

<EjsAutoComplete TValue="string" DataSource="@OrdersList" Query="@QueryData"></EjsAutoComplete>

private string QueryData = "new ej.data.Query().where('TaskID', 'equal', '3')";

Now

<SfAutoComplete TValue="string" TItem="Order" DataSource="@OrdersList" Query="@QueryData"> </SfAutoComplete>

private Query QueryData = new Query().Where("TaskID", "equal", "3");

• The ModelType property is deprecated.

Calendar

New Features

• ## 264858 - Now, you can specify the tab order of component using TabIndex property.

    <SfCalendar TValue="DateTime?" TabIndex="0" ></SfCalendar>

ComboBox

New Features

• ## 264858 - Now, you can specify the tab order of the component using the TabIndex property.

Breaking Changes

• Now, support has been provided for generic type to the DataSource property.
• You need to set the TValue and TItem with a named model while rendering the component without Value and DataSource properties.

Previous

<EjsComboBox TValue="string" DataSource="@OrdersList">
    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
</EjsComboBox>

@code {
    private IEnumerable<Order> OrdersList
}

Now

<SfComboBox TValue="string" TItem="Order" DataSource="@OrdersList">
    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    private IEnumerable<Order> OrdersList;
}

• The Query property type is changed from object to Syncfusion.Blazor.Data.Query Class type.

Previous

<EjsComboBox TValue="string" DataSource="@OrdersList" Query="@QueryData"></EjsComboBox>

private string QueryData = "new ej.data.Query().where('TaskID', 'equal', '3')";

Now

<SfComboBox TValue="string" TItem="Order" DataSource="@OrdersList" Query="@QueryData"> </SfComboBox>

private Query QueryData = new Query().Where("TaskID", "equal", "3");

• The ModelType property is deprecated.

Bug Fixes

• ## 266445, ## 268593 - Issue with the ItemTemplate that is not loaded while filtering the data has been resolved.

Common

New Features

• Compatibility support provided for WebAssembly to 3.2.0 Preview 2.

Breaking Changes

• NuGet Change - Previous versions of the Syncfusion Blazor NuGet package name is Syncfusion.EJ2.Blazor. From version 18.1.0.36, it will be Syncfusion.Blazor. Other Blazor packages will also have the same name changes.

• Namespace Change - The previous version of Syncfusion Blazor contains the namespace Syncfusion.EJ2.Blazor followed by component package names such as Buttons, Charts, Grids, and Inputs. After 18.1.0.36 version, this has been modified to Syncfusion.Blazor followed by its package name.

• Component name change - In the previous version, the component names are prefixed with Ejs (example: EjsGrid, EjsChart) which has been changed to the prefix Sf (example: SfGrid, SfChart).

<EjsButton>Button</EjsButton>

<SfButton>Button</SfButton>

<EjsCalendar TValue="DateTime"></EjsCalendar>

<SfCalendar TValue="DateTime"></SfCalendar>

• Resource Change - Till the previous version, you will be loading scripts ej2.min.js and ejs-interop.min.js manually in the application, which is not required from 18.1.0.36 version. The script will be loaded from NuGet through static web assets for the components loaded in the page. We have also provided styles as static web assets to load in the application. Still, you can load the resource from CRG by disabling default script loading from static web assets by passing arguments to AddSyncfusionBlazor service.

DataManager Change - Query initialization is changed from new ej.data.Query() to new sf.data.Query().

@using Syncfusion.EJ2.Blazor.Data

@{ var chartQuery = $"new ej.data.Query().where('EmployeeID', 'equal', {employee.EmployeeID}, false)"; }

<EjsChart Height="390px" Title="Sales Report" DataSource="@OrderData">
    ....
    ....
        <ChartSeriesCollection>
        <ChartSeries XName="ShipCity" YName="Freight" Type="ChartSeriesType.Column" Query="@chartQuery">
        </ChartSeries>
        </ChartSeriesCollection>
    ....
    ....
</EjsChart>

@using Syncfusion.Blazor.Data

@{ var chartQuery = $"new sf.data.Query().where('EmployeeID', 'equal', {employee.EmployeeID}, false)"; }

<SfChart Height="390px" Title="Sales Report" DataSource="@OrderData">
    ....
    ....
        <ChartSeriesCollection>
        <ChartSeries XName="ShipCity" YName="Freight" Type="ChartSeriesType.Column" Query="@chartQuery">
        </ChartSeries>
        </ChartSeriesCollection>
    ....
    ....
</SfChart>

• CDN Refernce - Changed the CDN reference for script and style files as mentioned below.

Dashboard Layout

Bug Fixes

• ## 263850 - The issue with the invalid cursor that is displayed in panel content or header, which is not in draggable element has been resolved.

DataManager

Breaking Changes

• Query initialization is changed from new ej.data.Query() to new sf.data.Query().

Previous

@using Syncfusion.EJ2.Blazor.Data

@{ var chartQuery = $"new ej.data.Query().where('EmployeeID', 'equal', {employee.EmployeeID}, false)"; }

<EjsChart Height="390px" Title="Sales Report" DataSource="@OrderData">
    ....
    ....
        <ChartSeriesCollection>
        <ChartSeries XName="ShipCity" YName="Freight" Type="ChartSeriesType.Column" Query="@chartQuery">
        </ChartSeries>
        </ChartSeriesCollection>
    ....
    ....                        
</EjsChart>

Now

@using Syncfusion.Blazor.Data

@{ var chartQuery = $"new sf.data.Query().where('EmployeeID', 'equal', {employee.EmployeeID}, false)"; }

<SfChart Height="390px" Title="Sales Report" DataSource="@OrderData">
    ....
    ....
        <ChartSeriesCollection>
        <ChartSeries XName="ShipCity" YName="Freight" Type="ChartSeriesType.Column" Query="@chartQuery">
        </ChartSeries>
        </ChartSeriesCollection>
    ....
    ....                        
</SfChart>

New Features

• ExpandoObject and DynamicObject data operation support added.

DatePicker

New Features

• ## 264858 - Now, you can specify the tab order of component using TabIndex property.

    <SfDatePicker TValue="DateTime?" TabIndex="0" ></SfDatePicker>

Document Editor

Breaking Changes

• Namespace Change - The previous version of Syncfusion Blazor Document Editor contains the namespaces Syncfusion.EJ2.DocumentEditor.Blazor, Syncfusion.EJ2.Blazor.DocumentEditor, Syncfusion.EJ2.DocumentEditor. After 18.1.0.36 version, this has been modified to Syncfusion.Blazor.DocumentEditor.

• Default value of EnableLocalPaste is set to false. So, by default, the content will be pasted from the system clipboard.

New Features

• ## 249782, ## 254484, ## 149278,## 258415,## 260463 - Added support for toolbar customization.
• ## 253670 - Enhancements for copy and paste operation.
• ## 262665, ## 151012 - Added API to customize search highlight colour.
• ## 249197 - Added API to enable/disable spell check action.
• ## 237725, ## 253671 - Added support for web layout.
• ## 260639 - Added EnableComment property to enable and disable comment.
• ## 259970 - Handled paste list behaviour using start at value of list.
• ## 256487 - Enhancements for mouse and keyboard selection.

DropDownList

New Features

• ## 264858 - Now, you can specify the tab order of the component using the TabIndex property.

Bug Fixes

• ## 263336 - Issue with the Index property that is not updated to component while setting nullable integer type has been resolved.
• ## 266474 - The console error thrown while setting out of range index value has been resolved.

File Upload

New Features

• ## 264858 - Now, you can specify the tab order of the component using the TabIndex property.
• No longer need a server-side API endpoint to handle the save and remove actions.

<SfUploader AutoUpload="false">
    <UploaderEvents ValueChange="onChange"></UploaderEvents>
</SfUploader>

@code {

private void OnChange(UploadChangeEventArgs args) {
    foreach (var file in args.Files)
    {
        var path = @"path" + file.FileInfo.Name;
        FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
        file.Stream.WriteTo(filestream);
        filestream.Close();
        file.Stream.Close();
    }
}

}

Breaking Changes

• The ModelType property is deprecated.

Grid

Bug Fixes

• ## 267455 - Blank space shown in Grid area when scrolling in VirtualScroll Grid is fixed.

• ## 267225, ## F151900 - Data is not bounded to Grid when it is of array type is resolved.

• ## 264772 - Provided support to access UpdateType property externally.

• ## 260890 - Provided support for add additional/custom column in Grid while Excel exporting.

• ## 263241 - Clicking the SelectAll checkbox throws script error in a PersistSelection enabled Grid is fixed.

• ## F151105 - Provided RecordClick event support in Blazor Grid.

• ## 259062 - Crud operation is not working properly with PrimaryKey as Guid and Adaptor as OdataV4 adaptor has been resolved.

• ## F150669 - Misalignement issue while hide/showing a column is fixed.

• ## F150636 - Not able to clear the filtering on clicking the close button in Filterbar is resolved.

• ## 258634 - Memory Leak issue when we using Templates in Blazor Grid component is resolved.

• ## 269554 - Provided the fix for Search box in Column chooser.

• ## 267691 - Problem with rendering Grid Frozen rows and columns in iOS safari browser is resolved.

• ## 267068, ## 266093 - Problem with rendering Syncfusion Blazor Grid in Safari browser is resolved.

• ## F151550 - Provided GridColumn width not set in iPhone Chrome browser is fixed.

New Features

• Row and column virtualization enhancement added.

• Virtualization with grouping support added.

• State persistence support added. Now grid state can be get, set and reset externally using GetPersistData, SetPersistData and ResetPersistData methods respectively.

• ExpandoObject and DynamicObject data operation support added.

Linear Gauge

New Features

• Drag events for pointer drag will be triggered now.

ListBox

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

<EjsListBox TValue="string" DataSource="@OrdersList">
    <ListBoxFieldSettings Value="Name"></ListBoxFieldSettings>
</EjsListBox>

@code {
    private IEnumerable<Order> OrdersList
}

Now

<SfListBox TValue="string" TItem="Order" DataSource="@OrdersList">
    <ListBoxFieldSettings Value="Name"></ListBoxFieldSettings>
</SfListBox>

@code {
    private IEnumerable<Order> OrdersList;
}

• Query property type is changed from object to Syncfusion.Blazor.Data.Query Class type.

Previous

@using Syncfusion.Blazor.Data

<EjsListBox Query="@QueryData">
</EjsListBox>
private string QueryData = "new ej.data.Query().where('TaskID', 'equal', '3')";

Now

@using Syncfusion.Blazor.Data

<SfListBox Query="@QueryData">
</SfListBox>
private Query QueryData = new Query().Where("TaskID", "equal", "3");

• ModelType property is now removed for ‘ItemTemplate’ feature.

Previous

@using Syncfusion.Blazor.DropDowns

<EjsListBox ModelType="@typeof(ListData)" DataSource="@data" TValue="string[]">
    <ListBoxTemplates>
        <ItemTemplate>
            <h1>@((context as ListData).Id)</h1>
        </ItemTemplate>
    </ListBoxTemplates>
</EjsListBox>

Now

@using Syncfusion.Blazor.Data

<SfListBox DataSource="@data" TValue="string[]" TItem="DataValues">
    <ListBoxTemplates TItem="DataValues">
        <ItemTemplate>
            <h1>@((context as DataValues).Id)</h1>
        </ItemTemplate>
    </ListBoxTemplates>
</SfListBox>

ListView

Breaking Changes

• Now, the TValue must be provided for template rendering in the ListView component.

Previous

<EjsListView DataSource="@DataSource"> 
        <ListViewTemplates>

        ...

        </ListViewTemplates>
    </EjsListView>

Current

    <SfListView DataSource="@DataSource"> 
        <ListViewTemplates TValue="NewsDataModel">

        ...

        </ListViewTemplates>
    </SfListView>

• Now, the Query property type has been changed to Data.Query from string.

Previous

<EjsListView ID="listview" Query="new ej.data.Query().from('Products').select('ProductID,ProductName').take(10)">

...

</EjsListView>

Current

    <SfListView ID="listview" TValue="Data" Query="@QueryDetails">

    ...

    </SfListView>

@code

{

    public static List<string> ColumnName = new List<string>()
    {
        "ProductID","ProductName"
    };
    Query QueryDetails = new Query().From("Products").Select(ColumnName).Take(10);
}

Maps

New Features

• ## F149168 - Support is provided to parse and utilize the complex data source.
• ## 258888 - The map rendered from the providers such as Bing, OSM, and Google can now be exported in the supported formats.

NumericTextBox

New Features

• ## 264858 - Now, you can specify the tab order of the component using the TabIndex property.

Bug Fixes

• ## 263962, ## 267800 - Now, the negative values are not allowed when you set the Min property to 0.

PDF Viewer

Breaking Changes

• Namespace Change - The previous version of Syncfusion Blazor PDF Viewer contains the namespaces Syncfusion.EJ2.Blazor.PdfViewer, Syncfusion.EJ2.Blazor.PdfViewerServer. After 18.1.0.36 version, this has been modified as below.

New Features

• ## 264778 - Provided the support to programmatically clear the selected text in PDF Viewer.
• ## 263590 - Provided the support to select and delete the annotation programmatically.
• ## F149148 - Provided the binding support for EnableFormFields API.
• ## 259521, ## F150288 - Provided the support to import form fields as JSON object.

Bug Fixes

• ## 149148 - The script error will not occurred if export the form fields/annotation from multiple instance in a page.
• ## 264762 - The EnableAnnotationToolbar property is now working properly in Blazor framework.
• ## 266914, ## 267062 - Now, the script error is not thrown when navigating away from PDF Viewer.

Pivot Table

Breaking Changes

The appearance of the pivot table component has been improved.

New Features

• ## 259812 - Provision has been provided to display only the required aggregation types in their context menu.
• ## 262927 - Now, the drill through and editing feature can be worked in pivot chart by clicking its series.
• ## 263612 - Authentication option provided to access the OLAP Cube while connecting it in a pivot table.
• ## 151883 - Additional parameters are included in the cell template feature to distinguish each cells.
• Now, you can customize the each field buttons (show and hide the icons, restrict drag and drop operations) available in grouping bar and field list separately.
• Provision provided to customize the tooltip for both pivot table and pivot chart views.
• Formatting option included in the calculated field pop-up to format the calculated fields dynamically.
• Provision provided to display only the required chart types in its context menu available in toolbar panel.
• An option included in the chart types context menu to change the multiple axes option dynamically.
• An option included in the member editor to sort its members in a desired order.
• Provision provided to export the complete page when virtual scroll option is enabled.

RichTextEditor

Bug Fixes

• ## 266298 - Resolved the issue with the toolbar actions that are not working when read only mode is enabled.

Scheduler

New Features

• The string format of an .ics file can be passed as parameter to the method ImportICalendar to import the events from that file.

Tabs

New Features

• ## 150892 - Setting ContentLoad.Demand to the property LoadOn will load the tab content on demand and the content rendered once will be maintained in the DOM inorder to maintain its state.

TextBox

New Features

• ## 264858 - Now, you can specify the tab order of the component using the TabIndex property.

TimePicker

Breaking Changes

• The generic value support has been provided in the TimePicker component. Hence TValue must be provided for TimePicker component rendering.

Previous

    <EjsTimePicker Value="@DateTime.Now" ></EjsTimePicker>

Current

    <SfTimePicker TValue="DateTime?" Value="@DateTime.Now" ></SfTimePicker>

New Features

• ## 264858 - Now, you can specify the tab order of component using TabIndex property.

    <SfTimePicker TValue="DateTime?" TabIndex="0" ></SfTimePicker>

TreeGrid

Bug Fixes

• ## 263966- Collapsed state is maintianed when we navigating to next pages.
• ## 267078- Edit template is wokring properly.
• ## F150843- Searching is working properly when EnableCollapseAll property is set as true.
• ## F151934- RowSelected event triggers when we have multiple TreeGrid.

New Features

• Provided support to copy the selected rows or cells data into clipboard.
• Provided batch editing support for bulk add, edit and delete operations.

Treemap

New Features

• ## 258211 - Support to customize the header of the treemap items is provided in the ItemRendering and OnItemClick events.

TreeView

Breaking Changes

• Now, need to specify the get and set methods in TValue class for TreeView component.
• Reverted the support for rendering TreeView component using Fields property. But, this support can be achieved by specifying the Fields values using the TreeViewFieldsSettings tag.

New Features

• ## 255907, F146305 - Provided an option to enable the entire TreeView node as navigable.

    <SfTreeView FullRowNavigable="true" ></SfTreeView>

Visual Studio Code extensions

New Features

• Upgraded the Blazor WebAssembly 3.2.0 Preview 2 project templates.

Visual Studio extensions

New Features

• Added the Diagram component to Syncfusion Scaffolder Visual Studio Extensions.
• Upgraded the Blazor WebAssembly 3.2.0 Preview 2 project templates.