Creating a DataGrid with Inline Editing

Using the techniques for dynamically creating controls and utilizing the AJAX features in QCubed, we update our Person datagrid to include functionality for inline editing.

We must first add a $intEditPersonId in the FormBase to keep track of which Person (if any) we are currently editing. We then must define the First and Last Name TextBoxes, as well as Save and Cancel Buttons. Note that we only need to define one of each, because only one Person can be edited at a time. The textboxes have EscapeKeyEvents defined on them to perform a "Cancel", and the "Save" button is set to be a PrimaryButton. This allows the textboxes to be sensitive to the Enter and Escape keys for saving and cancelling, respectively.

We also define render methods for each of the columns to properly display either the name or the TextBox, depending on the row we are rendering and which Person we are editing.

And finally, we add a btnNew at the bottom to allow the user to create new Person objects. If they want to create a new person, the $intEditPersonId is set to -1, and we get the datagrid to basically act as if it's editing a blank person.

Person Id
First Name Last Name Edit
1JohnDoe
2KendallPublic afd
3BenRobinson
4MikeHo
5Alex1Smith
6WendySmith
7KarenWolfe
8SamanthaJones
9LindaBrady
10JenniferSmith
11BrettCarlisle
12JacobPratt
1351
1451ññ
1551ññ
1651ññ
1751ññ
1851ññ
1951ññ
2051ññ
2151ññ
2251ññ
2351ññ
2451ññ
2512
2612
27asdfasdf
28lolk
29lolk
30lolk
31lolk
32lolk
33lolk
34lolk
35lolk
364asdads
374asdads
384asdads
394asdads
404asdads
41asdasasdads
42asdasasdads
43asdasasdads
44asdasasdads
45asdasasdads