I am excited to announce the Infragistics Developer Day in South Korea this year again!

Jason Beres, Sr. VP of Developer Tools, Ken Azuma, Managing Director for APAC, and Satoru Yamaguchi, Senior Solution Consultant will be visiting Seoul, and they are going to host workshops for WPF, ASP.NET MVC & JavaScript controls.

Event Overview:

Contact: BluePort (02-567-8920 / sales@blueport.co.kr)

* We provide English to Korean translation.

You can find a detailed schedule and agenda here (Korean).

Registration:

Please pick one of them or sign up for each if you're attending multiple workshops. 

June 26, 2019 - Morning Session - WPF

June 26, 2019 - Afternoon Session - ASP.NET MVC + JavaScript

June 27, 2019 - Morning Session - WPF

We are looking forward to seeing you all in Korea!

Related: Infragistics Developer Day 2018 Recap

In the first week of May, I attended ngConf 2019 and I had the wonderful opportunity to talk to many Angular developers about Ignite UI and Angular in general.

Developers were very impressed by Ignite UI for Angular, which includes an Angular Material-based library consisting of more than 80 components, directives, and services to help you build Angular enterprise applications faster. You can learn more here

One question I was asked frequently:  How to select a date range in a Calendar. In this blog post, I’ll show you how to do that.  You need to use Ignite UI for Angular igx-calendar component  to add a calendar in the application. The igx-calendar component comes in three selection modes

1. Single
2. Multi
3. Range

I’ll use a step-by-step approach to show you how to use igx-calendar in an Angular application.

Step 1:  Add Ignite UI for Angular in Angular Project

There are three ways to add an Ignite UI  to an Angular project:

1. If starting a new project, use the Ignite UI CLI to scaffold the project. You can use command line options to add the igx-calendar, including dependency installation.
2. In an existing project, you can use the Ignite UI for Angular Toolbox Extension to add an igx-calendar in the project. Learn how in this blog post.
3. You can use npm to install Ignite UI for Angular dependencies in your project. You can learn that in details here :  Step-by-Step with Images to Add Ignite UI for Angular in an Existing Angular Project

Step 2:   Add required modules for igx-calendar

To work with igx-calendar, you need to add IgxCalendarModule and BrowserAnimtaionModule.  We will display messages in the igx-dialog, so for that purpose we have also added IgxDialogModule

 Modules can be added as shown in the code listing below:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule, IgxDialogModule } from 'igniteui-angular';
import { AppComponent } from './app.component';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        IgxCalendarModule,
        IgxDialogModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

I have added dependencies in the AppModule, however you can add in it any other features.

Step 3:   Use igx-calendar

You can simply use igxCalendar in the component template as shown in the listing below:

<igx-calendar selection="range" (onSelection)="verifyRange($event)">  </igx-calendar >

There are three selection modes available for the calendar. They are as follows:

1. Single
2. Multi
3. Range

By default, the selection is set to single. To work with date range selection, we have set selection property to range.  When the user selects date onSelection, an event will be fired.  In the event handler, you can work with the selected date range, verifying the range, among other options.

Let us also add igx-dialog component to display messages.

<igx-calendar #calendar selection="range" (onSelection)="verifyRange($event)">   </igx-calendar>   <igx-dialog #alert title="Notification" message="You have selected date" leftButtonLabel="OK"               (onLeftButtonSelect)="alert.close()">   </igx-dialog>

 Note that I have added temp ref variables to both components such that we can read them in the component class.

Step 4:   Reading calendar in component class

Like any other element or component of a template, you can read igx-calendar using ViewChild decorator.

Simplifying ViewChild and ContentChild in Angular

 Start with importing IgxCalendarComponent   and IgxDialogComponent,

import { IgxCalendarComponent, IgxDialogComponent } from 'igniteui-angular';

 Create properties decorated with @ViewChild reading the temp variable name as shown below: 

@ViewChild('calendar') public calendar: IgxCalendarComponent;
@ViewChild('alert') public dialog: IgxDialogComponent;

Now you can read all properties and events of IgxCalendarComponent and IgxDialogComponent in appropriate life cycle of component class such as ngAfterViewInit

Step 5:   Handle date selection event

You can handle a date selection event as shown in the next listing :

verifyRange(dates: Date[]) {
 
    if (dates.length > 5) {
        this.calendar.selectDate(dates[0]);
        this.dialog.message = this.calendar.value[0];
        this.dialog.message = 'select at max 5 dates';
        this.dialog.open();
    } else {
        this.dialog.message = 'You have seleceted start date :' + dates[0] + ' end date :' + dates[dates.length - 1];
        this.dialog.open();
    }
 
}

IgxCalendarComponent returns single date object for default value and for range selection it returns date type object array. You can work with returned array like pure JavaScript date object array as per your need.  I am reading the length of the array and, if it is more than 5, I am passing different messages in igx-dialog. If it’s less than 5, I’m passing start and end date.

That’s it. As you can see, it’s quite simple to work with date range selections in Angular applications using igx-calendar component.  You may also want to explore other components in the Ignite UI library  to build an enterprise Angular application faster.

How you present data to the user is essential. Often you cannot present data as it is from the data source to the viewer. Users need a more immersive presentation of the data. Let us consider a data source as listed below:

this.products = [
    { Id: '1', Title: 'Book', ExpiryDate: new Date(), Price: 35, Rating: 3.5 },
    { Id: '2', Title: 'Pen', ExpiryDate: new Date(), Price: 25, Rating: 4.0 },
    { Id: '3', Title: 'Pencil', ExpiryDate: new Date(), Price: 20, Rating: 3.2 },
    { Id: '4', Title: 'Bat', ExpiryDate: new Date(), Price: 135, Rating: 4.0 },
    { Id: '5', Title: 'Ball', ExpiryDate: new Date(), Price: 65, Rating: 3.8 },
];

Let’s begin by defining an instance of the igxGrid in the template and data bind the data property to the product array. It is straightforward to add Ignite UI for Angular Grid as shown in the below code listing:

<igx-grid [data]="products"          [autoGenerate]="true"          width="960px"></igx-grid>

We are setting the autoGenerate property to true; do to this, Ignite UI will auto-generate all the columns by reading from the data source.  The grid will be created as shown in the below image:

As you can see,  data is displayed in a much more immersive way. Also, you may notice that Ignite UI by default has applied date pipes to the ExpiryDate column. If you are new to pipes, Angular pipes take data as input and transforms it into your desired output. The angular library provides many built-in pipes:

• UpperCasePipe
• LowerCasePipe
• CurrencyPipe
• PercentPipe
• DatePipe etc.

When you use auto generate true, Ignite UI applies DatePipe on the date object column, without it ExpiryDate will be rendered as shown in below image:

 So, in autogenerate true, Ignite UI applies required pipes on the data, but still, there is some limitation of it. For example, you cannot use custom pipes or manually choose which pipe to be applied.

For better control of columns, you should configure them manually in IgxGrid.  If you want to format the style or data of a particular column, for example, you have to manually configure columns in igxGrid as shown in the code listing below and then use column template.

<igx-grid [data]="products" [autoGenerate]="false" width="960px">        <igx-column field="Id" header="Id"></igx-column>        <igx-column field="Title" header="Title"></igx-column>        <igx-column field="ExpiryDate" header="Expiry Date"></igx-column>        <igx-column field="Price" header="Price"></igx-column>        <igx-column field="Rating" header="Rating"></igx-column> </igx-grid>

For a particular column, now you can configure header, column properties, and data format. Say you want to apply currency pipe to Price column, you can do that as shown in the code listing below:

The ng-template is like an HTML template and reusable, and it replaces the content when rendered. You can use ng-template to provide

1. Column template
2. Header template
3. Pagination template etc.

We are passing two parameters to ng-template

1. ixgCell : determines that this template will be applied to a particular grid cell
2. let-value : contains data value passed in the cell

Other possible input parameters for ng-template are

1. igxHeader : to apply template to column header
2. let-column : contains column as input data

We will talk about these in detail in another post focused on custom header template.

Now, let us modify Price and ExpiryDate columns with currency and date pipes.

<igx-grid [data]="products" [autoGenerate]="false" width="960px">    <igx-column field="Id" header="Id"></igx-column>    <igx-column field="Title" header="Title"></igx-column>    <igx-column field="ExpiryDate" header="Expiry Date">        <ng-template igxCell let-value>            {{ value | date }}        </ng-template>    </igx-column>    <igx-column field="Price" header="Price">        <ng-template igxCell let-value>            {{ value | currency }}        </ng-template>    </igx-column>    <igx-column field="Rating" header="Rating"></igx-column></igx-grid>

You will get the grid rendered, as shown in the image below:

You can also pass parameters to pipes while using that in IgxGrid.

You can pass any number of parameters to pipes as supported by them, for example, additional parameters can be passed to currency pipe as shown below:

If you are working with date pipe, you can pass parameters as shown below:

If you have created custom pipes, you can also use that, as shown below:

Here firstcharacteruppercase is a custom pipe. If you are not sure how to create it, learn more about it here.

Not only simple pipes, you can also use other Ignite UI for Angular components when formatting column data for better visualization.  I will cover that in separate blog post. Let us put everything together to use data on  igxGrid as shown below:

<igx-grid [data]="products" [autoGenerate]="false" width="960px">    <igx-column field="Id" header="Id"></igx-column>    <igx-column field="Title" header="Title">        <ng-template igxCell let-value>            {{ value | firstcharacteruppercase }}        </ng-template>    </igx-column>    <igx-column field="ExpiryDate" header="Expiry Date">        <ng-template igxCell let-value>            {{ value | date :'fullDate'}}        </ng-template>    </igx-column>    <igx-column [sortable]='true' field="Price" header="Price">        <ng-template igxCell let-value>            {{ value | currency:'CAD':'symbol':'4.2-2'}}        </ng-template>    </igx-column>    <igx-column field="Rating" header="Rating">    </igx-column></igx-grid>

Now you can see the grid is rendered as shown in the image below:

Now you may have a question that what if you are using auto-generated columns, then how you will format data in the desired way. How can you set other properties of the column such as width, sorting, paging, data format, header style, pinning, etc.?  I will cover this in another blog post. As of now, I hope you find this post useful and now know how easy it is to format data using templates in Ignite UI for Angular Grid. You can learn more about Ignite UI for Angular Grid here.  To learn more about pipes, watch the  Desktop to Web: Transforming Data with Angular Pipes video 

Are you a WPF developer? Do your WPF apps have areas of poor performance or don’t run as quickly as you would like?  If so, I have 15 tips to help you identify and improve the performance of your WPF applications. 

While WPF is over a decade old and has been improved greatly over the years, there are still several areas that can suffer from poor performance.  The reasons for this poor performance include things such as bad coding practices, broken bindings, complex layouts, the lack of UI virtualization, and much more. Luckily, with a little planning and a solid understanding of the WPF platform, you can have your WPF apps jumping into warp speed and leaping across the universe in milliseconds. 

I have put together these 15 tips to help you improve the performance of your WPF apps.

1. Simplify your Visual Tree

A common source of performance issues is a deep and complex layout. Keep your XAML markup as simple and shallow as possible. When UI elements are drawn onscreen, a “layout pass” is called twice for each element (a measure pass and an arrange pass). The layout pass is a mathematically-intensive process—the larger the number of children in the element, the greater the number of calculations required.  

2. Virtualize your ItemsControls

As mentioned earlier, a complex and deep visual tree results in a larger memory footprint and slower performance. ItemsControls usually increase performance problems with deep visual trees because they are not virtualized. This means they are constantly being created and destroyed for each item in the control. Instead, use the VirtualizingStackPanel as the items host and make use of the VirtualizingStackPanel.IsVirtualizing and set the VirtualizationMode to Recycling in order to reuse item containers instead of creating new ones each time. 

3. Favor StaticResources over DynamicResources

StaticResources provide values for any XAML property attribute by looking up a reference to an already defined resource. Lookup behavior for that resource is the same as a compile-time lookup. DynamicResources will create a temporary expression and defer lookup for resources until the requested resource value is required. Lookup behavior for that resource is the same as a run-time lookup, which imposes a performance impact. Always use a StaticResource whenever possible. 

4. Opacity on Brushes Instead of Elements

If you use a Brush to set the Fill or Stroke of an element, it is better to set the Opacity on the Brush rather than setting the element’s Opacity property. When you modify an element’s Opacity property, it can cause WPF to create temporary surfaces which results in a performance hit. 

5. Avoid Using Run to Set Text Properties

Avoid using Runs within a TextBlock as this results in a much higher performance intensive operation. If you are using a Run to set text properties, set those directly on the TextBlock instead. 

6. Favor StreamGeometries over PathGeometries

The StreamGeometry object is a very light-weight alternative to a PathGeometry. StreamGeometry is optimized for handling many PathGeometry objects. It consumes less memory and performs much better when compared to using many PathGeometry objects. 

7. Use Reduced Image Sizes

If your app requires the display of smaller thumbnails, consider creating reduced-sized versions of your images. By default, WPF will load and decode your image to its full size. This can be the source of many performance problems if you are loading full images and scaling them down to thumbnail sizes in controls such as an ItemsControl. If possible, combine all images into a single image, such as a film strip composed of multiple images. 

8. Lower the BitMapScalingMode

By default, WPF uses a high-quality image re-sampling algorithm that can sometimes consume system resources which results in frame rate degradation and causes animations to stutter. Instead, set the BitMapScalingMode to LowQuality to switch from a “quality-optimized” algorithm to a “speed-optimized” algorithm. 

9. Use and Freeze Freezables

A Freezable is a special type of object that has two states: unfrozen and frozen. When you freeze an object such as a Brush or Geometry, it can no longer be modified. Freezing objects whenever possible improves the performance of your application and reduces its memory consumption. 

10. Fix your Binding Errors

Binding errors are the most common type of performance problem in WPF apps. Every time a binding error occurs, your app takes a perf hit and as it tries to resolve the binding and writes the error out to the trace log. As you can imagine, the more binding errors you have the bigger the performance hit your app will take. Take the time to find and fix all your binding errors. Using a RelativeSource binding in DataTemplates is a major culprit in binding error as the binding is usually not resolved properly until the DataTempate has completed its initialization. Avoid using RelativeSource.FindAncestor at all costs. Instead, define an attached property and use property inheritance to push values down the visual tree instead of looking up the visual tree. 

11. Avoid Databinding to the Label.Content Property

If you are using a Label to data bind to a String property, this will result in poor performance. This is because each time the String source is updated, the old string object is discarded, and a new String is created. If the Content of the Label is simple text, replace it with a TextBlock and bind to the Text property instead. 

12. Bind ItemsControls to IList instead of IEnumerable

When data binding an ItemsControl to an IEnumerable, WPF will create a wrapper of type IList<T> which negatively impacts performance with the creation of a second object. Instead, bind the ItemsControl directly to an IList to avoid the overhead of the wrapper object. 

13. Use the NeutralResourcesLanguage Attribute

Use the NeutralResourcesLanguageAttribute to tell the ResourceManager what the neutral culture is and avoid unsuccessful satellite assembly lookups. 

14. Load Data on Separate Threads

A very common source of performance problems, UI freezes, and apps that stop responding is how you load your data. Make sure you are asynchronously loading your data on a separate thread as to not overload the UI thread. Loading data on the UI thread will result in very poor performance and an overall bad end-user experience. Multi-threading should be something every WPF developer is using in their applications. 

15. Beware of Memory Leaks

Memory leaks are the number one cause of performance problems in most WPF applications.  They are easy to have but can be difficult to find.  For example, using the DependencyPropertyDescriptor.AddValueChanged can cause the WPF framework to take a strong reference to the source of the event that isn’t removed until you manually call DependencyPropertyDescriptor.RemoveValueChanged. If your views or behaviors rely on events being raised from an object or ViewModel (such as INotifyPropertyChanged), subscribe to them weakly or make sure you are manually unsubscribing. Also, if you are binding to properties in a ViewModel which does not implement INotifyPropertyChanged, chances are you have a memory leak. 

Finally, a bonus tip. Sometimes when you have a performance problem it can be very difficult to identify what exactly is causing the issue. I suggest using an application performance profiler to help identify where these performance bottle necks are occurring in your code base. There are a lot of profiler options available to you. Some are paid, and some are free. The one I personally use the most is the Diagnosis Tools built directly into Visual Studio 2019.

Be sure to engage with me on Twitter, subscribe to my YouTube channel to be notified of new video content, and follow me on Twitch to watch me stream live.

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

Windows Forms 2018 Volume 2 Service Release (Build 18.2.20182.XXXX)

• PDF - Infragistics for Windows Forms 2018 Volume 2
• Excel - Infragistics for Windows Forms 2018 Volume 2

Windows Forms 2019 Volume 1 Service Release (Build 19.1.20191.XXXX)

• PDF - Infragistics for Windows Forms 2019 Volume 1
• Excel - Infragistics for Windows Forms 2019 Volume 1

 Two months ago we’ve released our 8.1.0 version and now we are ready with the next one – 8.2.0. We are continuing the trend to introduce to you the coolest Angular components.This version includes new features as Grid Advanced Filtering, Enhanced Grid Selection, Multi-view Calendar and new Theme that mimics the Microsoft “fluent” design system.  

 We’ve been also working on the Ignite UI CLI documentation, there are a lot of new topics that will help you gain better understanding on how to easily scaffold Angular applications and use pre-configured templates that helps you get your next app off the ground in no time using our Ignite UI CLI. Check out this:

 Last but not least we have the handy new series "Editing entities without breaking the network tab" published by Alex on Medium.

What we have for this release: 

• Advanced Filtering - In the advanced filtering dialog, you could create groups of conditions across all grid columns. The advanced filtering button is shown in the grid's toolbar when allowAdvancedFiltering and showToolbar properties are set to true. You could also open/close the advanced filtering dialog using the openAdvancedFilteringDialog and closeAdvancedFilteringDialog methods.

• New theme Ignite UI for Angular - Now have a new theme that mimics Microsoft "Fluent" design system. Depending on your use case you can use one of the following mixins: igx-fluent-theme and igx-fluent-dark-theme.

• igxDrag and igxDrop enhancements - Now it is possible to drag the base element igxDrag is instanced on by setting the new input ghost to false. Drag animation improvements. Drop strategies. Three new drop strategies have been provided - Append, Prepend and Insert. Also an input dropStrategy to the igxDrop which specify which strategy should be used when dropping an element inside the drop area. Custom one can be specified as well.  

• Multi-view Calendar - by using the monthsViewNumber input you can now manage the displayed months in the calendar, it also supports all three types of selection, keyboard navigation and there is a way to hide the days which are not part of the month by using the hideOutsideDays input.

• Sparkline in all Primary Grids - We have added the sparkline chart to Business Propeller Grid, Data Grid, Tree Data Grid and Hierarchical Data Grid

• Enhanced Selection functionality of the Grids - Introduced new properties cellSelection and rowSelection which accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple. Also hideRowSelectors property is added, which allows you to show and hide row selectors when row selection is enabled. 
• Custom template for row selectors - Introduced functionality for templating row and header selectors 
• IgxCombo - Combo selection is now consistent when valueKey is defined. When valueKey is specified, selection is based on the value keys of the items 
• igxExcelStyleLoading - Directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead. 
• FilterStrategy - Input that allows you to override the default filtering strategy 
• uniqueColumnValuesStrategy - Input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid). 
• IgxHierarchicalGrid Row Islands - now emit child grid events with an additional argument - owner, which holds reference to the related child grid component instance 
• IgxCheckbox - introduced a new read only property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding. 
• IgxOverlay - introduced a new ContainerPositionStrategy. The new strategy positions the element inside the containing outlet based on the directions passed in trough PositionSettings. 

All other changes here.

Angular Connect London 2019

 The year so far is filled with opportunities and positive experiences, such as the Angular Connect conference that we attended. It was a great conference — it brought together a big group of software developers and industry leaders all sharing a common interest — the present state and the future of Angular web development. As a premium sponsor at the event, Infragistics had the opportunity to connect with not only the delegates of the event but with the wider Angular community. Also having one-on-one chats about what they are working on and how we at Infragistics can help them overcome complex problems with our Ignite UI for Angular product. 

More about the Angular Connect Conference you can find by reading our Medium post here.

Going Down The Road

One milestone is down and we are after the next one. We have decided to offer you a sneak peek on what is "cooking" in IgniteUI for Angular Sprints through the GitHub Projects. Now you can follow the progress of your issues and be part of the process as you comment, report or request features on GitHub. Do not miss the opportunity to strike while the iron is hot!

Follow us on Medium and stay up to date with the latest Angular related perks that we work on, give us a star on GitHub and help us to continue improving our product by addressing any concerns, questions or feature requests in the issues section. We will give our best to constantly improve our product experience to suits all your needs and build apps with ease

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

WPF 2018 Volume 2 Service Release (Build 18.2.20182.428)

• PDF - Infragistics for WPF 2018 Volume 2
• Excel - Infragistics for WPF 2018 Volume 2

WPF 2019 Volume 1 Service Release (Build 19.1.20191.244)

• PDF - Infragistics for WPF 2019 Volume 1
• Excel - Infragistics for WPF 2019 Volume 1

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

Windows Forms 2018 Volume 2 Service Release (Build 18.2.20182.429)

• PDF - Infragistics for Windows Forms 2018 Volume 2
• Excel - Infragistics for Windows Forms 2018 Volume 2

Windows Forms 2019 Volume 1 Service Release (Build 19.1.20191.238)

• PDF - Infragistics for Windows Forms 2019 Volume 1
• Excel - Infragistics for Windows Forms 2019 Volume 1

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

Ignite UI 2018 Volume 2

• PDF (Ignite UI 2018 Volume 2, Build 18.2.20182.116)
• Excel (Ignite UI 2018 Volume 2, Build 18.2.20182.116)

Ignite UI 2019 Volume 1

• PDF (Ignite UI 2019 Volume 1, Build 19.1.20191.39)
• Excel (Ignite UI 2019 Volume 1, Build 19.1.20191.39)

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

ASP.NET 2018 Volume 2

• PDF (ASP.NET 2018 Volume 2, Build 18.2.20182.440)
• Excel (ASP.NET 2018 Volume 2, Build 18.2.20182.440)

ASP.NET 2019 Volume 1

• PDF (ASP.NET 2019 Volume 1, Build 19.1.20191.231)
• Excel (ASP.NET 2019 Volume 1, Build 19.1.20191.231)

Microsoft's new ASP.NET Blazor framework has been getting a ton of buzz recently, and rightfully so. Imagine .NET running in the browser. No plugins, no add-ons, no transpilation magic. It's every .NET developers dream.  Since the initial previews of Blazor were released, we have been getting a number of questions about our intention to provide support for Blazor. My response was always something similar to "we're working on it, you just have to wait a little longer".  I am happy to say that your wait is over!

Today, I am excited to announce the immediate availability of Infragistics Ignite UI for Blazor Preview. Yes, that's right... you can now take advantage of our blazing fast, feature rich, easy to use components in your Blazor applications today.

But wait a minute Brian…. the title says “Preview”, what’s up with that?  If you have been following my career here at Infragistics for the last 8 years, you know that I don’t like to keep things from my community.  I want your honest and candid feedback, and the best way to get that is to give you what we have now.  Not tomorrow, not next week, not next month, but now.  I wanted to get these components in your hands as soon as possible, because waiting sucks.  We have some loose ends to tie up before we can call these Blazor components RTM, but don’t let that “Preview” term fool you.  These controls are ready to be thrown into the fire and pushed to their limits.

Download the FREE Infragistics Ignite UI for Blazor Preview

What exactly do you get with the Ignite UI for Blazor preview? Well, let's find out.

Controls Shipping in Preview

Although this is just a preview, Ignite UI for Blazor is packed with 11 new Blazor components. I want to point out that we are providing a very simple Sample Browser to help you become familiar with the controls.  Fork it, run it, explore it.  This should do for now, at least until we can ship the official Infragistics Ignite UI for Blazor Sample Browser.

Now, let's take a moment to quickly cover all the great components you can start using in your Blazor applications today.

BulletGraph

The bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.

CategoryChart

This touch-enabled charting control makes visualizing category data a breeze. Built on top of a high-performing and feature-rich data chart, the category chart filters the complexities of data visualization into a simplified API that anyone can use.

Data Grid (LiveGrid)

The Ignite UI for Blazor data grid is a tabular component that allows you to quickly bind and display your data with little coding or configuration. Features of the data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The data grid is optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns.

Note: When defining this component in your Blazor app, you should use the <LiveGrid> element for now. This name will be changing when we RTM the product.

DoughnutChart

Display your data with multiple series using this rich Doughnut Chart. Similar to a Pie Chart, the Doughnut Chart shows categorical statistics expressed in percentages. With its hollow center, it's best for displaying multiple series using concentric rings where each ring represents a data series. Bind easily to data, configure the inner radius, display exploded slices, customize themes, and more with this well-rounded control.

FinancialChart

This lightweight, high-performance chart is easy to configure to display mission-critical financial data using a simple and intuitive API. Just bind your data, and the chart takes care of everything else. The Blazor Financial Chart component is part of Infragistics’ best-in-breed UI for building high-performance, high-volume financial services, and capital market data applications.

LinearGauge

Make data visualizations and dashboards more engaging with a Linear Gauge that shows off KPIs with rich style and interactivity. The gauges are powerful, easy to use, and highly configurable to present dashboards.

GeographicMap

Create highly-detailed, thematic geographical maps using an innovative feature set that includes: custom shape templates, the ability to render polylines and polyshapes, Map Progression, Scatter Area Plots, an intuitive Overview Pane, and more.

PieChart

Create simple or exploded pie charts. Customize the threshold for inclusion in the Other category, and display text labels and images that can be within or outside of the pie in a manner that avoids overlap. Users can click or drill down to view underlying data, explode out a section of the pie, and find information via tooltips.

RadialGauge

Radial Gauge makes your data visualizations and dashboards more engaging and shows off KPIs with rich style and interactivity. The gauges are powerful, easy to use, and configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and aircraft cockpits.

Sparkline

The Sparkline control is a data-intense, design-simple graphic that allows end users to spot trends, variations, and patterns in data in a clear and compact representation.

TreeMap

Show users the relative weighting of data points at more than one level with Blazor treemaps (also known as heatmaps in the financial industry) supporting strip, squarified, and slice-and-dice algorithms.

Getting Started

Now that you have a taste for what awesomeness is available to you. Your next question is how do you get started. Luckily, that can be done in three easy steps:

1. Create your Blazor app
2. Add the Infragistics.Blazor NuGet package
3. Add the "Infragistics.Blazor/app.bundle.js" script to the _Host.cshtml file (server project example)

<script src="_content/Infragistics.Blazor/app.bundle.js"></script> <script src="_framework/blazor.server.js"></script>

And that's it! You're now ready to start using the Ignite UI for Blazor components in your razor pages. Using a component in your razor page can be done in two steps:

1. Add a using statement

@using Infragistics.Blazor.Controls;

2. Define your component in HTML and bind your data

<FinancialChart Width="100%" Height="500px" DataSource="@data.StockMultipleSources"></FinancialChart>

That's it! It's that easy.

Let’s Wrap this Baby Up!

Seeing this preview probably has you asking yourself, “Brian, these controls are amazing and I can’t wait to use them, but what’s next?  What’s your long term plan for Blazor?”.  Well, I’m glad you asked.  As I write this blog, we are researching many other components that really concentrate on line of business scenarios for web applications.  We have a long term plan for supporting your Blazor application needs, and we are committed to bringing you the markets best, highest performing, and most beautiful Blazor controls period.  In order to accomplish this, we need your help. 

If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website.  Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. You can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live. Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

Lastly, when you do build something cool with our controls, please make sure to let us know.

With today's launch, we are very excited to get Ultimate 19.2 into your hands. Ultimate 19.2 builds on 3 key themes:

• .NET Core 3 for Visual Studio 2019
• Innovating on New Platforms for Modern Web
• Best of Breed Angular UX

Let’s look at these areas in more detail.

.NET Core 3 for Visual Studio 2019

Infragistics Ultimate now includes full support for .NET Core 3 in WPF, Windows Forms and ASP.NET MVC (ASP.NET Core).  This allows Microsoft Visual Studio developers to leverage the most modern .NET capabilities for web, rich client, IoT, artificial intelligence & machine learning apps.  From a developer perspective, you’ll see immediate improvement in what you can achieve with a smaller, lighter-weight .NET Framework. With Infragistics Ultimate 19.2, you can modernize your web and desktop applications and gain better performance while working with the latest .NET Core CLI tools and SDK-style projects in Visual Studio.

Other advantages include the ability to code against the latest C# language features, take advantage of XAML islands, provide side-by-side deployments, and more.  For web developers, Infragistics Ignite UI for JavaScript fully supports the latest ASP.NET Core 3 release letting you build modern MVC applications taking advantage of all the new ASP.NET Core features. And with our support for Razor pages, you get the ease of use of both Visual Studio and Ignite UI for JavaScript to deliver the best modern experiences on the web.

All our .NET Core assemblies are shipped as Nuget packages, which gives you a really simple way to Infragistics-enable your application.

Innovating on New Platforms for Modern Web

Ignite UI is the best-of-breed choice for high-performance modern web development – and we are continuing this innovation with support for 2 bleeding-edge platforms:

• Web Components
• NET Blazor

As the web evolves, so does Ignite UI.  You can now take advantage of the most modern web platforms in your next app with the best grids, charts and more on the market.  Ignite UI is architected for high-speed rendering and optimized file size, delivering the fastest UX possible for your apps including rich theming and guidance you need to build modern web experiences in desktop and mobile browsers. 

If you’re not familiar with either of these two technologies, here is a quick summary:

• Web Components provides encapsulation and the concept of reusable components and custom elements in a dependency-free approach to writing modern web applications. Web Components is not a library or a framework – it’s a web standard. Browsers handle Web Components as native custom elements. Libraries and frameworks come and go, but standards are implemented uniformly and are not subject to interpretations. New in 19.2, Ignite UI for Web Components offers the same rich component set that Infragistics ships in Ignite UI for React, like a high-performance data grid, over 50 chart types, Financial Charting, Excel Spreadsheet and Excel Library and more. 
• NET Blazor is a new framework included in .NET Core 3 for building interactive client-side web UI. Ignite UI for Blazor Preview is a rich set of UI controls and components that brings the power of Ignite UI to Blazor developers, including both server-side rendering and WebAssembly on the client. We see WebAssembly as the future of the web, and with Ignite UI for Blazor you can get started with the productivity of Visual Studio and the power of Blazor for your future single-page applications (SPAs).

Both Ignite UI for Web Components and Ignite UI for Blazor ship with the same set of powerful controls we ship in Ignite UI for React:

• Data Grid
• Data Chart (50+ chart types)
• Financial Charting
• Doughnut Chart
• Pie Chart
• Sparkline
• Bullet Graph
• Linear Gauge
• Radial Gauge
• Geospatial Map
• Excel Spreadsheet
• Excel Library
• Zoom Slider
• … and more

Best of Breed Angular UX

We offer the most complete UI toolset on the market for Angular developers.  With everything from Data Grids, Business & Financial Charts to Spreadsheet & Excel Library, plus dozens of additional controls, Ignite UI for Angular helps you deliver complete solutions for the modern web, with the best tooling and the deepest feature set that your customers demand.  We are keeping the pedal to the metal with Ignite UI for Angular, shipping near-monthly releases, with more and more of the features that will help you deliver amazing experiences in your apps.

To read all of the details, check out Rado’s blog https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-angular-19-2, and here are a few highlights of what you’ll get in the last few updates:

• Multi-Row Layout (with Editing)
• Copy Grid to Clipboard
• Advanced Filter Dialog
• Multi-Month Calendar Dropdown
• Fluent UI Theme
• Sparkline Charts
• TreeMap Chart
• Excel Library
• Excel Spreadsheet
• … and a ton more!

To see all of these samples plus more in action, check out the samples browser, which includes new guidance for server-side rendering, desktop to web and CLI docs.

Wrap Up

Ultimate 19.2 includes many new features that are driven by all of your feedback. Try it today or to get specific details on each platform's features and to check out the samples, here is a summary of links that will get you started.

Angular Blog: What's New in Ignite UI for Angular -- https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-angular-19-2

Angular Live Online Samples -- https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting_started.html

Web Components Blog: What's New in Ignite UI for Web Components -- https://www.infragistics.com/community/blogs/b/jason_beres/posts/new-product-ignite-ui-for-web-components

Web Components Live Online Samples -- https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html 

Blazor: What's New in Ignite UI for Blazor Preview -- https://www.infragistics.com/community/blogs/b/infragistics/posts/introducing-the-ignite-ui-for-blazor-preview

Blazor Live Online Samples -- https://github.com/brianlagunas/Infragistics.Blazor.Alpha

As usual, we need to hear what you have to say, so please shoot me an email at jasonb@infragistics.com and let me know how we can help you to continue to deliver value to your customers with Infragistics.

Thanks, and Happy Coding!

Jason

We are excited to announce Ignite UI for Web Components.  If you’re not familiar with Web Components, here’s a quick primer:

• Web Components is not a library or a framework – it’s a web standard. Browsers handle Web Components as native custom elements. Libraries and frameworks come and go, but standards are implemented uniformly and are not subject to interpretations.

With Ignite UI for Web Components, you can build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. Ignite UI for Web Components gives you the highest-performing data grid, over 50 chart types, including financial charting plus Excel spreadsheet and Excel library, and much more.

Understanding Web Components

Web standards move slowly - so the history of modern web development is full of JavaScript Frameworks leaping ahead and filling a need of developers, and then web standards catching up and obviating the need for those frameworks. jQuery is a good example for this. Inspecting and manipulating the DOM in a cross-browser way was very difficult, so jQuery stepped in to make it safe and easy to do. Suddenly everyone could do much more complicated things on the client, with far less knowledge and effort. But as browsers standardized further and implementations converged with fewer quirks on how to inspect and manipulate the DOM, suddenly jQuery became far less necessary.

To build more complicated client applications, developers have had a need to modularize and their UIs, breaking them into individually testable and reusable components. The browsers didn’t have good support for this kind of modularization built in, so work began on a set of standards for how you might create reusable and encapsulated pieces of UI, described collectively as Web Components. But, of course, web developers needed all this stuff ASAP, so there are a bunch of UI frameworks that also provide a way to componentize your web UI. That’s not all they do, of course, they also provide a suite of other utilities (Data binding, routing, etc) that help developers build applications, but a significant portion of what they are trying to accomplish is to help you break your UI down into testable and reusable components.

Why Ignite UI for Web Components?

Web Components are a standards-based way to build or use reusable UI Components for the web. When you use our Web Components product the components are treated as if they are DOM elements that are just built into the browser, the same as <span>, <p> or <div>, and others. What this means is that almost anywhere you can use a <p> you can also use a <igc-category-chart>. This includes a naked html file, with no further processing, or set via the innerHTML property, etc. What this also means it that you should be able to use these components with any UI framework you would want to use in your application (Angular, React, Vue, Polymer, etc.), since our components are just treated as if they are “built-in” with no special processing required to create or manage them. It's possible for a UI framework to interfere with custom elements, or just be hard coded to only expect the traditional built in DOM elements, but since custom elements are part of the web standards, such incompatibility is erroneous rather than by design.

Should a React or Angular developer use these? Probably not. We have Angular specific and React specific products that go above and beyond what our Web Components product does to help you leverage Angular or React specific functionality to make your app easier to build. But if you are building a Vanilla JS application, or a primarily server side rendered application, or an application using a UI framework we don’t yet have a specific product for, then our Web Components product is great for this. It has no UI framework dependencies that may interact poorly with other things your application might be doing, and uses built in functionality of the browser for its operation.

What’s New in Ignite UI for Web Components

Now that you understand Web Components – let’s talk about Ignite UI for Web Components.  Ignite UI for Web Components ships with the same set of powerful controls we ship in Ignite UI for React: 

• Data Grid 
• Data Chart (includes 50+ Chart Types) 
• Financial Charting 
• Doughnut Chart 
• Pie Chart 
• Sparkline 
• Bullet Graph 
• Linear Gauge 
• Radial Gauge 
• Geospatial Map 
• Excel Spreadsheet 
• Excel Library 
• Zoom Slider 
• … and more

With Ignite UI for Web Components you can build sophisticated data grid apps like this:

Rich Geo-spatial applications:

Expressive Tree Map Analysis Tools:

Interactive Dashboards:

And Real-time data grids:

For pretty much any line of business scenario, we have you covered!

Wrap Up

We are pretty excited about what Web Components can offer, especially if you are building a vanilla JS app or need some rich UI controls in a framework we don’t currently support. To get started, you can follow the steps on this page:

https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html

And browse all of the great samples here:

https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/data-grid.html

And that's it! You're now ready to start using the Ignite UI for Web Components in your next app.  If you have any questions or features requests, or just want to talk about the types of apps you are building, shoot me an email at jasonb@infragistics.com.  

I also want to thank Graham Murray, a Sr. Product Architect on the team for his detailed Web Components background that I used in this blog.  To talk to folks like Graham on our team and get this sort of insight, make sure to attend our Office Hours hosted monthly by Brian Lagunas where our product architects, team leads and developers are online to answer anything you throw at them!

Thanks, and Happy Coding!

Jason