Julian on JavaScript: Using jQuery with DevExpressASP.NET controls

Julian M Bucknall, CTOMehul Harry, ASP.NET Tech Evangelist

PART ONE!

Agenda− Basics

− DANGER: lots of thin ice− Simple animations− More complex examples− Next time?

Basics− jQuery has two main uses

− Finding elements− Doing something to those elements

− Changing values, properties, attributes− Animations

− DevExpress controls have some of the same features− Best to use the built-in support when possible

Basics− jQuery UI adds a whole new can of worms

− You can find yourself battling between what it wants and what the DevExpress ASP.NET controls want− Example is B144365

Basic issues - 1− DevExpress controls don’t use jQuery

− Remember to add a <script> element to load it<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.1.min.js"></script>

Basic issues - 2− How do you find the right DOM element?

− ASP.NET controls have a complex algorithm to name HTML elements

− Could use ClientInstanceName() to help

Basic issues - 3− When to set up bindings?

− Normally use jQuery(document).ready(someFunc);− (or jQuery(someFunc);)

− DevExpress controls have special initialization− May not be complete at document ready time

− Or, rather, your code gets executed first− So in certain cases use the Init event of

ClientSideEvents to set up bindings

Basic issues - 4− Obtrusive vs. unobtrusive JavaScript

− Modern style is to use unobtrusive JavaScript− DevExpress controls use obtrusive JavaScript− BEWARE!

Basic issues - 5− Losing jQuery bindings after callbacks

− DevExpress controls will rebuild parts of the DOM after a callback

− Your jQuery bindings could get lost− Example is E3324

Simple example− Drop a textbox, label, and button on form− Clicking the button will post the entered

text to the label and refresh the page− Using jQuery:

− If textbox is empty, show “Enter data” in it− If textbox gains focus & is empty, remove that

text− If textbox has value, just show value

DEMO

Add animation example− We’ll take the previous example and make

the label glow momentarily when first shown

− This example uses some very basic jQuery UI functionality

DEMO

Harder example− Using jQuery with ASPxGridView

DEMO

Interesting jQuery examples− The support team are adding jQuery

examples regularly− Interesting ones:

− E3324 – binding jQuery to data cells− E3325 – Attach jQuery AutoComplete to

ASPxTextBox− E1810 – drag/drop from one ASpxGridView to

another using jQuery UI library

Thank YouJulian M Bucknall ∙ CTO@jmbucknalljulianb@devexpress.comhttp://devexpress.com/julian

Mehul Harry ∙ Tech Evangelist@mehulharrymehulh@devexpress.comhttp://devexpress.com/mehul