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

ASP.NET Team Blog
20 April 2010

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!

23 comment(s)
Aaron Smith
Aaron Smith

Very nice!

21 April, 2010
Anonymous
Michael

That's cool...

21 April, 2010
John Labrou
John Labrou

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

22 April, 2010
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@John,

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

Thanks.

22 April, 2010
Anonymous
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.

23 April, 2010
Mehul Harry (DevExpress)
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.

23 April, 2010
Matthew MacSuga
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

25 April, 2010
Daz
Daz

For VB users

   <%  If (DesignMode) Then %>

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

   <% End If%>

6 May, 2010
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Darren,

Great tip, thanks!

6 May, 2010
David Woods
David Woods

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

10 June, 2010
Mehul Harry (DevExpress)
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.

14 June, 2010
Martijn van IJperen
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

29 July, 2010
Mehul Harry (DevExpress)
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.

30 July, 2010
Martijn van IJperen
Martijn van IJperen

Thanks for the reply back!  

4 August, 2010
Dave Deragon
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.

23 August, 2010
Mehul Harry (DevExpress)
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.

23 August, 2010
Jim Buckley Barrett
Jim Buckley Barrett

Mehul - nice add on thank you.

2 June, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Thanks Jim!

2 June, 2011
Colin Drummond
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?

15 August, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Colin,

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

15 August, 2011
Mike (DevExpress Support)
Mike (DevExpress Support)

This issue is processed in the Support Center:

www.devexpress.com/issue=B204277

16 August, 2011
LEONEL GONZALEZ
LEONEL GONZALEZ

Hello.

I am having a problem getting the Javascript Intellisense.

The code:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

<% if (DesignMode){ %>

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

<% } %>

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

   <script type="text/javascript">

       cbkpanel.    ?????

   </script>

</asp:Content>

Regards.

17 July, 2017
LEONEL GONZALEZ
LEONEL GONZALEZ

Hello

I hoped to see:

MyControl.GetVisibleRowsOnPage...

MyControl.SetEnabled...

Regards.

17 July, 2017

Please login or register to post comments.