8. Advanced Controls Manipulation
* Datagrid with Inline Editing
<< * Creating Checkboxes in a Datagrid   |   Back to Main   |   Introduction to QBlockControls >>

View Source
will open in a new window
Creating a QDataGrid with Inline Editing
Using the techniques for dynamically creating controls and utilizing the AJAX features in Qcodo, we update our Person datagrid to include functionality for inline editing.

We must first add a $intEditPersonId in the QForm to keep track of which Person (if any) we are currently editing. We then must define the First and Last Name QTextBoxes, as well as Save and Cancel QButtons. Note that we only need to define one of each, because only one Person can be edited at a time. The textboxes have QEscapeKeyEvents 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 QTextBox, 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 Sorted First Name Last Name Edit
1 Pop Doe
2 Kendall Public
3 Ben Robinson
4 Mike Ho
5 Alex Smith
6 Wendy Smith
7 Karen Wolfe
8 Samantha Jones
9 Linda Brady
10 Jennifer Smith
11 Brett Carlisle
12 Jacob Pratt