IntelliSense for Client API

  • 4 minutes to read

DevExpress ASP.NET MVC Extensions support IntelliSense for client-side API (for v10.1 and higher).

Refer to the applicable section of this topic (based on Visual Studio version) to enable IntelliSense.

Visual Studio 2019

  1. Add the devexpress-web.d.ts, jquery.d.ts, and knockout.d.ts definition files to the project folder. The last two files contain devexpress-web.d.ts file dependencies.

    You can obtain these files from the following sources:

    • In the C:\Program Files (x86)\DevExpress 21.2\Components\Sources\DevExpress.Web.ASPxScriptIntelliSense path of your installation.
    • From the npm package.

      Execute the command below in the npm CLI to install the package.

      npm install @types/devexpress-web

      jquery and knockout packages are automatically installed with the target package.

    Note

    The current “jquery.d.ts” version is only compatible with TypeScript 2.8.

  2. Wait until Visual Studio adds these definition files to the project. Make sure that your application folder contains all files shown in the image below.

    ASP.NET - TypeScript - SolutionExplorer

  3. Call a specific DevExpress client object’s Cast method to enable IntelliSense. For example, for the ASPxClientButton control, call the ASPxClientButton.Cast method.

You can now use IntelliSense to browse available DevExpress ASP.NET client-side API.

ASP.NET - TypeScript - IntelliSense

Visual Studio 2017

Visual Studio 2017 includes improved JavaScript IntelliSense support for .d.ts files (TypeScript definition files).

To enable IntelliSense for DevExpress ASP.NET Extensions’ client API, see the following instructions:

  1. In Visual Studio, open ToolsOptionsText EditorJavaScript/TypeScriptLanguage Service and check the Enable the new JavaScript language service checkbox.

    ASP.NET - TypeScript - VS2017Settings

  2. Add the devexpress-web.d.ts, jquery.d.ts, and knockout.d.ts definition files to your project folder. The last two files contain devexpress-web.d.ts file dependencies.

    You can obtain these files from the following sources:

    • From the C:\Program Files (x86)\DevExpress 21.2\Components\Sources\DevExpress.Web.ASPxScriptIntelliSense path of your installation.
    • From the npm package.

      Execute the command below in the npm CLI to install the package.

      npm install \@types/devexpress-web

      jquery and knockout packages are automatically installed with the target package.

    Note

    The current “jquery.d.ts” version is only compatible with TypeScript 2.8.

  3. Wait until Visual Studio includes the definition files to the project. Make sure that your application folder contains all files shown in the image below.

    ASP.NET - TypeScript - SolutionExplorer

  4. Call a specific DevExpress client object’s Cast method to enable IntelliSense. For example, for the ASPxClientButton control, call the ASPxClientButton.Cast method.

You can now use IntelliSense to browse available DevExpress ASP.NET client-side API.

ASP.NET - TypeScript - IntelliSense

Visual Studio 2012-2015

Visual Studio 2012 introduced the capability to register the ASPxScriptIntelliSense.js file at the IDE level - to activate JavaScript IntelliSense for all DevExpress web projects.

Note

The ASPxScriptIntelliSense.js file is available if you install DevExpress products with source code.

Follow the steps below to register the ASPxScriptIntelliSense.js file:

  • In Visual Studio, select ToolsOptionsText EditorJavaScriptIntelliSenseReferences;
  • In the invoked dialog, choose the Implicit (Web) item in the Reference Group combo box;
  • Click the ellipsis (“…”) button next to the Add a reference to current group text box;
  • Select the ASPxScriptIntelliSense.js file (usually located in the “C:\Program Files (x86)\DevExpress 21.2\Components\Sources\DevExpress.Web.ASPxScriptIntelliSense” path);
  • Click OK to save changes.

    IntelliSenseForJS_VS2012_Options

  • Call a specific DevExpress client object’s Cast method to enable IntelliSense. For example, for the ASPxClientButton control, call the ASPxClientButton.Cast method.

You can now use Intellisense to browse available DevExpress ASP.NET client-side types.

IntelliSenseForJS_VS2012

Visual Studio 2008-2010

Add the ASPxScriptIntelliSense.js service file to your web project (the Add Existing Item… dialog) to enable IntelliSense. The ASPxScriptIntelliSense.js file is located in the <DevExpress>\Sources\DevExpress.Web.ASPxScriptIntelliSense folder. Then, reference that file in the pages that require IntelliSense (within each web page or in a separate JavaScript file).

Note

The ASPxScriptIntelliSense.js file is available if you install DevExpress products with source code.

  • Reference within a web page

    To enable IntelliSense for the DevExpress client-side API within a page file, insert the following code in the page’s BODY section:

    <% if (DesignMode){ %>
        <script src="ASPxScriptIntelliSense.js" type="text/javascript"></script>
    <% } %>
    

    It is important to use the ‘if(DesignMode)’ condition, because it helps avoid the following:

    • Additional round trips to the server for the ASPxScriptIntellisense.js file;

    • Mixing IntelliSense schema classes and production script classes.

    You can now use IntelliSense to access DevExpress client API.

    IntelliSenseForJS-WebPage.png

  • Reference a separate JS file

    To enable IntelliSense for DevExpress controls in a standalone .js file, add a reference to the ASPxScriptIntelliSense.js file at the beginning of the JavaScript file.

    /// <reference path="ASPxScriptIntelliSense.js" />
    

    DevExpress client API now support IntelliSense via a standalone JavaScript file.

    IntelliSenseForJS-File.png

Use the Cast method to enable IntelliSense for a specific DevExpress client object.

How to Use the Cast Method

The Cast method allows you to indicate the type of an extension’s client-side object instance, which enables IntelliSense for this type.

You can use this method in the following ways.

  • Convert the event source object passed to a client event handler.

    IntelliSenseForJS-Cast1.png

  • Convert a client object. Use an extension’s Name property value to access the client object. For instance, if an GridView extension’s Name property is set to ‘grid’, use the following code to cast the object:

    IntelliSenseForJS-Cast2.png