Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls

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

Mehul Harry ∙ Tech Evangelist Julian M Bucknall ∙ CTO @jmbucknall julianb@devexpress.com http://devexpress.com/julian @mehulharry mehulh@devexpress.com http://devexpress.com/mehul

Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls