What is AJAX XTender?

AJAX XTender will allow you to simply and efficiently data bind your data object to any AJAX UI Widget set. With binding in place, you will be able to tap into the feature-rich automation provided by Xtender and get on with your real work: ideas to implementation.

Below are screenshots and code samples of how AJAX XTender is used in Project Zero demo application. Go right to code.

1. Initial form state



2. Retrieved List of all Employees



3. Select 3rd row in employee list. Employee Detail populates automatically.



4. Now we change the First Name in Employee Detail section



5. Name was changed in the Employee grid as well. Now we can hit Save button.



6. Now we can try to delete the selected (3rd) record.



7. Refresh after deleted record



8. Now we will add a new Employee. We click on Add Employee button



9. We created a new Employee in the Employee Detail. And now we can Save



10. After refresh we see the new Employee in the grid.

Sample code

1. Declaration of databound text fields



2. What is a jsx.XTextBox? It is a very thin extension of default dojo textbox.



3. We bind our textboxes in the initOnLoad() method



4. Here we get and cosume JSON data



5. This code adds shows the selected Employee in Employee Detail



6. To display the Employee, we simply set the emp (Employee) object in the bind group and call refresh().



7. To save the Employee, we get the data from the bind group (bg), convert it to JSON: empDO.toJson(), and call HTTP PUT with dojo.rawXhrPut().