1. Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls Julian M Bucknall, CTO Mehul Harry, ASP.NET Tech Evangelist

2. PART ONE!

3. Agenda −Basics −DANGER: lots of thin ice −Simple animations −More complex examples −Next time?

4. 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

5. 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

6. Basic issues - 1 −DevExpress controls don’t use jQuery −Remember to add a element to load it

7. 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

8. 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

9. Basic issues - 4 −Obtrusive vs. unobtrusive JavaScript −Modern style is to use unobtrusive JavaScript −DevExpress controls use obtrusive JavaScript −BEWARE!

10. 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

11. 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

12. 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

13. Harder example −Using jQuery with ASPxGridView DEMO

14. 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

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