Quantcast
Channel: Infragistics Community
Viewing all 2223 articles
Browse latest View live

Building a CRUD-enabled Angular Application with Ignite UI For Angular and CDATA API Server

$
0
0

We at Infragistics always strived to deliver to you best of breed UI components to help you build modern UI and meet best UX practices. In addition to that, we provide some tooling to support you all the way from design to implementation and speed up development time.

While we tried to support this with rich documentation and samples, it was always a trouble to replicate a real-world scenario where the variety of databases and backend technologies is enormous.

Here we are going to review how to build an Angular application with Ignite UI For Angular, implementing full CRUD (Create, Read, Update, Delete) operations against an OData RESTful API, created with API Server.

To support this, we will use API Server from CData. API Server is the perfect tooling to expose your data as a professional API. Hook up any SQL or NoSQL database and the API Server instantly generates flexible and fully documented APIs. 

This article aims to:

  • Go through the API Server installation and setup.
  • Build a REST API from the local SQL instance of Northwind database
  • Consume and visualize the data in an Angular application built with Ignite UI for Angular
  • Demonstrate how to add full CRUD capabilities to the igxGrid to consume the API

Setting Up the API Server and connecting it to SQL server

Download the API Server. Once installed, go to API Server/Settings/Connections and add SQL Server connection for the Northwind database. Set the database connection credentials:

If you don’t have the Northwind database, you can create it by running this script).

After setting up the connection, go to Resources and choose Add resource. API Server will open a wizard, allowing you to choose tables from your connections. We choose Products, Orders and Order details tables from the Northwind connection. These are the tables that we are going to use in the demo.

Authentication

Next go to API Server Settings/User, and add new user. Copy the created auththoken and use it to set the value of the `authToken` variable inside `remoteData.service.ts`

Finally, we need to enable CORS(Cross-origin resource sharing).

Go to API Server Settings/Server and click the checkbox to "Enable cross-origin resource sharing (CORS)" and the checkbox to "Allow all domains without '*'" (or define the domains that are allowed to connect in Access-Control-Allow-Origin).

Set Access-Control-Allow-Methods to "GET, PUT, POST, DELETE".

Finally, you can go to API to see the Resources you have. Click any of it and API Server will list the URLs for the corresponding methods, along with description of the request and response body objects and code snippets.

Fine tuning

API Server allows for fine tuning of the API created. For example, you can define a relationship between tables, which tells API Server to build a SQL Join query and deliver the result in a single response (check the Status tab of the API Server to see what is happening behind the API Server). Quite helpful, isn’t it?

Let’s create such a relation between the Order and Order_details tables from Northwind. Click on the Edit icon for the Northwind_dbo_Order resource, and on the primary ID line (OrderID), add the ‘relationships’ attribute:

You can then retrieve data from both endpoints by using the OData $expand keyword:

api.rsc/Nortwind_dbo_Order(10248)?$expand=Details

Follow API Server documentation for more examples on everything you would need to create an enterprise ready API, including in-memory caching, users, rate limits, and etc.

Consume and visualize the data in an Angular application built with Ignite UI for Angular

Data Service

In our Angular application, let’s first create an injectable data service. This data service acts as the middleware between the view and the backend. It uses the HttpClient class in Angular to talk to the server over the HTTP protocol. It reads the data, does some normalizing (if needed) and returns it to the view of our application as an Observable stream.

We create four methods to implement the GET, POST, PUT and DELETE:

/**
 * Retrieves data from specific table.
 * Optionally pass `fields` argument to build the OData $select query
 * Optionally pass `expandRel` argument to build the OData $expand query, which joins a related table to the response.
 * Optionally pass `id` and 'primaryKey' arguments to build $filter query
 */
public getData(tableKey: string,
    fields?: string[],
    id?: number,
    primaryKey?: string,
    expandRel?: string): Observable<IProduct[] | IOrderDetails[]> {

    return this._http.get(this.buildDataUrl(tableFullName, fields, id, primaryKey, expandRel), HTTP_OPTIONS)
  );
}

public editData(tableKey: string, body: IProduct): any {
    return this._http.put(`${BASE_URL}/${tableFullName}(${id})`, body, HTTP_OPTIONS)
  );
}

public addData(tableKey: string, body: IProduct): any {
    return this._http.post(`${BASE_URL}/${tableFullName}`, body, HTTP_OPTIONS)
   );
}

public deleteData(tableKey: string, id: string): any {
    return this._http.delete(`${BASE_URL}/${tableFullName}/${id}`, HTTP_OPTIONS)
  );
}

A good practice is to implement the methods in the data service as generic as possible. The above methods take the SQL database table name as input and the record to be added/edited, or the id of the item to be deleted.

For the GET method, one can optionally pass fields and other arguments to create complex OData queries (select the fields to retrieve, filter, sort, etc.). See the builtDataUrl method for implementation details. If not passed, the getData method from above will return all data from the corresponding table.

To visualize the data returned, our main component calls the getData method. Initially it fetches data from the Products table to populate the products grid on the page:

When a row in the products grid is selected by the user, a request to retrieve data from the Orders and Order_details table is made:

this._ordersRequest$ = this._remoteService.getData(Tables.ORDERS, fields, pid, this.pkey, 'Details').subscribe(data => {
    this.populateOrdersGrid(data as IOrderDetails[]);
    this.populatePieChart(data);
    this.populateTimelineChart(data);
});

Note the additional arguments passed. First, we do not need all data fields to be returned, so we pass an array with the field names that we need. Also, `pid` and `pkey` are passed, which will build a $filter query to return results only for records, where ProductID equals the value of `pid`. By OData specification, the request is $filter=(ProductID eq 32).

The ‘Details’ argument is the value of a relation that the Orders table has (Remember when we set this up in the Fine tuning ?). Knowing that the Orders table has a relation to the Orders_details table, API Server will construct a join SQL query, and will return results from both tables in a single response. Making our life so much easier here!

Visualization

Once we have the data we need, we may show it to the user in various ways to help him get information from it. Adding one more grid on the page, a timeline chart and a pie chart and we have a full working dashboard now!

The orders grid on the page shows all orders featuring the product selected in the first grid. The timeline chart visualizes the occurring of orders in time, helping you understand if Product sales have been going up or down. The PieChart aggregates the data per country and display slices based on Quantities. Just one look at the pie chart and your business users know where they ship most.

The configuration of the charts is simple. For the timeline chart we used иgxCategoryChart, which needs data source and can do the rest for you! For the иgxPieChart, pass a dataSource and the valueMemberPath, which tells the chart which value from the data source to use:

<!-- Timeline Chart --><igx-category-chart [dataSource]="ordersTimelineData" chartType="line"></igx-category-chart><!-- Pie Chart --><igx-pie-chart [dataSource]="ordersDetailsData" valueMemberPath="Freight" labelMemberPath="Quantity"></igx-pie-chart>

This is how it looks, once we are done with the above:

Demonstrate how to add full CRUD capabilities to the igxGrid to consume the API

In the Angular component, inject the data service using DI. Now we are ready to use the service to do full CRUD operations against our data backend. Note that IgxGrid does not provide its own UI for adding and deleting rows. For that reason, once the response from the CRUD operations for CREATE and DELETE is retrieved, just manually update the corresponding operation in the grid:

// get data for the corresponding table
this.dataService.getData(Tables.PRODUCTS).subscribe(data => {
    this.populateProductsGrid(data as IProduct[]);
});

// edit the record object
this.dataService.editData(Tables.PRODUCTS, editedRecord).subscribe({
});

// delete the record with corresponding ID
this.dataService.deleteData(Tables.ORDERS_DETAILS, ID).subscribe(response => {
    this.grid.deleteRowById(ID);
});

//  Ads new record
this.dataService.addData(Tables.PRODUCTS, newRecord).subscribe(response => {
    this.grid.addRow(newRecord);
});

For readability purposes, you see only the important part in the methods. Wonder where the new record or edited data come from? That’s right, you allow your user to edit data directly in the igxGrid, and then leverage the IgxGrid API to get everything you need:

<igx-grid #productsGrid(onRowEdit)="onRowEdit($event)".../>

public onRowEdit(event: IGridEditEventArgs) {
  const record = event.newValue;
  this.dataService.edit(Tables.PRODUCTS, record).subscribe(response => {
    });
}

In the above example, we attach an event handler for the grid onRowEdit event. Reading the event arguments, we get the edited record and use it the request body object in the PUT method. By specification, the server will respond with the updated object, indicating that request have been successful. Of course, it may happen that a record with the corresponding ID (read from the body object) is not found, or other error occurs.

In this case, instead of using the syntax sugar above (defining a callback only for the next notification, sent by the Observable), you may want to pass handlers for the error and complete notifications too:

this.dataService.editData(Tables.PRODUCTS, editedRecord).subscribe({
    next: (metadata: any) => {
    },
    error: err => {
      console.log(err);
    },
    complete: () => {
      console.log('Complete notification')
     }
});

As a best practice, we recommend adding error and complete handlers as above for each operation, and then implementing appropriate UI alerts for the errors (prompt to retry, or load offline content meanwhile, etc.). This will allow you to keep better control and will protect your users just in case, if, for some reason, the server responds with an error.

We hope that you found this blog to be helpful as you look to implement full CRUD operations against an OData API in your own apps. As you can see, Ignite UI for Angular components expose a rich public API, which makes it easier to implement full CRUD, while also offering advanced capabilities for visualizing the data.

Please note: the code provided is fully functional, and will provide a great base that you can take and start building on. Just fork the sample repository and step on our code base. For example, start by adding more and more operators, leveraging the OData querying flexibility. Have fun with it and do not hesitate to contact us or even push your own code, we will be happy to review it!


Moving from Trial to Licensed Ignite UI NPM Packages

$
0
0

This post highlights the changes starting with NPM packages deployed from our 20.1 release (9.1 Angular) from June 2nd and forward.  Any NPM packages prior to this release are unaffected.

It is important to know all the legal terms and conditions regarding the products that you purchase and use. 

If you are building a commercial product or your license has expired, you will need to acquire a commercial license. This will enable you to use our private npm feed hosted on https://packages.infragistics.com/npm/js-licensed/ for development. There you will find the latest versions of the Ignite UI for Angular packages. If you have a valid commercial license, you can use this private feed and you will have access to the full version of Ignite UI for Angular.

If you are building a non-commercial productcontact us and we will provide you with the appropriate license.

Ignite UI for Angular npm packages - Using the Private npm feed

Npm is the most popular package manager and is also the default one for the runtime environment Node.js. It is highly adopted and is one of the fastest and easiest way to manage the packages that you depend on in your project. For more information on how npm works, read the official npm documentation.

Infragistics Ignite UI for Angular is available as a npm package and you can add it as a dependency to your project in a few easy steps.  Choosing this approach will not require configuring npm. By installing Ignite UI for Angular via npmjs.com package you will be using the Ignite UI for Angular Trial version of the product.

Infragistics Ignite UI Dock Manager Web Component is available as a separate npm package and by installing it you will start using the Ignite UI Dock Manager Web Component Trial version of the product.

More information on how to start using the Ignite UI for Angular npm package can be found in this topic and more information on Ignite UI Dock Manager Web Component can be found here.

Upgrading packages using our Angular Schematics or Ignite UI CLI

If Ignite UI for Angular has been added to the project using ng add or the project has been created through our schematics collection or Ignite UI CLI, you can use our upgrade-packages to automatically upgrade your app to using our licensed packages.

Note

As the process changes packages, we recommend that you update your project first before switching to avoid picking up a higher version of Ignite UI Angular and missing on potential update migrations. Follow our Update Guide.

Run the following schematic in your project:

ng g @igniteui/angular-schematics:upgrade-packages

or if using igniteui-cli:

ig upgrade-packages

The schematic or command will take care of switching the package dependencies of the project and update source references. You'll be asked to login to our npm registry if not already setup.

How to setup your environment to use the private npm feed

First you need to setup the private registry and to associate this registry with the Infragistics scope.

This will allow you to seamlessly use a mix of packages from the public npm registry and the Infragistics private registry. You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile.

Note

npm is disallowing the use of the "@" symbol inside your username as it is considered as being "not safe for the net". Because your username is actually the email that you use for your Infragistics account it always contains the symbol "@". That's why you must escape this limitation by replacing the "@" symbol with "!!" (two exclamation marks). For example, if your username is "username@example.com" when asked about your username you should provide the following input: "username!!example.com".

Now, to log in to our private feed using npm, run the adduser command and specify a user account and password:

npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scope=@infragistics --always-auth

After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project:

npm uninstall igniteui-angular
npm install @infragistics/igniteui-angular

npm uninstall igniteui-dockmanager
npm install @infragistics/igniteui-dockmanager

Have in mind that we have set the Ignite UI for Angular package to be scoped, meaning that no changing the registries is needed if you want to install packages from our private feed and from npmjs.org simultaneously.

Some additional changes might have to be made in your project source

If you are upgrading from trial to licensed package and you are not using the automated CLI migrations:

  • Add a paths mapping in the project tsconfig.json.
{
  ..."compilerOptions": {"baseUrl": "./","outDir": "./dist/out-tsc",
    ..."paths": {"igniteui-angular": ["./node_modules/@infragistics/igniteui-angular"],"igniteui-dockmanager": ["./node_modules/@infragistics/igniteui-dockmanager"],"igniteui-dockmanager/*": ["./node_modules/@infragistics/igniteui-dockmanager/*"],
    }
    ...
}

  • Add a stylePreprocessorOptions mapping to your project angular.json
{"projects": {
    .."prefix": "app","architect": {"build": {"builder": "@angular-devkit/build-angular:browser","options": {
            ..."aot": true,"stylePreprocessorOptions": {"includePaths": ["node_modules/@infragistics"
                ]
            }
            ...
},

  • remove the ~ sign from your project sass imports for igniteui-angular/lib source:
@import "~igniteui-angular/lib/core/styles/themes/index";

// Should be changed to

@import "igniteui-angular/lib/core/styles/themes/index";

So, if you've already adopted npm and you have an Ignite UI for Angular license, don't hesitate setting up the Infragistics private feed and boost your productivity, using the full potential of Ignite UI for Angular.

Access Tokens

You can use tokens as an alternate way to authorize in your command-line utility, and access Infragistics products (packages). Your generated tokens will remain active as long as your subscription is current.  You can access your token via your Customer Portal at https://www.infragistics.com/my-account/keys-and-downloads.

Note: Please keep your access tokens a secret, like a password. New tokens will be displayed until the page is refreshed, after that tokens will be obfuscated.

Wrap Up

This change should be straightforward for you.  If you have any issues, please contact me at jasonb@infragistics.com, check the Forums or contact Support directly. 

Thanks

Jason

What’s New in 20.1: Ultimate UI for Xamarin

$
0
0

We’re proud to announce the following new features and improvements in Infragistics Ultimate UI for Xamarin in this 20.1 release. With enhanced grid and charting features, Infragistics Ultimate UI for Xamarin helps you build great mobile apps faster than ever. Here are the newest features and improvements you can use in your Xamarin apps today.

Data Grid

The data grid is probably the most important control an app can have. So, it's no surprise that we are continuously improving our data grid.  In this 20.1 release, the Xamarin data grid gets column pinning and column summaries.  Let's dig into the details of these two additional data grid features.

Column Pinning 

Column pinning... that basically says it all.  This simple, yet difficult to implement feature, adds the ability for a column, or multiple columns, to be pinned to the left-hand or right-hand side of the data grid.   Pinning a column is as simple as setting the Pinned property on the column.

<ig:TextColumn HeaderText="First Name" PropertyPath="FirstName" Pinned="Left"/> 

The Pinned property has three options: 

  • Left - enabling Left will position pinned columns to the left-hand side of the grid 
  • Right - enabling Right will position pinned columns to the right side of the grid. 
  • None - enabling None will unpin a column and reposition its default placement within the grid. 

Optionally, you can programmatically pin and unpin columns using the new PinColumn method. As expected, the columns that are not pinned will still maintain horizontal scrolling.

Column Summaries 

Summaries are another one of those features that are extremely difficult to implement, yet provide the ability to aggregate your data in a very simplistic way. To use summaries in the Infragistics Xamarin Data Grid, simply add a collection of ColumnSummaryDecriptions to the grid’s SummaryDescriptions property, and be sure to set the grid’s SummaryScope property to its appropriate value.

The grid supports four summary settings that you can configure using the SummaryScope property: 

  • Root – This will place the summary area at the bottom of the grid. 
  • Sections – (Groups) This will place a summary area within the scope of grouped records. When using this value, the GroupSummaryDisplayMode is used to control the location of the summary area within the scope of the grouped record. 
  • Both – adds a summary to both the grid, and to each grouped record. 
  • None – no summary area is added 

<ig:XamDataGrid SummaryScope="Root" >             <ig:XamDataGrid.SummaryDescriptions> <ig:ColumnSummaryDescription PropertyPath="Product" Operand="Count" /> </ig:XamDataGrid.SummaryDescriptions> </ig:XamDataGrid> 

When using the SummaryScope.Sections scope, the GroupSummaryDisplayMode property is used to control the location of the summary area within the scope of the grouped record.  The GroupSummaryDisplayMode has five options 

  • List – summaries are listed inline of the group header 
  • Cells  summaries are listed as values in the corresponding cells and aligned with their column 
  • RowTop – places a summary area at the top of the group 
  • RowBottom – places the summary area at the bottom of the group 
  • None – no summaries shown. 

<ig:XamDataGrid SummaryScope="Sections" GroupSummaryDisplayMode="RowTop" > 

It is also possible to create custom summaries by implementing a class that derives from SummaryCalculator and providing an instance of your custom summary calculator in the ColumnSummaryDescription.ProvideCalculator event. 

Category Chart 

Besides data grids, charts are another important control in mobile applications. They help visualize your data in a way that helps your end-user best interpret their data to make business critical decisions. Here are the newest features we added to the Category Chart.

Callout Layer 

With the Callouts Annotation, you can annotate important data points in the chart or even customize values in callout boxes based on your logic.

 

Crosshairs Layer 

You can configure crosshairs to display as horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels. 

 

Final Value Layer 

Final Values annotation show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels. 

 

Highlight Layer 

The Category Chart can display two new highlight layers when a user hovers over plotted data points. The Highlight Layer renders a vertical rectangle that stretches from the start to end of the category that is closest to the mouse cursor. This rectangle is filled with semi-transparent gray color by default. The Item Highlight Layer renders a vertical rectangle for each data item in a category that is closest to the mouse cursor. This rectangle is filled with semi-transparent color that matches color of the series by default. 

 

Tooltip Layer 

The Category Chart has a new ToolTipType property that adds two new types of tooltips: 

  • Category Tooltip which renders the combined tooltips for all series in data category
  • Item Tooltip which renders individual tooltip for each series in data category. 

 

Data Chart 

You may or may not know this, but the Category Chart is built on top of our extremely rich and power Data Chart control. This means that in order for the Category Chart to have a feature, it must be implemented in the base Data Chart control. This is why the features for the Category Chart and Data Chart are so similar. Specifically, in the 20.1 release, the Callout Layer and the Final Value Layer features are identical for both the Category Chart and the Data Chart,

Callout Layer 

Callouts Layer is a new feature of Data Chart that you can use to annotate important data points or display their values. Callouts Layer can target multiple data series or individual data series. Also, you can customize appearance of these callout layers and bind callout labels to data items or calculate changes between consecutive data points. 

 

Final Value Layer 

Final Values Layer is a new annotation layer that shows values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels. 

Let’s Wrap this Baby Up!

As I always like to point out, if you have ideas about new features we should bring to our controls, important issues we need to fix, or even brand new controls 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.  Also, make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers. 

If you are not using our Xamarin controls yet, remember that a free evaluation download is only a click away.

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

Improving Usability, Accessibility and ARIA Compliance with Grid Keyboard Navigation

$
0
0
Learn how our enhanced keyboard navigation helps overcome the number of controls and items that have increased dramatically on most web pages. Our new user interface pattern reduces the number of tab stops within the interface.(read more)

What’s New in 20.1: Ignite UI for Web Components

$
0
0

Today is the day… the day I announce all the awesomeness that is Ignite UI for Web Components. Today, I finally get to tell you about all the great new components and features we have been working on over the last several months. I’m not going to bore you with some lame intro, let’s just get right into the good stuff!

Dock Manager

Let me start this post off by blowing your mind! I am super excited to announce the immediate availability of the 100% web standards compliant Dock Manager component.  That’s right! You heard me… it’s a dock manager for the web. Not only that, but it’s a web component. Meaning, it’s dependency free, pure HTML/JavaScript, and is seen as a native custom element.

What is a dock manager? Well, if you have ever used Visual Studio you know exactly what it is. If you haven’t, it’s a component that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The dock manager allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes.  Besides the data grid, this is a game changer for all web applications.

Data Grid

The data grid is probably the most important control an app can have. So, it's no surprise that we are continuously improving our data grid.  In this 20.1 release, the Web Components data grid gets column pinning, column summaries, filtering, hiding and show, and much more.  Let's dig into the details of these newly added data grid features.

Toolbar

First up is the brand-new grid toolbar component which is essentially a container for UI operations. The toolbar is located at the top of the Grid and it matches its horizontal size. The toolbar container hosts different UI controls which are related to some of the Grid's features - column hiding, column pinning, and filtering just to name a few.

Column Chooser

A brand-new column chooser component has been added which allows end-users to perform column hiding/showing directly through the UI. This new column chooser can be used through the grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.

Column Options Dialog

With the addition of all these great grid features, and to help expose the existing features from previous releases, we have created a brand-new Column Options Dialog.  This dialog will give your end-users the ability to group, hide, pin, move, and sort a column, as well as apply excel style filtering with a single click of a button. The new Options Dialog can be access by clicking on the 3-dots in the column header.

Column Pinning

With this latest release, end-users can now pin a column, or multiple columns, to the left or right side of the data grid. End-users can also lock columns in a specific order. The grid has a built-in column pinning UI, which can be used through the grid's toolbar, or the new grid options dialog, to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns using the data grid’s column pinning API.

Column Summaries

The grid now ships with a summaries feature that functions on a per-column level as a group footer. Summaries are a powerful feature which enables the end-user to aggregate data in a very simplistic way using a predefined set of default summary items, depending on the type of data within the column.

The built-in summaries include:

  • count
  • min
  • max
  • average
  • Sum
  • Custom

It is also possible to create custom summaries by creating a custom SummaryCalculator.

Let’s Wrap this Baby Up!

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 @brianlagunasYou 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.

What’s New in 20.1: Ignite UI for React

$
0
0
Learn about the new Dock Manager component that lets you manage complex layouts and the enhanced data grid with column pinning, column summaries, filtering, and more.(read more)

Ignite UI for Angular 9.1.0 Release

$
0
0

Newest Release of Ignite UI for Angular—Version 9.1 

While we have the most complete set of enterprise-grade, Angular-native components on the market, we continue to listen to you and we follow trends in the market.  In our latest Angular release, version 9.1, we’ve not only made the fastest data grid and charts, faster, we’ve also made it easier to work with data and visualize it with one click—while keeping everything customizable and visually appealing  

In addition, we’ve added components for layout, actions management, and date/time management as well as a handful of great sample applications, theming and directives for convenience. We’ll discuss these in this blog, but I wanted to call out two new components that are major advancements in our journey to web modernization: 

This powerful new tool makes it easier for you to build multi-window, multi-screen apps in any frameworkTake complex layouts and split them into smaller, easier-to-manage panes. Infragistics' Dock Manager offers a complete windowing experience, just like the desktop, but in the web 

We’ve made it easier for you to improve usability, accessibility and ARIA compliance with the new Grid Keyboard Navigation. Navigate web pages using only a keyboard by reducing the number of tab stops and exposing new keyboard shortcuts. Also known as Active Element Navigation, this control makes it easier to improve usability and ensure accessibility for all users, regardless of how they are navigating pages. 

Now let’s dive into some of the details. 

Range Date Picker 

We’ve now added the Igx Date Range Picker component to our existing calendar and date editorThis new component allows you to select a range of dates from a calendar UI or editable input fields. It is a “must have for every booking or scheduling application scenario. The component also provides an advanced setup exposing two editable input fields. You can find more details here. 

Keyboard Navigation Enhancement 

As we mentioned above briefly, our new Grid Keyboard Navigation adds new functionality to our Ignite UI for Angular keyboard navigation. Keyboard navigation is tricky: on the one hand the more complex the product become, the more complex the navigation becomesOn the other hand, we like to keep things simple. That is why we have enhanced our keyboard navigation with a new user interface patternor “active element navigation", which is lightweight, and offers better ARIA support - no focus trapreduced number of tab stops, better grid performance and new features integration. 

Modern web pages and applications are managed as a collection of standalone components and may contain hundreds of tab stops. According Fundamental Keyboard Navigation Conventions section of W3C’s WAI-ARIA Authoring Practices 1.1, the tab sequence should include only one focusable element of a Composite UI Component. You can see the contradiction, aren’t you?  We found a way to keep both the optimal user experience and the WAI-ARIA guidance. We have organized the grid in five such Composite UI Component, hence five tab stops: 

  • Toolbar/ Group by Area if existing 
  • Header row container. The first cell of the header row will become active. 
  • Tbody. The first igxCell(0,0) of the body container will become active.  
  • The first cell in the Column Summary will become active (if summaries are enabled). 
  • Pager UI. Items per page drop-down will become active. 

Well I only scratch the surface of the topic, but for the detailed description you could visit the blog post on the topic. 

That brings along changes on Tab navigation behavior: 

  • You cannot use `tab` key to navigate between the cells in the IgxGrid. The navigation is performed only with arrow keys.  
  • With `tab` key you can only navigate to the next editable cell (Only when the cell is in edit mode). When the last editable cell (of the row) is reached, the navigation will continue to next row's editable cell. If the last editable cell is reached, the tab navigation will continue with the next focusable tab stop element.  

As it comes to performance, removing cell focus and blur handlers and reducing navigation services gives a boost to the grid overall performance. Again more details and metrics you can find in the What's new: Grid Keyboard Navigation with Richer ARIA Compliance blog post or in our documentation. 

For a more in-depth look at this exciting component, read our Grid Keyboard Navigation blog. 

Header Navigation Implementation

 In concert with enhancements to "active element navigation", header keyboard navigation is now fully functional. The full list of key combinations are here. 

  

Splitter 

The Ignite UI for Angular Splitter component provides the ability to create layouts, split into multiple, vertically or horizontally arranged panes that may be resized, expanded, and collapsed. These interactions are performed through by exposing the UI exposed in the splitter bars between the panes. Code snippets and documentation are here. 

  

Row Pinning 

Row Pinning is not a feature that you see everyday in an angular grid. Pinning a row is another feature that makes working with data easier. It is enabled in both directions - top or bottom. Once a row is pinned, it remains in the Tbody of the grid as a ghost row. The ghost row is a not editable copy of a pinned one that appears in its original place in the scrollable area of the grid. Full documentation for the row pinning is here. 

  

Action Strip Component 

 As mentioned earlier the Ignite UI for Angular product is becoming more complex and feature rich. That comes with difficult decisions how to make user friendly UI and still to have "copy", "paste", "edit", "pin", "share", "delete" and others actions visible and not overwhelming your screen. The igx-action-strip provides a template area for one or more actions. It is highly flexible and customizable. It can be instanced on a cell, on a row or just on any container. It comes as a container, overlaying its parent  and displaying action buttons om mouse over event, but it can be configured as a drop down menu or even combined approach where primary actions will show as an icon for ease of access, while all secondary actions are listed in a drop-down. You can find all the details in the Action Strip topic. 

Action strip component instanced in a container:

Drop-down menu option:

Action strip component in a row context of a grid:

  

Column Freezing/Pinning on the Right  

Column freezing is not a unicorn as the row pinning. However, pinning on the left (start) side is the most common approach. Now we have the option for Column freezing/Pinning on the right (end)[link] which provides you with more layout options for your application. Column pinning topic is updated with the Pinning Position section. 

  

Column Selection 

Column Selection is another feature that is unique for Ignite UI for Angular. Working on DAT (Data Analysis Tool) we realized that selecting entire column with a single click is a must. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich API that allows for manipulation of the selection state and data extraction. More details are available in the documentation topic. 

  

RTL Support Enhancements 

Providing full RTL support for all our components is a big and important project for Ignite UI. To Do list is shrinking with every major release. In 9.1 we are removing Circular Progress Indicator and Slider from that list. Additional information could find in the RTL support documentation.  

Angular Schematics 9.1.510 & Ignite UI CLI 5.1.0 

With Ignite UI for Angular 9.1.0, we released the Ignite UI CLI 5.1.0 together with @igniteui/angular-schematics version 9.1.510. This updates includes changes to the Angular templates and also new functionality related to the new licensed package. In addition, we have created two blogs that will help you use the capabilities that our schematics and CLI expose, and understand the way we that have created them.  

Furthermore I would like to point out that Angular 9.0.0, we released the Ignite UI CLI 5.0.0 as well, the tool that helps you to easily scaffold projects in Angular, React and jQuery. Our CLI project has split into 4 more purposeful packages: igniteui-cli, @igniteui/cli-core, @igniteui/angular-templates and @igniteui/angular-schematics. The Ignite UI schematics are integrated in the Ignite UI for Angular product and helps you add it to a project created with Angular CLI and add components from our bundle. Please read more about this in the Angular Schematics and Ignite UI CLI topics and in the changelog of version 5.0.0.  

You can always refer to ourAngular Schematics and Ignite UI CLI topics or review the updates we’ve made. 

  

Styling & Theming 

Styling and theming is an essential part of our product. We had invested considerable time and effort to refactor the design of our samples. At the end we have 35 updated samples on our samples browser.  

  • Legacy support for CSS variable - now igx-legacy-support is set to “false” by default. This will allow styling of components without the need to use Sass in your project. However, if you are to include support for IE11 you should set it to “true”. 
  • Scrollbars theming - Small, insignificant enhancement at first glance but noticeable final touch to Ignite UI theming. Having default scrollbars while switching between light and dark theme could take your eyes out and it is quite annoying. Take that example, the difference is noticeable: 

 

Task Manager Sample Application 

We have a new sample application for you. It is created to demonstrate the editing capabilities of the IgxGrid and as a show case for real life scenario application. In fact, it turned out to be very capable tool for managing tasks which I myself started to use. Next step in the development is to add option for integration with GitHuband add some more features. 

 

 

COVID-19 Dashboard Application 

COVID-19 Dashboard has started as an internal exercise. There is a hot topic that everyone should follow. You see new dashboards popping up every day and we have the controls - what would be the effort to build up, such a board from the scratch? And the result was amazing, it took merely several hours to have the COVID-19 Dashboard ready. Well, visual design and styling took a bit more, but design is always subjective topic. You could follow Hristo, step by step in building the dashboard in his blog post: How to Create an Angular Covid-19 Dashboard in Hours. 

  

Dock Manager & Data Analysis Sample App 

TheData Analysis Sample application is not a new one. It was part of our Ignite UI 9.0 release. At the time when we started working on its design, however, we had one major obstacle – we were limited by the browser. We wished to have the desktop experience of multi- window layout and with the release of the Infragistics Dock Manager our wish came trueNow we have everything a complete feature set– pane navigator, docking, floating panes, pinning, and tab groups... The combination of between Dock Manager and DAT (Data Analysis Tool) results in one beautiful and powerful sample application. 

  

Settable Igx-grid Header Title 

One little feature that could save you a lot of irritationDeveloping real life scenario application with our own product is real dogfooding.It makes you to realize that simple things like setting the header title different from the “header” value could really get your goat. With Ignite UI 9.1 this issue is resolved. Now you could set independently header and title value. You could find the details in our git repository  

Combo Update 

Here the new feature is directed to the user experience on mobile devices. Currently when combo's list of items is opened, the control automatically puts the focus on the search input. For mobile users this will cause a keyboard to show, making scrolling through the list of items more tedious. We have added an optional input to solve that issue. You can find more details here. 

Directives 

Date Time Editor 

The Ignite UI for Angular Date Time Editor Directive allows the user to set and edit the date and time in a chosen input element. The user can edit the date or time portion, using an editable masked input. Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation. In the topic you can find more details on the implementation. 


Final Thoughts and Resources 

As you can see, we’ve added a lot of new features and components in Ignite UI for Angular 9.1, including components for layout, action management, and date/time management as well as a handful of great sample applications, theming and directives for convenience. 

We offer an Angular toolkit with the most depth and breadth in the industry, including Angular-native components and enterprise-grade. And we are responsive to your needs, continually listening and enhancing Ignite UI for Angular. 

But at Infragistics we consider that just releasing the best of breed UI components is not enough. We also would like to share with you why we are proud of our work. One way we highlight our additional value is through regular blogs that offer you useful tips and tricks, deeper insights, how-to's, and much more. Here are a few of the Angular-related blogs that you might find useful: 

Topic of the blog is how to build an Angular application with Ignite UI For Angular, implementing full CRUD (Create, Read, Update, Delete) operations against an OData RESTful API, created with API Server. You can find how to: 

  • Go through the API Server installation and setup. 
  • Build a REST API from the local SQL instance of Northwind database 
  • Consume and visualize the data in an Angular application built with Ignite UI for Angular 
  • Demonstrate how to add full CRUD capabilities to the igxGrid to consume the API 

You can find more about our open source Angular component library and Angular schematics. How to enjoy their benefits from running a simple ng new to creating complex schematics that automate workflow and project setup 

Three minutes read how to get advantage of Ignite UI CLI and schematics in a few simple steps. The only prerequisites that you need are NodeJS and Angular CLI. 

 

Keyboard navigation, improving usability, accessibility, Active element navigation..I will say no more on that topic and let you to dive in yourselves. 

You want to build viable web application just in hours with Ignite UI for Angular? That blog is for you, then. We are taking the journey of developing functional and visually appealing dashboard from the scratch.  


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. 

 

Announcing Ultimate 20.1: What's New!

$
0
0

With today's launch, we are extremely excited to get Ultimate 20.1 into your hands. Ultimate 20.1 builds on four key themes:

  • Delivering innovations and new experiences in Angular, React, Web Components & ASP.NET Core
  • Windows Forms and WPF support for .Net Core 3.1
  • Hyper-productivity with Design to Code using the updated Indigo.Design
  • Cross-Platform Mobile Development with Xamarin

Let’s look at these areas in more detail.

Modern Web Development

Infragistics continues to innovate on the platforms that matter most to web developers today:

  • Angular
  • React
  • Web Components

With the 20.1 release, we continue to push the limits of what is possible on the web, with blazing fast controls that deliver unprecedented developer productivity at every turn.

Angular

This is one of our biggest Angular releases. We have the broadest, deepest native Angular product on the market today, with high-end data grids, data charts, Excel library & Spreadsheet components, and new to this release a first-of-its-kind DockManager control. The DockManager delivers a complete desktop windowing experience, giving you to the ability to move, dock, undock, pin, expand collapse, and more with the UI of your application. Here is one of the new samples showing off the DockManager in conjunction with our Angular Data Analysis directive.

/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-03-12/dockmanagerweb.gif

Here is a list of all the goodness that you can expect when you start using this latest Angular release:

  • Theming Widget for Custom CSS
  • Bootstrap Support
  • Data Grid Data Analysis Directive
  • Data Grid Master-Detail UI in the Grid
  • Data Grid Collapsible Column Groups
  • Data Grid Full-Column Selection
  • Data Grid Keyboard Navigation Enhancements
  • Data Grid Column Pinning to Right
  • Data Grid Row Pinning
  • Data Grid State Persistence
  • Data Grid Drag Ghost Directive
  • Data Grid Action Strip Directive
  • Data Grid Data Analysis Directive
  • Splitter Controls
  • Range Date Picker
  • Slider with TickMarks
  • Updates to the Carousel Control
  • Excel Style Filters / Advanced Filtering Container Instance
  • Header / Footer Elements in the Select Component
  • Custom Summaries with All Grid Data

To see more details on these features, you can go directly to the samples:

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

We also have a couple blogs that detail all the features I listed here:

https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-0-0-releasehttps://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-1-0-release

If you have not read any of the emails I've sent on the updated licensing, makes sure to read the blog post which outlines the steps you need to take to remove the "Trial Version" watermarks from your production apps.

https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing.html

And make sure to read this blog around the packaging changes for the Ignite UI product bundle in this release:

React

This is the 4th release of the React product, and this is the biggest update to the product yet in terms of brand-new Data Grid features - but like Angular - we are shipping the innovative new DockManager in React too! So not only are you getting a ton of new features in Data Grid, but you will get the benefit of the new DockManager control as well.

Here is a list of the new features in this release of the React product:

  • Updated Default Theme (Denali Light)
  • Redesigned Grid UX
  • DockManager
  • Column Summaries
  • Column Pinning (Right / Left)
  • Column Chooser
  • Column Filtering
  • Column Grouping
  • Column Hiding
  • Column Options Dialog
  • Grid Filtering UI
  • Grid Toolbar

To pull this together, we are shipping a Column Options dialog in the React data grid, giving you an interactive UX when working with grid features.

To see the product in action, head over to the React samples:

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

To read about all the features and to get more details, check out the What’s New blog:

https://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-react

Web Components

This is the second release of the Web Components product - but that does not mean this is a new codebase. Ignite UI for Web Components product is the core codebase of the Ignite UI for React product. As Web Components are a web standard, we went with the approach of building a standards-based implementation of components first, then making them work as a React developer would expect a React component to work. We released Ignite UI for React first, about a year before we released Web Components, mostly due to the popularity of React.

While Web Components are not super popular yet, we all know that web libraries and frameworks come and go, but standards do not. Our investment in Web Components is to give you the option to future-proof your applications with a vanilla JS approach to building apps.

Here is an example of the Web Components Data Grid.

As the core codebase for React and Web Components are the same, you should always expect that the controls, features, API are the same across both products.

Here is what’s new in Web Components for 20.1:

  • Updated Default Theme (Denali Light)
  • Redesigned Grid UX
  • DockManager
  • Column Summaries
  • Column Pinning (Right / Left)
  • Column Chooser
  • Column Filtering
  • Column Grouping
  • Column Hiding
  • Column Options Dialog
  • Grid Filtering UI
  • Grid Toolbar

This means the same Column Options dialog in React to manage the interactions in data grid is available in Web Components, giving you a great interactive UX when working with grid features.

To see the product in action, head over to the Ignite UI for Web Components samples:

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

To read about all the features and to get more details, check out the What’s New blog:

https://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-web-components

ASP.NET Core

With Microsoft continuing to innovate and push updated versions of ASP.NET Core and ASP.NET Core MVC, we are keeping up to date with the more recent updates in these frameworks. Based on our jQuery product, the .NET Core versions are native API's for those JavaScript libraries.

This means you get a product with over 100 controls & components, which remain current with the latest development frameworks from Microsoft.

Besides controls like Data Grid, Pivot Grid, Financial Chart and Layout Managers, you also get killer controls like this Microsoft Excel Spreadsheet in .Net Core / .Net Core MVC.

https://static.infragistics.com/marketing/Website/products/ignite-ui-jquery/ignite-ui-jquery-spreadsheet-1100.jpg?v=202005211740

To experience the full depth and breadth of our ASP.NET Core and ASP.NET Core MVC products, check out the samples here:

https://www.igniteui.com/grid/overview

What About Blazor?

This release does not include our latest Blazor bits, but you don't have to wait much longer to get your hands on the final release bits. Like React, the core codebase of Ignite UI for Blazor is based on our Web Components code. With Blazor, we deliver a native C# API over the TypeScript from Web Components which gives you the most optimal configuration for both server-side and client-side Blazor apps.

Here is the Preview samples browser running our client-side Blazor Financial Chart.

In July, we will ship an update to React and Web Components, and we will bring our Blazor controls out of preview and officially release them. The exciting thing - this is a battle-tested codebase, as we have been shipping it for more the two years in two different products. So, while July brings a version 1 of Ignite UI for Blazor, it's a version 4 of 5 of the codebase. Once we ship in July, the React, Web Components and Blazor products will be synced, so they will sim-ship for every release following July.

If you haven't see the Preview of Ignite UI for Blazor, check out the What's New blog we posted late last year:

https://www.infragistics.com/community/blogs/b/infragistics/posts/introducing-the-ignite-ui-for-blazor-preview

And get the Blazor Live Online Samples here

https://github.com/brianlagunas/Infragistics.Blazor.Alpha

.Net Core 3.1

When Microsoft shipped .Net Core 3.0 last year, we shipped support for this next-generation version of the .Net framework. With Ultimate 20.1, we are shipping support for the latest 3.1 release of .Net Core. Currently, we do not have support for the preview of the Windows Forms designer. We are actively working on what it is going to take to enable our WPF and Windows Forms controls with the new design-time experience in the next version of Visual Studio with .Net Core and the future .Net Framework 5.0. Stay tuned to this blog and our newsletters as we roll out support for the new designer experience.

Mobile Development with Xamarin

Xamarin.Forms is still the go-to framework for building cross-platform native mobile applications in with .Net and Visual Studio. With Ultimate 20.1, we are continuing to push Xamarin development forward with the most full-featured Grid and Charts for Xamarin.

https://www.infragistics.com/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/4034.datachart_2D00_callout_2D00_layer.png

Updated for 20.1:

  • Support for latest Xamarin version
  • Grid Features
    • Column Summaries
    • Column Pinning
  • Chart Features
    • Category Chart
    • Callout Layer
    • Crosshairs Layer
    • Final value Layer
    • Highlight Layer
    • Tooltip Layer
    • DataChart
    • AxisAnnotation
    • Callout Layer
    • Final Value Layer

To see more details on these features, check out the What's New blog here:

https://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ultimate-ui-for-xamarin

Design to Code with Indigo.Design

Indigo.Design is still the only solution on the market that streamlines app creation from Design to Code. In 20.1, we are shipping a completely redesigned UX for the workbench, the prototyping experience, usability studies (recording, playback, analytics) and code generation.

Modern Workbench UX

We have updated the prototyping tool to edit prototypes published from Sketch app and inspect visual specifications. The visual inspector is the perfect tool for developers to get the specific details of what they need from design, like CSS, spacing, fonts, size constraints, etc.

/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-03-12/indigo_2D00_inspect.png

While the Inspector works with files created in Sketch, if you don’t use the Sketch app, you can import your design s as images to create prototypes from scratch using the prototype editor.

Redesigned Usability Studies Analytics

The usability testing feature underwent a complete rethink to make it easier to both create tests and analyze results. You can create tests for any of the designs in your cloud workspace (either from Sketch or from any set of screen shots). When you create a new test, you will see a live test creation experience, where you can add new tasks and then interact with the live prototype to record an expected path. This information will be used when presenting you with the results a nd segmenting participants.

https://www.infragistics.com/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/pastedimage1578936129028v6.png

The above image is highlighting these areas of the Usability Study analytics:

  1. Task analytics overview
  2. Completion funnel
  3. User segments
  4. Participation data table

Angular Code Generation

The key feature of Indigo.Design so streamline the design to code process is around code-generation for Angular. In 20.1, we made sure we are compliant with the latest Angular capabilities, and the design system is updated. If you are looking for skyrocketing your productivity, use the Indigo.Design system, and use our Visual Studio Code plug-in to generate all the HTML, CSS and components in your app.

You can see this example of a Sketch design and a pixel-perfect code-generated output with the Indigo.Design:

To read about the entire set of changes in this release and to get more details

https://www.infragistics.com/community/blogs/b/infragistics/posts/red esigning-indigo-design-for-faster-usability-insights-and-collaboration

Wrap Up

Ultimate 20.1 includes a ton of great new capabilities that will help you deliver amazing experiences in your apps. To experience everything, go to your customer portal to get the latest. 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


Announcement: Changes to Ignite UI Product & Packaging

$
0
0

With the June 2020 release of Ignite UI (Ultimate 20.1), we've made some important changes to Ignite UI.  The biggest change is around the branding and naming of the product:

  • We are replacing the Ignite UI for JavaScriptbranding and bundle option to simply Ignite UI.

This means you won't find the product name or product bundle named Ignite UI for JavaScript on the website, in the docs, or in the My Keys & Downloads in the Customer Portal.   

We did this to clear up the confusion of the product name (Ignite UI for JavaScript, which was the jQuery product) having the same name as the product bundle (Ignite UI for JavaScript, which included 5 different frameworks when purchased together).

Bottom line - If you own Ignite UI for JavaScript, it is changed to Ignite UI.

Ignite UI: More Value, More Features

Along with cleaning up the overarching product brand, we've expanded what's available in Ignite UI.  With this release and forward, you get the following UI products / frameworks:

So that's 7 different products in the bundle.  While you can buy individual products for just the framework you are working on, it makes more sense to buy the Ignite UI bundle with all 7 platforms because we've changed pricing as well,

With this release, we've lowered the price to give you more value for less cost:

  • Individual product SKU's (ie: platforms) are now $749 for the subscription
  • The Ignite UI bundle (all 7 product / platform SKU's) are $849 for the subscription

That's a no-brainer in terms of value.  Especially when you consider that the bundle includes Web Components and jQuery, which work perfectly in any other platform.  So for example, if you are building a React app, and need an OLAP Pivot Grid (which is not in the Ignite UI for React product), just grab the one in the Ignite UI for jQuery product, use our React wrappers for jQuery and implement the OLAP Pivot Grid just like any other React component in your app.  

To break this down in terms of unique value - 

  • Ignite UI for Angular is a unique, one-of-a-kind codebase built on Material and Angular.  There is no other product on the market like it.  Everything about this product is optimized for Angular development and the Angular platform.  
  • Ignite UI for Web Components, Ignite UI for React and Ignite UI for Blazor all have a shared codebase.  We have a core TypeScript library with per-platform native hooks.  So for example, in Blazor, we generate the native C# API for Visual Studio and server-side bits along with the JavaScript / WebAssembly for the client to deliver the most optimal performance for the platform.
  • Ignite UI for jQuery, Ignite UI for .Net Core and Ignite UI for MVC (.Net Core) all have the same codebase.  For the MVC / .Net Core piece, we generate native API's based on the JavaScript libraries.  This delivers the best coding experience in Visual Studio, as well as support for all of the latest .Net Framework features for web development.

So based on the type of applications you are building, you have hundreds of controls and components to choose from across the 7 Ignite UI platform offerings.

Licensed Ignite UI Packages

In addition to the branding and bundling options, we've also changed how licensed product is acquired.

Starting with the 9.1 release of Angular (shipping with the 20.1 Ultimate release, June 2nd, 2020) we are adding a "Trial" watermark to the packages that we post on NPM.

This help doc:

https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing.html

Outlines all of the details necessary to remove the "Trial" watermark, and to acquire your licensed version.

We expect to ship Ignite UI for React and Ignite UI for Web Components with same "Trial" watermark configuration in the July / August 2020 timeframe.  If you are using any of those product, keep an eye on my blog and out newsletters for updates.

Wrap Up

These are some big changes.  We needed to clean up the branding and bundling, and while doing this, give you more value for less subscription cost.  If you have questions, comments or concerns about these changes, please contact me at jasonb@infragistics.com.

Thanks, and Happy Coding!

Jason

Infragistics Ultimate: H2 2020 Roadmap

$
0
0
See our plans for Window Forms, WPF, and .NET Core, our Angular, React and Web Components frameworks, and App Builder innovation to radically accelerate app design and development.(read more)

Manage Complex Web Layouts and Improve Usability with Ignite UI's Dock Manager

$
0
0
See how easy it is to build multi-window, multi-screen apps in any framework with Infragistics' new Dock Manager. (read more)

CodeSandbox integration with our React Samples

$
0
0

       

Our online React documentation has been updated to provide a deep dive into every sample. Beneath each sample a button has been added that will take you CodeSandbox (an online editor that helps you create web applications, from prototype to deployment). Each sample within CodeSandbox can be viewed, modified, and saved locally to run on your machine.

Visit our samples now!

How to Create a Treemap Visualization in Reveal

$
0
0
See how to quickly create Treemap data visualizations using Reveal embedded analytics. Use Treemaps to show hierarchical data and for drill-down scenarios. (read more)

Ignite UI for Blazor Roadmap (Updated June 2020)

$
0
0
Ignite UI for Blazor roadmap, including the Blazor data grid / data table, Blazor charts, Blazor DockManager, and more. This blog highlights the Blazor roadmap, release date, and links to the .NET 5 roadmap and support for Infragistics Ultimate.(read more)

Remote User Testing with Social Distancing in the COVID-19 Pandemic

$
0
0
While most of the world is on some sort of a lockdown / quarantine due to COVID-19 how do you still deliver high quality UX? With Indigo.Design’s remote, unmoderated user testing, you can ensure your apps are Useful, Usable, and Desirable all while maintaining the strict COVID-19 social distancing measures.(read more)

Ignite UI for Angular 10.0.0 Release

$
0
0
See how we enhanced the Angular Grid with behavioral changes to select, combo and drop-down components, date picker, pagination templating and more in our newest release of Ignite UI for Angular 10 that follows the official Angular 10 release by hours.(read more)

Ignite UI for jQuery Release Notes - July 2020: 19.2, 20.1 Service Release

$
0
0

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 2019 Volume 2

Ignite UI 2020 Volume 1

Infragistics ASP.NET Release Notes - July 2020: 19.2, 20.1 Service Release

$
0
0

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 2019 Volume 2

ASP.NET 2020 Volume 1

Why You Need Data Driven Decision Making

$
0
0
Find out the 7 building blocks for becoming a data driven company, and how a data mindset helps organizations become more agile and responsive to trends and buying patterns. (read more)

Infragistics WPF Release Notes - July 2020: 19.2, 20.1 Service Release

$
0
0

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 2019 Volume 2 Service Release (Build 19.2.20192.261)

PDF - Infragistics for WPF 2019 Volume 2
Excel - Infragistics for WPF 2019 Volume 2

WPF 2020 Volume 1 Service Release (Build 20.1.20201.26)

PDF - Infragistics for WPF 2020 Volume 1
Excel - Infragistics for WPF 2020 Volume 1

WPF UI Controls

Viewing all 2223 articles
Browse latest View live