Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

How To Get JavaScript IntelliSense With DevExpress Client-Side Objects - v2010 vol 1

Check out this how-to guide that helps you get IntelliSense support for DevExpress client-side objects in Visual Studio.

Watch the video screencast that walks you through the steps describe below:

Video: JavaScript IntelliSense Features

 

Add IntelliSense Support

Follow these 3 easy steps to add IntelliSense support to your project:

1. Install the latest DXperience v2010.1 release. (Currently, the DXperience v2010.1 beta is available to DXperience subscription license holders).

2. Click the ‘Add Existing Item’ in your project menu. Then add the ASPxScriptIntelliSense.js file to your project which should be located in the following folder:

%DevExpress Install Folder %\DevExpress2010.1\Components\Sources\DevExpress.Web.ASPxScriptIntellisense\ASPxScriptIntelliSense.js

For example, on my local machine the ASPxScriptIntelliSense.js file is located here:

C:\Program Files\DevExpress 2010.1\Components\Sources\DevExpress.Web.ASPxScriptIntellisense\ASPxScriptIntellisense.js

3. Type the following code in the page <body> section in the page that you want to enable JavaScript IntelliSense:

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

Note: It's important to check the “if(DesignMode)” statement because it helps to avoid additional round trips to the server for the ASPxScriptIntelliSense.js file. It also helps to prevent mixing up the IntelliSense schema classes and production scripts classes.

That's it - you now have full IntelliSense support for DevExpress client controls in BLOCKED SCRIPT

asp-intelllisense-popup

New Cast Methods

We’ve also added special static Cast methods which enable you to cast the DevExpress control's client object and then get the client object’s properties, methods and events via IntelliSense.

(e.g. ASPxClientButton.Cast(obj), ASPxClientTreeList.Cast(obj), etc.). You can use these methods with event arguments:

<script type="text/javascript">
    function OnGridRowDblClick(s, e) {
        var gridInstance = ASPxClientGridView.Cast(s);
        gridInstance.StartEditRow(gridInstance.GetFocusedRowIndex());
    }
</script>

These new cast methods also accept the ClientInstanceName of the client object. Therefore, to get a client object with IntelliSense support, simply pass the ClientInstanceName as a string to the Cast method:

<form id="form1" runat="server">
    <script type="text/javascript">
        function OnGridRowClick(s, e) {
            var gridInstance = ASPxClientGridView.Cast("grid");
        }
    </script>
    <div>
        <dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="grid">
            <ClientSideEvents Init="OnGridRowClick" />
        </dx:ASPxGridView>
    </div>
</form>

Cast Sender Object

You also get JavaScript IntelliSense for the gridInstance variable. For example, this method shows how you can cast the sender object and get JavaScript IntelliSense:

Fig.1:

 dc6fqjjf_92dd7536cq_b

Fig.2:

dc6fqjjf_93rsd6q9cz_b

Fig.3:

 dc6fqjjf_94dw78vbgg_b

Standalone JavaScript File Support

If you want to enable IntelliSense for our controls in a standalone JavaScript file then simply add a reference to our ASPxScriptIntelliSense file at the top:

asp-intelllisense-individual 

Please note that this feature is only available in Visual Studio 2008 and 2010.

Follow MehulHarry on Twitter

Want to experience a better Visual Studio?

Install CodeRush by downloading the free lite version here: CodeRush Xpress

Or better yet, try the full blown package free for 30 days – CodeRush and Refactor Pro Download!

Published Apr 20 2010, 12:30 PM by
Bookmark and Share

Comments

Aaron Smith

Very nice!

April 21, 2010 12:07 PM

Michael

That's cool...

April 21, 2010 3:30 PM

John Labrou

Is it possible to use JavaScript IntelliSense to prior versions (v.2009)?

April 22, 2010 8:07 AM

Mehul Harry (DevExpress)

@John,

No, the JavaScript IntelliSense will only work with DXperience v2010.1 and in VS2008+VS2010.

Thanks.

April 22, 2010 1:38 PM

Giovane

Niceeeeee Mehullll

But one very interesting feature will be the intellisence in the javasript clientside edit inside the components. When we click in the ClientSideEvents editor in the properties window of the one component like gridview.

April 23, 2010 5:17 PM

Mehul Harry (DevExpress)

@Giovane,

The IntelliSense is actually provided by the VS2010 IDE. So if that dialog (and it's editor) is capable of showing JavaScript IntelliSense then it should be no problem for us. However, I don't think that small dialog is capable, sorry.

April 23, 2010 5:42 PM

Matthew MacSuga

After working with this in a new project I'm building.. I have to say that it is by far one of the best features that you guys have added.  The documentation for your JavaScript API on the various components has always been a little.. laggy.. :P  This really helps make up for that!!  

I love it.

- Matthew

April 25, 2010 11:35 PM

Daz

For VB users

   <%  If (DesignMode) Then %>

   <script src="ASPxScriptIntelliSense.js" type="text/javascript"/>

   <% End If%>

May 6, 2010 3:07 AM

Mehul Harry (DevExpress)

@Darren,

Great tip, thanks!

May 6, 2010 7:38 PM

David Woods

Can't seem to get this working on a master page so all child pages inherit it....

June 10, 2010 9:11 AM

Mehul Harry (DevExpress)

@David,

This approach will not work in VS2008, so you need manually add the reference to Intellisense schema file to all the pages. In VS2010 it works out of the box.

However,  there is a workaround for VS2008 to make this approach work: weblogs.asp.net/.../jquery-intellisense-in-vs-2008.aspx

- download SP fo VS which is described in the ScottGu post link. Then add a second ASPxScriptIntellisense.js to the project and rename it to ASPxScriptIntellisense-vsdoc.js

Hope that helps.

June 14, 2010 11:00 PM

Martijn van IJperen

We use JavaScript IntelliSense with the Standalone JavaScript File Support option. This works great only we don't want to distribute the javascript file to production, so my guess is that the code for example

ASPxClientGrid.Cast(s)

Will then not work anymore right?

So do i need to see this more to find the properties or am i wrong?

Thanks in advance

July 29, 2010 3:29 AM

Mehul Harry (DevExpress)

Martin,

Correct, it is not necessary to use the JavaScript IntelliSense. It is mostly useful during coding when you want to see our client-side JavaScript object's properties/methods.

July 30, 2010 2:00 PM

Martijn van IJperen

Thanks for the reply back!  

August 4, 2010 7:43 AM

Dave Deragon

Thanks for the information! It would be nice if you could provide a copy link in the text above so we could copy and paste the information.

August 23, 2010 12:02 PM

Mehul Harry (DevExpress)

Thanks Dave! Your feedback helped me update this post. I've included the source code so you can copy/paste it to your local VS instance.

Also, I've included the video screencast walk-through.

August 23, 2010 3:03 PM

Jim Buckley Barrett

Mehul - nice add on thank you.

June 2, 2011 12:15 PM

Mehul Harry (DevExpress)

Thanks Jim!

June 2, 2011 4:03 PM

Colin Drummond

I have a page which uses a MasterPage and I am having a problem getting the Javascript Intellisense to work.

The following code has been inserted into the my page (Note this is a VB project).

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

<%  If DesignMode Then%>

<script src="../../Scripts/ASPxScriptIntelliSense.js"

type="text/javascript">

</script>

<% End If%>

<script type="text/javascript">

   function GetCoordValues(s, e) {

       var chart = ASPxClientWebChartControl.Cast(s).GetChart();

       var coord = chart.diagram.PointToDiagram(e.x, e.y);

       if (e.hitInfo.inDiagram) {

...

       }

   }

</script>

Q1. Should the script ref to ASPxScriptIntelliSense.js go into the Master Page or the sub-page?

Q2. What changes are required for a VB.NET project as opposed to a C# project?

Q3. Any other reasons why Intellisense for the client side script is not working?

August 15, 2011 2:07 PM

Mehul Harry (DevExpress)

Colin,

Not sure but our excellent support team will look into it and get back to you. Thanks.

August 15, 2011 5:47 PM

Mike (DevExpress Support)

This issue is processed in the Support Center:

www.devexpress.com/issue=B204277

August 16, 2011 10:47 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners