Upgrading Projects to the Latest Ignite UI for jQuery Version

Topic Overview

Purpose

This topic details how to upgrade projects that use Ignite UI for jQuery™ to the current version of the Ignite UI for jQuery library.

Required background

The following list presents the topics required as a prerequisite to understanding this topic.

• Using JavaScript Resources in Ignite UI for jQuery: This topic explains how to manage the required resources to work with the Ignite UI for jQuery JavaScript within a Web application.

• Styling and Theming Ignite UI for jQuery: This topic provides instructions on setting up your application for design time, options for using CSS in production and an overview on creating or customizing a theme.

• JavaScript Files in Ignite UI for jQuery: This topic is a reference to the JavaScript files required to work with the controls included in Ignite UI for jQuery.

Introduction

Every new Ignite UI for jQuery volume release has a lot of new features and bug fixes. If you want to adopt the latest changes, you need to upgrade your projects by updating all JavaScript and theme files. Ignite UI for jQuery has no automated upgrade utility, so you have to replace these files manually. To do this, you need to first become familiar with new files and the new folder structure as new releases usually come with significant changes in file organization.

What you need to upgrade

What you need to upgrade depends on what your application uses, as outlined in the following table.

Upgrading a Project Manually

Introduction

The procedure of updating a project that uses Ignite UI for jQuery includes updating the JavaScript files and jQuery UI themes and, if the ASP.NET MVC is used, also the references to the assemblies.

Prerequisites

To complete the procedure, you need the following:

• The latest version of the JavaScript files.

By default, the installer places the new JavaScript files in:

 C:\Program Files (x86)\Infragistics\2022.2\Ignite UI for jQuery\js

where ProductVersionShort stands for the release year and release number separated by a dot, e.g. 2013.2.

If you don’t have this version installed, you need to download the Ignite UI for jQuery installation .zip file available from here.

• The latest version of the jQuery UI themes.

By default, the installer places the new themes in:C:\Program Files (x86)\Infragistics\2022.2\Ignite UI for jQuery\css\themes. If you don’t have this version installed, you need to download the Ignite UI for jQuery installation .zip file available from here.

• The latest version of the Ignite UI for jQuery assemblies.

By default, the installer places the new assemblies in: C:\Program Files (x86)\Infragistics\2022.2\Ignite UI for jQuery\MVC. If you don’t have this version installed, you need to download the Ignite UI for jQuery installation .zip file available from here.

Overview

Following is a conceptual overview of the process:

1. Backing up current scripts and themes
2. Switching to the latest version of the scripts and themes
3. (Conditional) Upgrading the assemblies
4. Verifying the result

Steps

To upgrade your project, following these steps.

1.Back up current scripts and themes.

To back up your current resources, create a backup folder and move the old JavaScript files and jQuery UI theme files to it. To do this: ​

1. In your project or on your hard drive, create a new folder to which to move the old JavaScript files and jQuery UI themes.​

2. Backup the JavaScript files. Copy all Infragistics script files (those beginning with ig.), to the new folder. If the project uses the combined JavaScript file, you need to move only this file; if the project uses individual JavaScript files, you need to move all of them.

3. ​ Backup the jQuery UI themes. Copy the base and ig themes to the new folder. If you use a custom ThemeRoller theme instead of the ig theme or if you use minified themes, copy the files for those themes to the backup folder, too.

​2. Switch to the latest version of the scripts and themes.

To switch to the latest version of the resources, delete the existing Infragistics JavaScript and jQuery UI theme files together with their folder structure and copy the new ones in their place. To do this:

​

1. Delete the existing Infragistics JavaScripts files and their folders.

   (These are all script files beginning with ig.) ​

2. Delete the existing jQuery UI theme files and their folders. Copy the new version of the JavaScript files together with their folder structure to the JavaScript folder of your project.

   • If you have the latest version of the JavaScript files installed, copy them from the Ignite UI for jQuery installation folder. (See the default the path in the Prerequisites block.)
   • If you don’t have the latest version of the JavaScript files installed, extract the files from the installation .zip archive. The JavaScript files reside in the js folder stored in archive. (For download instruction, see the Prerequisites block.)

   Note: There are breaking changes in JavaScript files and folder structure. More information for changes, refer to Using JavaScript Resources in Ignite UI for jQuery.

3. Copy the new version of the jQuery UI theme files together with their folder structure to the themes folder of your project.

   • If you have the latest version of the theme files installed, copy them from the Ignite UI for jQuery installation folder. (See the default the path in the Prerequisites block.)
   • If you don’t have the latest version of the theme files installed, extract the files from the installation .zip archive. The theme files reside in the themes folder stored in archive. (For download instruction, see the Prerequisites block.)
   • If you have customized versions of the old themes, these customizations must be re-created (copied) manually in the new versions of the themes.
   • If you have a ThemeRoller theme, copy theme from backup folder in the css/theme folder.

   Note: Refer to your backup directory to make sure that for each jQuery UI theme that you backed up you have the corresponding new theme copied.

   Note: There is breaking changes in CSS files and folder structure. More information for changes read Styling and Theming Ignite UI for jQuery.

​3. (Conditional) Upgrade the assemblies

If your application uses the Ignite UI for MVC or the Document assemblies, the assemblies for the new versions must be included in your application. Following is the list of the assemblies you need to include:

• Infragistics.Web.Mvc.dll
• Infragistics.WebUI.Documents.Core.dll or Infragistics.Web.Documents.Core.dll
• Infragistics.WebUI.Documents.IO.dll or Infragistics.Web.Documents.IO.dll
• Infragistics.WebUI.Documents.Reports.dll or Infragistics.Web.Documents.Reports.dll
• Infragistics.WebUI.Documents.Excel.dll or Infragistics.Web.Documents.Excel.dll
• Infragistics.WebUI.Documents.Word.dll or Infragistics.Web.Documents.Word.dll

Note: The new versions of the document assemblies use the Infragistics.Web.Documents naming convention.

To upgrade the assemblies:

​1. Remove the existing references to the Ignite UI for jQuery assemblies.

In Visual Studio, remove the existing references for the Infragistics assemblies from your project.

​2. Add and reference the new version of the Infragistics assemblies in your project.

• If you have the latest version of the assembly files installed, copy them from the Ignite UI for jQuery installation folder. (See the default the path in the Prerequisites block.)
• If you don’t have the latest version of the assembly files installed, extract the files from the installation .zip archive. The assembly files reside in the MVC directory stored in archive. (For download instruction, see the Prerequisites block.)

Note: The method by which you add the assemblies to your project will vary depending on the type of deployment. In most cases, removing the old assemblies from the bin folder and adding the new assemblies to the bin folder will be adequate but the steps may differ if you are using a different deployment method, e.g. when the assemblies are in the Global Assembly Cache (GAC).

​4. Verify the result.

To verify the result, run your application and test it for issues.

Related Content

Topics

The following topics provide additional information related to this topic.

• What’s New: The topics in this group provide information about the new controls and features introduced in the various versions of the Ignite UI for jQuery library of controls.