Post
by aetaylorBUSBnWt » Fri Oct 28, 2022 1:57 pm
I have spent two weeks attempting to produce a functional Data Grid with a sqlite database.
The database side of things is not a problem - Sqlite I understand.
Data Grid, not so much.
It is quite clear that I have not found the right documentation, or don't understand it.
While I am providing lots of text and a Stack and database; it is NOT functional yet because
I have yet to discover how to implement many of the features - all related to Data Grid.
I would appreciate help from RunRev and the community to produce a functional Stack
and correct this article so that others can have a single, complete document to reference.
(and of course if I have extra code in the stack, please do let me know to remove it or move it)
The point of this very lengthy article is to put together a SINGLE document with an example stack
that shows how to:
Access Sqlite databases.
Create a Data Grid Table.
Set several columns to NOT be editable.
Modify the Data Grid Table columns to provide:
Be able to set a column level flag indicating that the contents of a column has changed
AND a flag at the Card or Data Grid level that indicates that one or more columns have changed.
Editable text edit column
Be able to set a flag indicating that the contents of the column has changed.
Set order for going from field to field via tab key, return key, enter key.
Enter Edit mode on a column with a single click like a spreadsheet.
Optionally enter Edit mode with Double click instead.
When in Edit mode, cell background color is white so it is easy to see cursor and text.
When tab key is pressed, the next text field in the current row is selected - NOT the next row!
Shows how to change the default text field in a column to a Checkbox button.
Be able to set a flag indicating that the contents of the column has changed.
Shows how to change the default text field in a column to a Option Menu button.
Be able to set a flag indicating that the contents of the column has changed.
Set up a Checkbox button so that its value is driven by the values of other columns.
(in the handler of the other columns, evaluate their contents and set the "driven" column's value)
Once any column's value has changed, then be able to enable an "Update" button so that when
the user has finished with their changes, they know to update the database with their changes.
IF the user attempts to select a different row or quit the application or select a different UI
element outside the Data Grid, present a dialog asking them to Update or Cancel.
Has some standard Text boxes, etc to fill in and an Insert Button to add a new row.
Has a Delete Button to delete a row.
I have created two database files, one with two tables, one with one table.
(once it is correct, this will also show how to do cross platform referencing of a document)
Created a Data Grid with the columns from the Database tables.
This includes those database fields that are rowID references to other database tables.
For the rowIDs, the "Visible" checkbox is unchecked because the rowIDs will not be displayed.
Don't know that this is necessary, but set the column data type to "numeric" for the rowIDs.
Instead a field from each Table will be displayed in different columns: "No Edit" and "Text".
Because we are displaying data from multiple databases, the Data Grid will have more columns
than the "main" database table. So inserting, getting and updating the databases will be done
via handlers that will create a record or array appropriate for the Data Grid.
Via the Card Script, set the following three columns to not editable with the following code in
the Card Script that loads the DataGrid.
set the dgColumnIsEditable["clnID"] of group "fDemoList" to "false"
set the dgColumnIsEditable["clntextkey"] of group "fDemoList" to "false"
set the dgColumnIsEditable["clnNoEdit"] of group "fDemoList" to "false"
Question:
Regarding names: We have the "column name", which apparently translates to the group name.
Then we have the UI element within the column group.
Is it necessary to change the UI element's name?
When will it be important to reference the UI element by name?
Question:
For properties that are not available to change in the Property Inspector, I changed
them in the Card level handler that loads the Data Grid with data.
Is that the appropriate level?
For the First Column (clnFirst) that I want to edit, created a Column Behavior because I want to
monitor if it changed and enable an update button as well as modify a different column
based on its contents and several others.
Bring up Property Inspector on the Data Grid and click the Columns Tab.
Select a column that I want to work with (clnFirst).
Click "+" to create a Column behavior.
Click Data Grid tab in Data Grid's property Inspector
Click "Row Template".
In the Edit Template window that shows up, click on the column name that shows up.
A large area is highlighted in the Edit Template window around the column selected.
The Property Inspector window changes its name to "group Row Template"
Click on the Edit Group tab in the Toolbar.
Now Editing Template window adds to its name to "background Row Template"
Click on the column name in the Edit Template window again.
"note that the Property Inspector window" says "group clnFirst".
Click on the Edit Group tab in the Toolbar again.
Now Editing Template window changes it name end to "background clnFirst"
Question:
For the background group clnFirst there are two properties:
Focus with keyboard
Contents focus with keyboard
Should these be checked or not checked in order to edit the field?
Now Property Inspector window title is "stack Data Grid Template"
Click on the column name in the Edit Template window again!
Now Property Inspector window title is "field _ColumnData_"
Want to be able to edit this field, so clicking on "Lock Text" to UNcheck that
since I want to be able to edit it.(it showed up as checked.)
Also click "Focus with keyboard" checkbox because I want to be able to do that.
Add a Tooltip (if you do this before doing the unchecking above, it goes away)
(did not change the actual name of the text field - still the default :_columnData_
These are all the changes I want via Property Inspector.
Clicked on Edit Template window.
Clicked on Stop Editing tab in Toolbar.
Selected "Save" in File Menu to save the changes.
(If I go to close the Edit Template window, it is going to ask to save if I have not already done it.)
For this column we do want to know if it has been changed so the "Update" button can be enabled.
So the column behavior handlers are going to need to detect any changes.
(deal with that when we edit the Column behavior handlers)
Do the above for the clnLast column.
For this column we just want to know if it has been changed so the "Update" button can be enabled.
Add a Tooltip (if you do this before doing the unchecking above, it goes away)
(did not change the actual name of the text field - still the default :_columnData_
clnOtherID is not visible, so do nothing for it.
Now for next column (clnMenu), I want it to be an option menu.
So after creating a column behavior, and doing all the row template editing and clicking,
once I am editing the clnMenu group, instead of selecting the text field that shows up
in the Edit Template window and editing its properties, I will select it and delete it.
Do note, there will only be one item in the Editing Template window at this point
and the Editing Template window name will end with "background clnMenu".
Then drag an "option menu" in from the Palette or via the Object / New Control menu,
select an option menu to put into the clnMenu group.
So now that I have a button, named "Option Menu", make sure it is selected.
The we will be editing the Property Inspector to put in the menu choices for this menu.
If you have a specific number of menu items, YOU MUST SET that count FIRST.
Otherwise, if you fill in the choice list, because it is first as you work your
way down the Inspector window, when you ge to the menu item count and change it,
then everything you just put in gets replaced with the default values.
Add a Tooltip (if you do this before doing the unchecking above, it goes away)
Did change the name of this button to "clnMenu".
Once done with those settings, Click Stop Editing in the Toolbar.
And of course, SAVE.
Now for my next field, I want a Checkbox, named Stored.
So back in the Property Inspector for the DataGrid, select the field in the Columns tab,
and add a column Behavior, by clicking the "+" button like before.
Then like before with the Option Menu, do all the clicking to get to the Edit Template
of this newest group, named clnStored. (Edit Template window is named: background "clnStored")
Click Edit Group in Toolbar
And now delete the clnStored field - it is a text field.
Add a Checkbox control.
Now in the Property Inspector, name the button. Un-check "Show Name".
The DataGrid column has a title, so don't need one next to the checkbox.
Add a Tooltip (if you do this before doing the unchecking above, it goes away)
Did change the name of this button to "clnStored".
The next column clnCombo, is also going to be a checkbox, so do all the same
stuff to get a checkbox in there.
BUT For this column the Checkbox value is going to be controlled by a calculation
based on the values of other fields. This will be done in the behavior method
of those other columns. Same function in each of them is called when any of
those fields are modified.
Did change the name of this button to "clnCombo".
Next SAVE and close the Edit Template window.
Next column: clnSepID is a "not Visible", so skipping it.
Next column: clnNoEdit - doing nothing, it has its editable property set to false.
Next column: clnText - we just want to detect changes like with clnLast.
(did not change the actual name of the text field - still the default :_columnData_
Add a Tooltip (if you do this before doing the unchecking above, it goes away)
Now need to put the code in for all the column behaviors.
Created a bunch of code to open databases, insert records, update records.
Will move it to its own subStack or livecodeScript.
Via the Project Browser window you can click on the + button of the Stack of interest, in this case DemoDB.
Then click the + button (open) on the Data Grid Templates.
If there is only one DataGrid in your stack, then open the 2nd card.
It will show you the contents that you just edited and created.
The last entries are the buttons whose purpose is to contain the program
code for the column behaviors for those columns that you added a behavior too.
Control-click on a button to get the popup menu and select Edit Script to edit the behavior.
The modifications made to the scripts for the checkboxes and option menu were determined
by lots of web surfing and reading of lessons.
What I don't really understand is how to operate on the text fields and set the order
of how the tab key causes moves from field to field.
Now when I run this Stack, None of the Text Field behaviors get called for Editing purposes.
I set breakpoints on the FillInData and LayoutControl handlers and those do get called
when loading the Data Grid Table.
But neither the EditValue or mouseDoubleUp handlers get called.
I have tried various other handlers suggested in various web site articles,
but NONE of them produce consistent results and some are never documented in any
direct Livecode documentation.
SO, HOW DOES ONE GET A TEXT FIELD TO BE EDITED?
How do you intercept the end of the edit process and find out what got changed?
In short, what are ALL of the handlers that I might modify when I have a text field
in a Data Grid?
How do you change the order of fields that tab key causes?
I want tab key to go from one field to the next in a SINGLE row and wrap around again.
Not walk up and down all of the rows in the Data Grid table.
-
Attachments
-
- DemoDB.livecode.zip
- (16.52 KiB) Downloaded 50 times
-
- demoDBs.zip
- (3.8 KiB) Downloaded 53 times
