8. Advanced Controls Manipulation
* Datagrid with Inline Editing
<< * The Easy Way to Add a Checkbox Column to 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 QCubed, 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
First Name
Last Name
Edit
1
kavita 2
arulyfred
Edit This Person
2
Kendall2
Publics
Edit This Person
3
Ben
5665564
Edit This Person
4
Mike
Ho
Edit This Person
5
Alex
Smith
Edit This Person
6
Wendy
Smith
Edit This Person
7
Karen
Wolfe
Edit This Person
8
Samantha
Jones
Edit This Person
9
Linda
Brady
Edit This Person
10
Jennifer
Smithfgfg
Edit This Person
11
Brett
Carlisle j
Edit This Person
12
Jacob
Pratt
Edit This Person
13
sdf
sdf
Edit This Person
14
sdhgfhsdg
jai
Edit This Person
15
billy
wilder
Edit This Person
16
Nice
Job
Edit This Person
17
good
job
Edit This Person
22
moi
tpo77
Edit This Person
27
test
test
Edit This Person
New