1 / 15

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

hollis
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <script> element to load it <script type="text/javascript"src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.1.min.js"></script>

  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. Mehul Harry ∙ Tech Evangelist Julian M Bucknall ∙ CTO @jmbucknall julianb@devexpress.com http://devexpress.com/julian @mehulharry mehulh@devexpress.com http://devexpress.com/mehul

More Related