Julian on JavaScript:
Using jQuery with DevExpress
ASP.NET controls
Julian M Bucknall, CTO
Mehul 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 You
Julian M Bucknall ∙ CTO
@jmbucknall
[email protected]
http://devexpress.com/julian
Mehul Harry ∙ Tech Evangelist
@mehulharry
[email protected]
http://devexpress.com/mehul