julian on javascript using jquery with devexpress asp net controls l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls PowerPoint Presentation
Download Presentation
Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls

Loading in 2 Seconds...

play fullscreen
1 / 15

Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls - PowerPoint PPT Presentation


  • 343 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls' - eris


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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

agenda
Agenda
  • Basics
    • DANGER: lots of thin ice
  • Simple animations
  • More complex examples
  • Next time?
basics
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
basics5
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
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
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
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
Basic issues - 4
  • Obtrusive vs. unobtrusive JavaScript
    • Modern style is to use unobtrusive JavaScript
    • DevExpress controls use obtrusive JavaScript
    • BEWARE!
basic issues 5
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
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
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
Harder example
  • Using jQuery with ASPxGridView

DEMO

interesting jquery examples
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
slide15

Mehul Harry ∙ Tech Evangelist

Julian M Bucknall ∙ CTO

@jmbucknall

julianb@devexpress.com

http://devexpress.com/julian

@mehulharry

mehulh@devexpress.com

http://devexpress.com/mehul