ASPxperience Client-Side Manipulation: Using Client APIs and Handling Client-Side Events

Size: px

Start display at page:

Download "ASPxperience Client-Side Manipulation: Using Client APIs and Handling Client-Side Events"

Catherine Simmons
5 years ago
Views:

ASPxperience Client-Side Manipulation: Using Client APIs and Handling Client-Side Events In this lesson, you ll learn how to work with Client-Side events of Developer Express Web Controls.

1 ASPxperience Client-Side Manipulation: Using Client APIs and Handling Client-Side Events In this lesson, you ll learn how to work with Client-Side events of Developer Express Web Controls. You ll learn to programmatically manipulate a web control state on the client-side. Finally, we ll cover how to use the online documentation, to find the information about a web control s client-side APIs. For this lesson, I ll use the ASPxPageControl and ASPxNavBar Controls and then change them using the Client-Side API which consists of the public client-side events, methods and properties. 1. Let s start by creating a simple webpage. 2. Add a table with two columns and one row to the form. 3. Then place an ASPxPageControl and an ASPxNavBar Control onto the different table cells. 4. Customize the layouts of the controls by creating the ASPxPageControl s tab pages and ASPxNavBar s Groups and Items.

2 5. Note that there is the same number of groups within the ASPxNavBar as there are tab pages within the ASPxPageControl. 6. Set the ASPxNavBar s AutoCollapse property to True. 7. Let s see how easy it is to work with a control s client-side events. 8. Open the ASPxPageControl s Client-Side Events Editor by invoking the control s smart tag and clicking the Client-Side Events item. 9. This Client-Side Events Editor exposes the list of available client-side events on the left side pane. 10. And on the right side, it allows developers to write an event handler s implementation, using JavaScript code. 11. In the handler for the ActiveTabChanged event, let s add a line of code which displays a simple message dialog.

event has been invoked. 14. Now let s save the changes and run the project. 15.

3 12. We ll call the JavaScript alert method and pass in our string which we want to display. 13. In this case, when the tab is changed, we ll notify the user by displaying the text The ActiveTabChanged event has been invoked. 14. Now let s save the changes and run the project. 15. When you click on a tab within the ASPxPageControl, you ll see that our message box is successfully displayed when the active tab page changes.

4 16. I ll now demonstrate how to modify the ASPxPageControl s ActiveTabChanged Event Handler to force the ASPxNavBar to expand a group. 17. It ll expand the group whose index is equal to the current active tab page s index. 18. To easily access a NavBar object on the client-side, define a value for the ASPxNavBar s ClientInstanceName property. 19. The ClientInstanceName property allows you to define a unique client-side identifier for the control. 20. For this demo, I ll set it to MyNavBar. 21. Now, let s start modifying the handler for the ASPxPageControl s ActiveTabChanged event. 22. Note that an event handler s code can be edited within either the Client-Side Events Editor, as we did before, or within the editor of the aspx page source directly. 23. Let s remove the old handling code, and provide a new handler. 24. The new handler will obtain the active tab page s index, and expand the corresponding group within the NavBar. 25. In order to correctly handle the ActiveTabChanged event, we need to know about what and how the event-specific information is passed to the event. 26. You can see an event handler function is passed with two parameters: s and e. 27. The s parameter represents the client object that raises the event. In our case, it represents the ASPxPageControl. 28. The e parameter represents the event s argument which typically contains event-specific information. 29. To figure out what the event-specific information is provided by this event s argument, let s look up the ActiveTabChanged s description in the documentation.

5 30. Type the ActiveTabChanged string into the search field within the invoked index window. 31. We can see two topics related to the ActiveTabChanged event. 32. One describes the server-side event, while the other, its client-side equivalent. 33. The client-side event is declared within an object name using the aspx client prefix. 34. Select the client-side event s description. 35. This event is inherited from the base, ASPxClientTabControlBase Object. 36. Let s look through the event data available within the event s handler. 37. The ActiveTabChanged Event s argument exposes the tab property, which provides access to the currently active tab page object. 38. We can see that the tab page object is represented by the ASPxClientTab Class. 39. Let s explore the properties in methods of this class to find the index property which you can use to get to the tab page s index. 40. So now, we can store the obtained index in a variable. 41. We re going to use this index value to access the corresponding group within the ASPxNavBar Control. 42. To fully utilize the ASPxNavBar s appropriate client properties or methods, we need to know the client-side API. 43. Luckily for us this information can also be found in the Developer Express Documentation. 44. For instance, open the online help s content section and then find the Developer Express ASPxperience product and select its reference section. 45. Find and expand the ASPxNavBar.Scripts item. It contains the client-side API which is available for the ASPxNavBar Control on the client.

46. Since we re going to access the NavBar group whose index equals the obtained index of the active tab page, let s select the ASPxClientNavBar Class and find the appropriate method. 47.

6 46. Since we re going to access the NavBar group whose index equals the obtained index of the active tab page, let s select the ASPxClientNavBar Class and find the appropriate method. 47. It appears that we can use the GetGroup method which returns a group specified by its index. 48. Now, we can write the second line of the event handler function. 49. We can now obtain the required NavBar group via JavaScript code. 50. Note that in order to refer to the Client NavBar object, we use the value assigned to the ASPxNavBar s ClientInstanceName property. 51. The last step of the handler function implementation is to expand the obtained NavBar group via code. 52. To find the appropriate client-side API, let s again refer to the online help. 53. We can see that a client group is represented by the ASPxClientNavBarGroup Class. 54. Looking through the members of this class, we can find the SetExpanded method which gets the parameter of the Boolean type. 55. So now we can complete the ActiveTabChanged event handler implementation by calling group.setexpanded and passing true. 56. Now, save your changes and run the project.

57. We can see that a change in the active tab page within the ASPxPageControl, makes the corresponding group expanded within the ASPxNavBar Control. 58.

7 57. We can see that a change in the active tab page within the ASPxPageControl, makes the corresponding group expanded within the ASPxNavBar Control. 58. So by writing just a couple of simple JavaScript code lines, we ve implemented custom client logic within our web application. 59. The documentation can be a great help to find and learn about the Client-Side API. Thanks for watching and thank you for choosing DevExpress.

Convert Your JavaScript Buttons for Lightning Experience

Convert Your JavaScript Buttons for Lightning Experience Version 1, 1 @salesforcedocs Last updated: January 8, 2019 Copyright 2000 2019 salesforce.com, inc. All rights reserved. Salesforce is a registered