Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls
description
Transcript of Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls
![Page 1: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/1.jpg)
Julian on JavaScript: Using jQuery with DevExpressASP.NET controls
Julian M Bucknall, CTOMehul Harry, ASP.NET Tech Evangelist
![Page 2: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/2.jpg)
PART ONE!
![Page 3: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/3.jpg)
Agenda− Basics
− DANGER: lots of thin ice− Simple animations− More complex examples− Next time?
![Page 4: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/4.jpg)
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
![Page 5: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/5.jpg)
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
![Page 6: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/6.jpg)
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>
![Page 7: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/7.jpg)
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
![Page 8: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/8.jpg)
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
![Page 9: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/9.jpg)
Basic issues - 4− Obtrusive vs. unobtrusive JavaScript
− Modern style is to use unobtrusive JavaScript− DevExpress controls use obtrusive JavaScript− BEWARE!
![Page 10: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/10.jpg)
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
![Page 11: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/11.jpg)
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
![Page 12: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/12.jpg)
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
![Page 13: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/13.jpg)
Harder example− Using jQuery with ASPxGridView
DEMO
![Page 14: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/14.jpg)
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
![Page 15: Julian on JavaScript: Using jQuery with DevExpress ASP.NET controls](https://reader035.fdocuments.in/reader035/viewer/2022081505/568164ba550346895dd6c5d8/html5/thumbnails/15.jpg)
Thank YouJulian M Bucknall ∙ CTO@[email protected]://devexpress.com/julian
Mehul Harry ∙ Tech Evangelist@[email protected]://devexpress.com/mehul